@olenbetong/appframe-ds 1.5.0 → 1.6.1

package/src/AfLookup/LookupCombobox.tsx

@@ -1,237 +1,273 @@
-import "./LookupCombobox.css";
-
-import { Button, Textfield } from "@digdir/designsystemet-react";
-import type { DataObject } from "@olenbetong/appframe-data";
-import { type LookupColumn, useComboboxData } from "@olenbetong/appframe-react";
-
-import clsx from "clsx";
-import { useEffect, useLayoutEffect, useRef, useState } from "react";
-import { List, type RowComponentProps, useDynamicRowHeight, useListRef } from "react-window";
-
-import { LookupGrid } from "./LookupGrid.js";
-import { getLocalizedString } from "../i18n.js";
-
-export interface LookupComboboxBaseProps<T extends Record<string, unknown>> {
-	nullable?: boolean;
-	dataObject: DataObject<T>;
-	uniqueIdField?: string;
-	initialSearchValue?: string;
-	isItemSelected?: (item: T) => boolean;
-	onChange?: (item: T | null) => void;
-	value?: T;
-	onClose?: () => void;
-}
-
-export interface LookupComboboxListProps<T extends Record<string, unknown>> extends LookupComboboxBaseProps<T> {
-	/**
-	 * Renders the popup content as a list (default).
-	 */
-	variant?: "list";
-	renderItem: (props: React.ComponentPropsWithRef<"li"> & { item: T }) => React.ReactNode;
-}
-
-export interface LookupComboboxGridProps<T extends Record<string, unknown>> extends LookupComboboxBaseProps<T> {
-	/**
-	 * Renders the popup content as a grid with a header row and one column per
-	 * entry in `columns`.
-	 */
-	variant: "grid";
-	columns: LookupColumn<T>[];
-}
-
-export type LookupComboboxProps<T extends Record<string, unknown>> =
-	| LookupComboboxListProps<T>
-	| LookupComboboxGridProps<T>;
-
-type LookupComboboxRowProps<T extends Record<string, unknown>> = {
-	data: T[];
-	currentIndex: number;
-	isDesktop: boolean;
-	getItemId: (item: T | undefined) => string | undefined;
-	isItemSelected?: (item: T) => boolean;
-	onSelectItem: (item: T) => void;
-	renderItem: LookupComboboxListProps<T>["renderItem"];
-};
-
-function LookupComboboxRow<T extends Record<string, unknown>>({
-	index,
-	style,
-	data,
-	currentIndex,
-	isDesktop,
-	getItemId,
-	isItemSelected,
-	onSelectItem,
-	renderItem: ItemComponent,
-}: RowComponentProps<LookupComboboxRowProps<T>>) {
-	let item = data[index];
-	let itemId = getItemId(item);
-	let active = index === currentIndex;
-
-	return (
-		<ItemComponent
-			className={clsx("ObCombobox-listItem", active && "active", isItemSelected?.(item) && "selected")}
-			aria-selected={active}
-			onClick={() => onSelectItem(item)}
-			item={item}
-			style={{
-				...style,
-				padding: isDesktop ? "4px 8px" : "8px",
-			}}
-			id={itemId}
-		/>
-	);
-}
-
-export function LookupCombobox<T extends Record<string, unknown>>(props: LookupComboboxProps<T>) {
-	let {
-		nullable,
-		dataObject,
-		isItemSelected,
-		uniqueIdField = "PrimKey",
-		initialSearchValue,
-		onChange,
-		onClose,
-	} = props;
-	let isGrid = props.variant === "grid";
-	let columns = isGrid ? (props as LookupComboboxGridProps<T>).columns : undefined;
-	let listRef = useListRef(null);
-
-	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 {
-		id,
-		data,
-		loading,
-		inputValue,
-		setInputValue,
-		currentIndex,
-		currentColumn,
-		getItemId,
-		handleSelectItem,
-		handleKeyDown,
-	} = useComboboxData<T>({
-		dataObject,
-		uniqueIdField,
-		columnCount: columns?.length ?? 1,
-		onChange,
-	});
-
-	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();
-	}, []);
-
-	// Rows are rendered by the consumer and have no fixed height, so let the
-	// list measure them as they mount.
-	let rowHeight = useDynamicRowHeight({ defaultRowHeight: 56 });
-
-	useEffect(() => {
-		if (currentIndex >= 0 && currentIndex < data.length) {
-			listRef.current?.scrollToRow({ index: currentIndex, align: "smart" });
-		}
-	}, [currentIndex, data.length, listRef]);
-
-	useEffect(() => {
-		if (initialSearchValue !== undefined) {
-			setInputValue(initialSearchValue);
-		}
-	}, [initialSearchValue, setInputValue]);
-
-	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>
-			<Textfield
-				type="search"
-				className="ObCombobox-input"
-				aria-label={getLocalizedString("Search")}
-				placeholder={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 &&
-					(columns ? (
-						<LookupGrid<T>
-							columns={columns}
-							data={data}
-							height={height}
-							currentIndex={currentIndex}
-							currentColumn={currentColumn}
-							getItemId={getItemId}
-							isItemSelected={isItemSelected}
-							onSelectItem={handleSelectItem}
-						/>
-					) : (
-						<div className="ObCombobox-list" role="listbox">
-							<List<LookupComboboxRowProps<T>>
-								role="presentation"
-								listRef={listRef}
-								style={{ height }}
-								rowCount={data.length}
-								rowHeight={rowHeight}
-								overscanCount={5}
-								rowComponent={LookupComboboxRow}
-								rowProps={{
-									data,
-									currentIndex,
-									isDesktop,
-									getItemId,
-									isItemSelected,
-									onSelectItem: handleSelectItem,
-									renderItem: (props as LookupComboboxListProps<T>).renderItem,
-								}}
-							/>
-						</div>
-					))}
-			</div>
-		</div>
-	);
-}
+import "./LookupCombobox.css";
+
+import { Button, Textfield } from "@digdir/designsystemet-react";
+import { type DataObject, SortOrder } from "@olenbetong/appframe-data";
+import { type LookupColumn, useComboboxData } from "@olenbetong/appframe-react";
+
+import clsx from "clsx";
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { List, type RowComponentProps, useDynamicRowHeight, useListRef } from "react-window";
+
+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;
+	dataObject: DataObject<T>;
+	uniqueIdField?: string;
+	initialSearchValue?: string;
+	isItemSelected?: (item: T) => boolean;
+	onChange?: (item: T | null) => void;
+	value?: T;
+	onClose?: () => void;
+}
+
+export interface LookupComboboxListProps<T extends Record<string, unknown>> extends LookupComboboxBaseProps<T> {
+	/**
+	 * Renders the popup content as a list (default).
+	 */
+	variant?: "list";
+	renderItem: (props: React.ComponentPropsWithRef<"li"> & { item: T }) => React.ReactNode;
+}
+
+export interface LookupComboboxGridProps<T extends Record<string, unknown>> extends LookupComboboxBaseProps<T> {
+	/**
+	 * Renders the popup content as a grid with a header row and one column per
+	 * entry in `columns`.
+	 */
+	variant: "grid";
+	columns: LookupColumn<T>[];
+}
+
+export type LookupComboboxProps<T extends Record<string, unknown>> =
+	| LookupComboboxListProps<T>
+	| LookupComboboxGridProps<T>;
+
+type LookupComboboxRowProps<T extends Record<string, unknown>> = {
+	data: T[];
+	currentIndex: number;
+	isDesktop: boolean;
+	getItemId: (item: T | undefined) => string | undefined;
+	isItemSelected?: (item: T) => boolean;
+	onSelectItem: (item: T) => void;
+	renderItem: LookupComboboxListProps<T>["renderItem"];
+};
+
+function LookupComboboxRow<T extends Record<string, unknown>>({
+	index,
+	style,
+	data,
+	currentIndex,
+	isDesktop,
+	getItemId,
+	isItemSelected,
+	onSelectItem,
+	renderItem: ItemComponent,
+}: RowComponentProps<LookupComboboxRowProps<T>>) {
+	let item = data[index];
+	let itemId = getItemId(item);
+	let active = index === currentIndex;
+
+	return (
+		<ItemComponent
+			className={clsx("ObCombobox-listItem", active && "active", isItemSelected?.(item) && "selected")}
+			aria-selected={active}
+			onClick={() => onSelectItem(item)}
+			item={item}
+			style={{
+				...style,
+				padding: isDesktop ? "4px 8px" : "8px",
+			}}
+			id={itemId}
+		/>
+	);
+}
+
+export function LookupCombobox<T extends Record<string, unknown>>(props: LookupComboboxProps<T>) {
+	let {
+		nullable,
+		dataObject,
+		isItemSelected,
+		uniqueIdField = "PrimKey",
+		initialSearchValue,
+		onChange,
+		onClose,
+	} = props;
+	let isGrid = props.variant === "grid";
+	let columns = isGrid ? (props as LookupComboboxGridProps<T>).columns : undefined;
+	let listRef = useListRef(null);
+
+	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 {
+		id,
+		data,
+		loading,
+		inputValue,
+		setInputValue,
+		currentIndex,
+		currentColumn,
+		getItemId,
+		handleSelectItem,
+		handleKeyDown,
+	} = useComboboxData<T>({
+		dataObject,
+		uniqueIdField,
+		columnCount: columns?.length ?? 1,
+		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);
+
+	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();
+	}, []);
+
+	// Rows are rendered by the consumer and have no fixed height, so let the
+	// list measure them as they mount.
+	let rowHeight = useDynamicRowHeight({ defaultRowHeight: 56 });
+
+	useEffect(() => {
+		if (currentIndex >= 0 && currentIndex < data.length) {
+			listRef.current?.scrollToRow({ index: currentIndex, align: "smart" });
+		}
+	}, [currentIndex, data.length, listRef]);
+
+	useEffect(() => {
+		if (initialSearchValue !== undefined) {
+			setInputValue(initialSearchValue);
+		}
+	}, [initialSearchValue, setInputValue]);
+
+	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
+		// 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"
+				aria-label={getLocalizedString("Search")}
+				placeholder={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 && (
+					<LinearProgress
+						overlay
+						className="ObCombobox-progress"
+						data-size="xs"
+						aria-label={getLocalizedString("Loading")}
+					/>
+				)}
+				{height > 0 &&
+					(columns ? (
+						<LookupGrid<T>
+							columns={columns}
+							data={data}
+							height={height}
+							currentIndex={currentIndex}
+							currentColumn={currentColumn}
+							getItemId={getItemId}
+							isItemSelected={isItemSelected}
+							onSelectItem={handleSelectItem}
+							sort={sort}
+							onSort={handleSort}
+						/>
+					) : (
+						<div className="ObCombobox-list" role="listbox">
+							<List<LookupComboboxRowProps<T>>
+								role="presentation"
+								listRef={listRef}
+								style={{ height }}
+								rowCount={data.length}
+								rowHeight={rowHeight}
+								overscanCount={5}
+								rowComponent={LookupComboboxRow}
+								rowProps={{
+									data,
+									currentIndex,
+									isDesktop,
+									getItemId,
+									isItemSelected,
+									onSelectItem: handleSelectItem,
+									renderItem: (props as LookupComboboxListProps<T>).renderItem,
+								}}
+							/>
+						</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>
+	);
+}