@olenbetong/appframe-ds 1.5.0 → 1.6.0

package/src/AfLookup/LookupGrid.tsx

@@ -1,14 +1,22 @@
 import "./LookupGrid.css";
 
+import { ArrowDownIcon, ArrowUpIcon } from "@navikt/aksel-icons";
 import type { LookupColumn } from "@olenbetong/appframe-react";
 
 import clsx from "clsx";
-import { useEffect, useMemo } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { List, type RowComponentProps, useListRef } from "react-window";
 import { getLocalizedString } from "../i18n.js";
 
 const ROW_HEIGHT = 40;
 const HEADER_HEIGHT = 40;
+/** Narrowest a column can be made, and what a flexible column counts for in the minimum width */
+const MIN_COLUMN_WIDTH = 80;
+
+export type LookupGridSort = {
+	field: string;
+	direction: "asc" | "desc";
+};
 
 export interface LookupGridProps<T extends Record<string, unknown>> {
 	columns: LookupColumn<T>[];
@@ -19,18 +27,49 @@ export interface LookupGridProps<T extends Record<string, unknown>> {
 	getItemId: (item: T | undefined) => string | undefined;
 	isItemSelected?: (item: T) => boolean;
 	onSelectItem: (item: T) => void;
+	/**
+	 * The column the rows are sorted by, shown with an arrow in its header
+	 */
+	sort?: LookupGridSort;
+	/**
+	 * Called with the field of a header the user clicked. When left out the headers are plain text.
+	 */
+	onSort?: (field: string) => void;
 }
 
-function getColumnWidth<T extends Record<string, unknown>>(column: LookupColumn<T>) {
+/** The track for one column in `grid-template-columns`; a width the user dragged wins over the configured one */
+function getColumnTrack<T extends Record<string, unknown>>(column: LookupColumn<T>, resizedWidth: number | undefined) {
+	if (resizedWidth !== undefined) {
+		return `${resizedWidth}px`;
+	}
 	if (typeof column.width === "number") {
 		return `${column.width}px`;
 	}
 
-	return column.width ?? "minmax(80px, 1fr)";
+	return column.width ?? `minmax(${MIN_COLUMN_WIDTH}px, 1fr)`;
+}
+
+/** What a column contributes to the narrowest width the grid can be laid out in */
+function getColumnMinWidth<T extends Record<string, unknown>>(
+	column: LookupColumn<T>,
+	resizedWidth: number | undefined,
+) {
+	if (resizedWidth !== undefined) {
+		return resizedWidth;
+	}
+	if (typeof column.width === "number") {
+		return column.width;
+	}
+	if (typeof column.width === "string" && /^\d+(\.\d+)?px$/.test(column.width)) {
+		return Number.parseFloat(column.width);
+	}
+
+	return MIN_COLUMN_WIDTH;
 }
 
-type LookupGridRowProps<T extends Record<string, unknown>> = Omit<LookupGridProps<T>, "height"> & {
+type LookupGridRowProps<T extends Record<string, unknown>> = Omit<LookupGridProps<T>, "height" | "sort" | "onSort"> & {
 	gridTemplateColumns: string;
+	minWidth: number;
 };
 
 function LookupGridRow<T extends Record<string, unknown>>({
@@ -41,6 +80,7 @@ function LookupGridRow<T extends Record<string, unknown>>({
 	currentIndex,
 	currentColumn,
 	gridTemplateColumns,
+	minWidth,
 	getItemId,
 	isItemSelected,
 	onSelectItem,
@@ -54,7 +94,7 @@ function LookupGridRow<T extends Record<string, unknown>>({
 			role="row"
 			aria-selected={active}
 			className={clsx("ObLookupGrid-row", active && "active", isItemSelected?.(item) && "selected")}
-			style={{ ...style, gridTemplateColumns }}
+			style={{ ...style, gridTemplateColumns, minWidth }}
 			onClick={() => onSelectItem(item)}
 			id={itemId}
 		>
@@ -65,13 +105,77 @@ function LookupGridRow<T extends Record<string, unknown>>({
 					key={column.field}
 					title={String(item[column.field] ?? "")}
 				>
-					{column.renderCell ? column.renderCell(item[column.field], item) : String(item[column.field] ?? "")}
+					{/* The cell is a flex container, so the ellipsis has to be on an element inside it */}
+					<span className="ObLookupGrid-cellText">
+						{column.renderCell ? column.renderCell(item[column.field], item) : String(item[column.field] ?? "")}
+					</span>
 				</div>
 			))}
 		</div>
 	);
 }
 
+type ColumnResizerProps = {
+	onResize: (delta: number) => void;
+	/** Called with the handle, whose parent is the header cell being resized */
+	onResizeStart: (handle: HTMLElement) => void;
+	onResizeEnd: () => void;
+	onReset: () => void;
+};
+
+/**
+ * The drag handle at the end of a header cell. Pointer capture keeps the drag alive when the
+ * pointer leaves the handle; a double click puts the column back to its configured width.
+ */
+function ColumnResizer({ onResize, onResizeStart, onResizeEnd, onReset }: ColumnResizerProps) {
+	let startX = useRef(0);
+
+	return (
+		// oxlint-disable-next-line jsx-a11y/no-static-element-interactions -- a drag handle; the grid is keyboard navigable by cell
+		<div
+			role="separator"
+			aria-orientation="vertical"
+			aria-label={getLocalizedString("Resize column")}
+			className="ObLookupGrid-resizer"
+			onClick={(event) => event.stopPropagation()}
+			onDoubleClick={(event) => {
+				event.stopPropagation();
+				onReset();
+			}}
+			onPointerDown={(event) => {
+				if (event.button !== 0) return;
+				event.preventDefault();
+				event.stopPropagation();
+				event.currentTarget.setPointerCapture(event.pointerId);
+				startX.current = event.clientX;
+				onResizeStart(event.currentTarget);
+			}}
+			onPointerMove={(event) => {
+				if (!event.currentTarget.hasPointerCapture(event.pointerId)) return;
+				onResize(event.clientX - startX.current);
+			}}
+			onPointerUp={(event) => {
+				if (!event.currentTarget.hasPointerCapture(event.pointerId)) return;
+				event.currentTarget.releasePointerCapture(event.pointerId);
+				onResizeEnd();
+			}}
+			onPointerCancel={onResizeEnd}
+		/>
+	);
+}
+
+/**
+ * The grid variant of the lookup popup: a header row and a virtualised list of rows, laid out
+ * with the same `grid-template-columns`.
+ *
+ * Only the list scrolls. It scrolls both ways when the columns are wider than the popup, and
+ * the header follows it sideways with a transform, so the header never needs a scrollbar of
+ * its own. The list reserves its vertical scrollbar gutter, and the header row is given the
+ * list's inner width, so flexible (`1fr`) columns line up between the two.
+ *
+ * Columns can be resized by dragging the handle at the end of a header cell. The widths live
+ * in the grid, so they last for as long as the popup is open.
+ */
 export function LookupGrid<T extends Record<string, unknown>>({
 	columns,
 	data,
@@ -81,9 +185,23 @@ export function LookupGrid<T extends Record<string, unknown>>({
 	getItemId,
 	isItemSelected,
 	onSelectItem,
+	sort,
+	onSort,
 }: LookupGridProps<T>) {
 	let listRef = useListRef(null);
-	let gridTemplateColumns = useMemo(() => columns.map(getColumnWidth).join(" "), [columns]);
+	let headerRowRef = useRef<HTMLDivElement>(null);
+	let [resizedWidths, setResizedWidths] = useState<Partial<Record<string, number>>>({});
+	let [resizing, setResizing] = useState<{ field: string; startWidth: number } | null>(null);
+	let [listInnerWidth, setListInnerWidth] = useState<number>();
+
+	let gridTemplateColumns = useMemo(
+		() => columns.map((column) => getColumnTrack(column, resizedWidths[column.field])).join(" "),
+		[columns, resizedWidths],
+	);
+	let minWidth = useMemo(
+		() => columns.reduce((sum, column) => sum + getColumnMinWidth(column, resizedWidths[column.field]), 0),
+		[columns, resizedWidths],
+	);
 
 	useEffect(() => {
 		if (currentIndex >= 0 && currentIndex < data.length) {
@@ -91,22 +209,103 @@ export function LookupGrid<T extends Record<string, unknown>>({
 		}
 	}, [currentIndex, data.length, listRef]);
 
+	// The header row is as wide as the list's inner (client) width, so 1fr columns match the rows
+	useEffect(() => {
+		let element = listRef.current?.element;
+		if (!element) return;
+
+		let measure = () => setListInnerWidth(element.clientWidth);
+		measure();
+
+		let observer = new ResizeObserver(measure);
+		observer.observe(element);
+
+		return () => observer.disconnect();
+	}, [listRef, height]);
+
+	let handleScroll = useCallback((event: React.UIEvent<HTMLDivElement>) => {
+		if (headerRowRef.current) {
+			headerRowRef.current.style.transform = `translateX(${-event.currentTarget.scrollLeft}px)`;
+		}
+	}, []);
+
+	function startResize(field: string, cell: HTMLElement) {
+		setResizing({ field, startWidth: cell.getBoundingClientRect().width });
+	}
+
+	function resizeBy(delta: number) {
+		if (!resizing) return;
+		let { field, startWidth } = resizing;
+		let width = Math.max(MIN_COLUMN_WIDTH, Math.round(startWidth + delta));
+		setResizedWidths((widths) => (widths[field] === width ? widths : { ...widths, [field]: width }));
+	}
+
+	function resetWidth(field: string) {
+		setResizedWidths(({ [field]: _removed, ...rest }) => rest);
+	}
+
 	return (
-		<div role="grid" aria-label={getLocalizedString("Search results")} className="ObLookupGrid-root">
-			<div role="row" className="ObLookupGrid-header" style={{ gridTemplateColumns }}>
-				{columns.map((column) => (
-					<div role="columnheader" className="ObLookupGrid-headerCell" key={column.field}>
-						{column.headerName ?? column.field}
-					</div>
-				))}
+		<div
+			role="grid"
+			aria-label={getLocalizedString("Search results")}
+			className="ObLookupGrid-root"
+			data-resizing={resizing ? "" : undefined}
+		>
+			<div className="ObLookupGrid-header">
+				<div
+					role="row"
+					ref={headerRowRef}
+					className="ObLookupGrid-headerRow"
+					style={{ gridTemplateColumns, minWidth, width: listInnerWidth }}
+				>
+					{columns.map((column) => {
+						let sortable = !!onSort && column.sortable !== false;
+						let sorted = sort?.field === column.field ? sort.direction : undefined;
+						let label = column.headerName ?? column.field;
+						let SortIcon = sorted === "desc" ? ArrowDownIcon : ArrowUpIcon;
+
+						return (
+							<div
+								role="columnheader"
+								className="ObLookupGrid-headerCell"
+								key={column.field}
+								aria-sort={sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : undefined}
+							>
+								{sortable ? (
+									<button
+										type="button"
+										className={clsx("ObLookupGrid-sortButton", sorted && "sorted")}
+										// Keeps the focus in the search field, so typing carries on after a click
+										onMouseDown={(event) => event.preventDefault()}
+										onClick={() => onSort?.(column.field)}
+										tabIndex={-1}
+									>
+										<span className="ObLookupGrid-headerText">{label}</span>
+										<SortIcon className="ObLookupGrid-sortIcon" aria-hidden />
+									</button>
+								) : (
+									<span className="ObLookupGrid-headerText">{label}</span>
+								)}
+								<ColumnResizer
+									onResizeStart={(handle) => startResize(column.field, handle.parentElement as HTMLElement)}
+									onResize={resizeBy}
+									onResizeEnd={() => setResizing(null)}
+									onReset={() => resetWidth(column.field)}
+								/>
+							</div>
+						);
+					})}
+				</div>
 			</div>
 			<List<LookupGridRowProps<T>>
 				role="rowgroup"
 				listRef={listRef}
+				className="ObLookupGrid-list"
 				style={{ height: Math.max(0, height - HEADER_HEIGHT) }}
 				rowCount={data.length}
 				rowHeight={ROW_HEIGHT}
 				overscanCount={5}
+				onScroll={handleScroll}
 				rowComponent={LookupGridRow}
 				rowProps={{
 					columns,
@@ -114,6 +313,7 @@ export function LookupGrid<T extends Record<string, unknown>>({
 					currentIndex,
 					currentColumn,
 					gridTemplateColumns,
+					minWidth,
 					getItemId,
 					isItemSelected,
 					onSelectItem,

package/src/autocomplete/Autocomplete.css

@@ -27,12 +27,9 @@
  * Font size is deliberately never set: `ds-input` inherits its font size when a
  * `data-size` attribute is present, so referencing `--ds-font-size-*` here — which
  * `data-size` rescales — would render the text smaller than a `Textfield` or
- * `Select` of the same size. Only the padding varies per size.
+ * `Select` of the same size. Only the padding varies per size, and only for the
+ * sizes Designsystemet components come in (sm, md, lg; xs and xl are typography-only).
  */
-.ObAutocomplete-root[data-size="xs"] {
-	--obAutocomplete-padding: 0.125rem;
-}
-
 .ObAutocomplete-root[data-size="sm"] {
 	--obAutocomplete-padding: 0.25rem;
 }

package/src/binding/BoundNumberInput.tsx

@@ -0,0 +1,42 @@
+import { useField } from "@olenbetong/appframe-react";
+
+import { NumberInput, type NumberInputProps } from "../input/NumberInput.js";
+
+export type BoundNumberInputProps = Omit<NumberInputProps, "value" | "onChange" | "onKeyDown"> & {
+	/**
+	 * Name of the number field in the data object from context
+	 */
+	field: string;
+	/**
+	 * Called with the new value before it is written to the data object
+	 */
+	onChange?: (value: number | null) => void;
+};
+
+/**
+ * A `NumberInput` bound to a number field of the data object from `DataObjectProvider`
+ * via `useField`. Escape resets the field, and a conversion error from the data object is
+ * shown below the input unless an `error` is passed.
+ *
+ * @example
+ * ```jsx
+ * <BoundNumberInput field="TotHrs" label="Total hours" step={0.25} min={0} max={24} />
+ * ```
+ */
+export function BoundNumberInput({ field, onChange: onChangeProp, error: errorProp, ...props }: BoundNumberInputProps) {
+	let { error, value, onChange, onKeyDown } = useField<any, any>(field);
+
+	return (
+		<NumberInput
+			name={field}
+			{...props}
+			error={errorProp ?? error ?? undefined}
+			value={typeof value === "number" ? value : null}
+			onChange={(next) => {
+				onChangeProp?.(next);
+				onChange({ target: { value: next } });
+			}}
+			onKeyDown={(event) => onKeyDown(event)}
+		/>
+	);
+}

package/src/binding/index.ts

@@ -2,6 +2,7 @@ export * from "./BoundCheckbox.js";
 export * from "./BoundDatePicker.js";
 export * from "./BoundDateTimePicker.js";
 export * from "./BoundInput.js";
+export * from "./BoundNumberInput.js";
 export * from "./BoundNumericTextField.js";
 export * from "./BoundSelect.js";
 export * from "./BoundSwitch.js";

package/src/input/InputAdornments.css

@@ -20,11 +20,7 @@
 	border-radius: var(--ds-border-radius-md, 0.375rem);
 }
 
-.ObInputAdornments-root[data-size="xs"] {
-	--obInputAdornments-padding: 0.125rem;
-	--obInputAdornments-fontSize: var(--ds-font-size-1, 0.75rem);
-}
-
+/* Designsystemet components come in sm, md and lg; xs and xl are typography-only sizes */
 .ObInputAdornments-root[data-size="sm"] {
 	--obInputAdornments-padding: 0.25rem;
 	--obInputAdornments-fontSize: var(--ds-font-size-2, 0.875rem);

package/src/input/NumberInput.css

@@ -0,0 +1,9 @@
+.ObNumberInput-root .ObInputAdornments-field {
+	/* Numbers read best right aligned, and the steppers sit at the end anyway */
+	text-align: end;
+	font-variant-numeric: tabular-nums;
+}
+
+.ObNumberInput-root .ObNumberInput-stepper {
+	flex-shrink: 0;
+}

package/src/input/NumberInput.test.tsx

@@ -0,0 +1,212 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { useState } from "react";
+import { describe, expect, it, vi } from "vitest";
+
+import { NumberInput, type NumberInputProps } from "./NumberInput.js";
+
+function Controlled({
+	initial = null,
+	onChange,
+	...props
+}: Partial<Omit<NumberInputProps, "value" | "onChange">> & {
+	initial?: number | null;
+	onChange?: (value: number | null) => void;
+}) {
+	let [value, setValue] = useState<number | null>(initial);
+
+	return (
+		<NumberInput
+			label="Hours"
+			{...props}
+			value={value}
+			onChange={(next) => {
+				setValue(next);
+				onChange?.(next);
+			}}
+		/>
+	);
+}
+
+describe("NumberInput", () => {
+	it("shows the value formatted with the fraction digits, in nb-NO without a session", () => {
+		render(<Controlled initial={8} />);
+
+		expect(screen.getByLabelText("Hours")).toHaveValue("8,00");
+	});
+
+	it("formats in the culture given", () => {
+		render(<Controlled initial={1234.5} culture="en-GB" />);
+
+		expect(screen.getByLabelText("Hours")).toHaveValue("1,234.50");
+	});
+
+	it("reads a period as the decimal separator for a Norwegian user too", async () => {
+		let onChange = vi.fn();
+		let user = userEvent.setup();
+		render(<Controlled initial={null} culture="nb-NO" onChange={onChange} />);
+
+		let input = screen.getByLabelText("Hours");
+		await user.type(input, "1.5");
+		expect(onChange).toHaveBeenLastCalledWith(1.5);
+
+		await user.tab();
+		expect(input).toHaveValue("1,50");
+	});
+
+	it("shows an empty input for null", () => {
+		render(<Controlled initial={null} />);
+
+		expect(screen.getByLabelText("Hours")).toHaveValue("");
+	});
+
+	it("parses typed text with either decimal separator", async () => {
+		let onChange = vi.fn();
+		let user = userEvent.setup();
+		render(<Controlled initial={null} onChange={onChange} />);
+
+		let input = screen.getByLabelText("Hours");
+		await user.type(input, "1,5");
+		expect(onChange).toHaveBeenLastCalledWith(1.5);
+		expect(input).toHaveValue("1,5");
+
+		await user.clear(input);
+		await user.type(input, "2.25");
+		expect(onChange).toHaveBeenLastCalledWith(2.25);
+	});
+
+	it("reports null when cleared and nothing while the text is incomplete", async () => {
+		let onChange = vi.fn();
+		let user = userEvent.setup();
+		render(<Controlled initial={3} onChange={onChange} />);
+
+		let input = screen.getByLabelText("Hours");
+		await user.clear(input);
+		expect(onChange).toHaveBeenLastCalledWith(null);
+
+		onChange.mockClear();
+		await user.type(input, "-");
+		expect(onChange).not.toHaveBeenCalled();
+	});
+
+	it("formats the value again on blur", async () => {
+		let user = userEvent.setup();
+		render(<Controlled initial={null} />);
+
+		let input = screen.getByLabelText("Hours");
+		await user.type(input, "1,5");
+		await user.tab();
+
+		expect(input).toHaveValue("1,50");
+	});
+
+	it("steps with the buttons, rounding to the fraction digits", async () => {
+		let onChange = vi.fn();
+		let user = userEvent.setup();
+		render(<Controlled initial={0.1} step={0.2} onChange={onChange} />);
+
+		await user.click(screen.getByRole("button", { name: "Increase value" }));
+		expect(onChange).toHaveBeenLastCalledWith(0.3);
+
+		await user.click(screen.getByRole("button", { name: "Decrease value" }));
+		await user.click(screen.getByRole("button", { name: "Decrease value" }));
+		expect(onChange).toHaveBeenLastCalledWith(-0.1);
+	});
+
+	it("steps from zero when empty", async () => {
+		let onChange = vi.fn();
+		let user = userEvent.setup();
+		render(<Controlled initial={null} step={0.25} onChange={onChange} />);
+
+		await user.click(screen.getByRole("button", { name: "Increase value" }));
+		expect(onChange).toHaveBeenLastCalledWith(0.25);
+	});
+
+	it("steps with the arrow keys and keeps the text selected", async () => {
+		let onChange = vi.fn();
+		let user = userEvent.setup();
+		render(<Controlled initial={1} onChange={onChange} />);
+
+		let input = screen.getByLabelText("Hours") as HTMLInputElement;
+		await user.click(input);
+		await user.keyboard("{ArrowUp}{ArrowUp}{ArrowDown}");
+
+		expect(onChange).toHaveBeenLastCalledWith(2);
+		expect(input).toHaveValue("2,00");
+	});
+
+	it("clamps typed and stepped values to min and max", async () => {
+		let onChange = vi.fn();
+		let user = userEvent.setup();
+		render(<Controlled initial={23} min={0} max={24} onChange={onChange} />);
+
+		let input = screen.getByLabelText("Hours");
+		await user.click(screen.getByRole("button", { name: "Increase value" }));
+		expect(onChange).toHaveBeenLastCalledWith(24);
+		expect(screen.getByRole("button", { name: "Increase value" })).toBeDisabled();
+
+		await user.clear(input);
+		await user.type(input, "30");
+		expect(onChange).toHaveBeenLastCalledWith(24);
+		expect(input).toHaveValue("24,00");
+
+		await user.clear(input);
+		await user.type(input, "-5");
+		expect(onChange).toHaveBeenLastCalledWith(0);
+	});
+
+	it("hides the steppers when read only, disabled or asked to", () => {
+		let { rerender } = render(<Controlled initial={1} readOnly />);
+		expect(screen.queryByRole("button")).toBeNull();
+
+		rerender(<Controlled initial={1} disabled />);
+		expect(screen.queryByRole("button")).toBeNull();
+
+		rerender(<Controlled initial={1} hideSteppers />);
+		expect(screen.queryByRole("button")).toBeNull();
+
+		rerender(<Controlled initial={1} />);
+		expect(screen.getAllByRole("button")).toHaveLength(2);
+	});
+
+	it("does not step a read only input from the keyboard", () => {
+		let onChange = vi.fn();
+		render(<Controlled initial={1} readOnly onChange={onChange} />);
+
+		fireEvent.keyDown(screen.getByLabelText("Hours"), { key: "ArrowUp" });
+		expect(onChange).not.toHaveBeenCalled();
+	});
+
+	it("shows the description and the error, and marks the input invalid", () => {
+		render(<Controlled initial={1} description="Including overtime" error="Too many hours" />);
+
+		expect(screen.getByText("Including overtime")).toBeInTheDocument();
+		expect(screen.getByText("Too many hours")).toBeInTheDocument();
+		expect(screen.getByLabelText("Hours")).toHaveAttribute("aria-invalid", "true");
+	});
+
+	it("shows a value changed from the outside while focused", async () => {
+		function Resettable() {
+			let [value, setValue] = useState<number | null>(5);
+			return (
+				<>
+					<NumberInput label="Hours" value={value} onChange={setValue} />
+					<button type="button" onClick={() => setValue(0)}>
+						Reset
+					</button>
+				</>
+			);
+		}
+
+		let user = userEvent.setup();
+		render(<Resettable />);
+
+		let input = screen.getByLabelText("Hours");
+		await user.click(input);
+		await user.keyboard("7");
+		expect(input).toHaveValue("7");
+
+		fireEvent.click(screen.getByRole("button", { name: "Reset" }));
+		expect(input).toHaveValue("0,00");
+	});
+});