@olenbetong/appframe-ds 1.6.1 → 1.7.0

package/src/AfLookup/LookupGrid.tsx

@@ -1,324 +1,324 @@
-import "./LookupGrid.css";
-
-import { ArrowDownIcon, ArrowUpIcon } from "@navikt/aksel-icons";
-import type { LookupColumn } from "@olenbetong/appframe-react";
-
-import clsx from "clsx";
-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>[];
-	data: T[];
-	height: number;
-	currentIndex: number;
-	currentColumn: number;
-	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;
-}
-
-/** 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(${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" | "sort" | "onSort"> & {
-	gridTemplateColumns: string;
-	minWidth: number;
-};
-
-function LookupGridRow<T extends Record<string, unknown>>({
-	index,
-	style,
-	columns,
-	data,
-	currentIndex,
-	currentColumn,
-	gridTemplateColumns,
-	minWidth,
-	getItemId,
-	isItemSelected,
-	onSelectItem,
-}: RowComponentProps<LookupGridRowProps<T>>) {
-	let item = data[index];
-	let itemId = getItemId(item);
-	let active = index === currentIndex;
-
-	return (
-		<div
-			role="row"
-			aria-selected={active}
-			className={clsx("ObLookupGrid-row", active && "active", isItemSelected?.(item) && "selected")}
-			style={{ ...style, gridTemplateColumns, minWidth }}
-			onClick={() => onSelectItem(item)}
-			id={itemId}
-		>
-			{columns.map((column, columnIndex) => (
-				<div
-					role="gridcell"
-					className={clsx("ObLookupGrid-cell", active && columnIndex === currentColumn && "active")}
-					key={column.field}
-					title={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,
-	height,
-	currentIndex,
-	currentColumn,
-	getItemId,
-	isItemSelected,
-	onSelectItem,
-	sort,
-	onSort,
-}: LookupGridProps<T>) {
-	let listRef = useListRef(null);
-	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) {
-			listRef.current?.scrollToRow({ index: currentIndex, align: "smart" });
-		}
-	}, [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"
-			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,
-					data,
-					currentIndex,
-					currentColumn,
-					gridTemplateColumns,
-					minWidth,
-					getItemId,
-					isItemSelected,
-					onSelectItem,
-				}}
-			/>
-		</div>
-	);
-}
+import "./LookupGrid.css";
+
+import { ArrowDownIcon, ArrowUpIcon } from "@navikt/aksel-icons";
+import type { LookupColumn } from "@olenbetong/appframe-react";
+
+import clsx from "clsx";
+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>[];
+	data: T[];
+	height: number;
+	currentIndex: number;
+	currentColumn: number;
+	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;
+}
+
+/** 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(${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" | "sort" | "onSort"> & {
+	gridTemplateColumns: string;
+	minWidth: number;
+};
+
+function LookupGridRow<T extends Record<string, unknown>>({
+	index,
+	style,
+	columns,
+	data,
+	currentIndex,
+	currentColumn,
+	gridTemplateColumns,
+	minWidth,
+	getItemId,
+	isItemSelected,
+	onSelectItem,
+}: RowComponentProps<LookupGridRowProps<T>>) {
+	let item = data[index];
+	let itemId = getItemId(item);
+	let active = index === currentIndex;
+
+	return (
+		<div
+			role="row"
+			aria-selected={active}
+			className={clsx("ObLookupGrid-row", active && "active", isItemSelected?.(item) && "selected")}
+			style={{ ...style, gridTemplateColumns, minWidth }}
+			onClick={() => onSelectItem(item)}
+			id={itemId}
+		>
+			{columns.map((column, columnIndex) => (
+				<div
+					role="gridcell"
+					className={clsx("ObLookupGrid-cell", active && columnIndex === currentColumn && "active")}
+					key={column.field}
+					title={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,
+	height,
+	currentIndex,
+	currentColumn,
+	getItemId,
+	isItemSelected,
+	onSelectItem,
+	sort,
+	onSort,
+}: LookupGridProps<T>) {
+	let listRef = useListRef(null);
+	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) {
+			listRef.current?.scrollToRow({ index: currentIndex, align: "smart" });
+		}
+	}, [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"
+			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,
+					data,
+					currentIndex,
+					currentColumn,
+					gridTemplateColumns,
+					minWidth,
+					getItemId,
+					isItemSelected,
+					onSelectItem,
+				}}
+			/>
+		</div>
+	);
+}

package/src/AfLookup/index.ts

@@ -1,5 +1,5 @@
-export * from "./BoundLookup.js";
-export * from "./LookupCombobox.js";
-export * from "./Lookup.js";
-export * from "./LookupEdit.js";
-export * from "./LookupGrid.js";
+export * from "./BoundLookup.js";
+export * from "./LookupCombobox.js";
+export * from "./Lookup.js";
+export * from "./LookupEdit.js";
+export * from "./LookupGrid.js";