@olenbetong/appframe-ds 1.2.0 → 1.3.0

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.tsx

@@ -1,124 +1,124 @@
-import "./LookupGrid.css";
-
-import type { LookupColumn } from "@olenbetong/appframe-react";
-
-import clsx from "clsx";
-import { useEffect, useMemo } from "react";
-import { List, type RowComponentProps, useListRef } from "react-window";
-import { getLocalizedString } from "../i18n.js";
-
-const ROW_HEIGHT = 40;
-const HEADER_HEIGHT = 40;
-
-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;
-}
-
-function getColumnWidth<T extends Record<string, unknown>>(column: LookupColumn<T>) {
-	if (typeof column.width === "number") {
-		return `${column.width}px`;
-	}
-
-	return column.width ?? "minmax(80px, 1fr)";
-}
-
-type LookupGridRowProps<T extends Record<string, unknown>> = Omit<LookupGridProps<T>, "height"> & {
-	gridTemplateColumns: string;
-};
-
-function LookupGridRow<T extends Record<string, unknown>>({
-	index,
-	style,
-	columns,
-	data,
-	currentIndex,
-	currentColumn,
-	gridTemplateColumns,
-	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 }}
-			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] ?? "")}
-				>
-					{column.renderCell ? column.renderCell(item[column.field], item) : String(item[column.field] ?? "")}
-				</div>
-			))}
-		</div>
-	);
-}
-
-export function LookupGrid<T extends Record<string, unknown>>({
-	columns,
-	data,
-	height,
-	currentIndex,
-	currentColumn,
-	getItemId,
-	isItemSelected,
-	onSelectItem,
-}: LookupGridProps<T>) {
-	let listRef = useListRef(null);
-	let gridTemplateColumns = useMemo(() => columns.map(getColumnWidth).join(" "), [columns]);
-
-	useEffect(() => {
-		if (currentIndex >= 0 && currentIndex < data.length) {
-			listRef.current?.scrollToRow({ index: currentIndex, align: "smart" });
-		}
-	}, [currentIndex, data.length, listRef]);
-
-	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>
-			<List<LookupGridRowProps<T>>
-				role="rowgroup"
-				listRef={listRef}
-				style={{ height: Math.max(0, height - HEADER_HEIGHT) }}
-				rowCount={data.length}
-				rowHeight={ROW_HEIGHT}
-				overscanCount={5}
-				rowComponent={LookupGridRow}
-				rowProps={{
-					columns,
-					data,
-					currentIndex,
-					currentColumn,
-					gridTemplateColumns,
-					getItemId,
-					isItemSelected,
-					onSelectItem,
-				}}
-			/>
-		</div>
-	);
-}
+import "./LookupGrid.css";
+
+import type { LookupColumn } from "@olenbetong/appframe-react";
+
+import clsx from "clsx";
+import { useEffect, useMemo } from "react";
+import { List, type RowComponentProps, useListRef } from "react-window";
+import { getLocalizedString } from "../i18n.js";
+
+const ROW_HEIGHT = 40;
+const HEADER_HEIGHT = 40;
+
+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;
+}
+
+function getColumnWidth<T extends Record<string, unknown>>(column: LookupColumn<T>) {
+	if (typeof column.width === "number") {
+		return `${column.width}px`;
+	}
+
+	return column.width ?? "minmax(80px, 1fr)";
+}
+
+type LookupGridRowProps<T extends Record<string, unknown>> = Omit<LookupGridProps<T>, "height"> & {
+	gridTemplateColumns: string;
+};
+
+function LookupGridRow<T extends Record<string, unknown>>({
+	index,
+	style,
+	columns,
+	data,
+	currentIndex,
+	currentColumn,
+	gridTemplateColumns,
+	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 }}
+			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] ?? "")}
+				>
+					{column.renderCell ? column.renderCell(item[column.field], item) : String(item[column.field] ?? "")}
+				</div>
+			))}
+		</div>
+	);
+}
+
+export function LookupGrid<T extends Record<string, unknown>>({
+	columns,
+	data,
+	height,
+	currentIndex,
+	currentColumn,
+	getItemId,
+	isItemSelected,
+	onSelectItem,
+}: LookupGridProps<T>) {
+	let listRef = useListRef(null);
+	let gridTemplateColumns = useMemo(() => columns.map(getColumnWidth).join(" "), [columns]);
+
+	useEffect(() => {
+		if (currentIndex >= 0 && currentIndex < data.length) {
+			listRef.current?.scrollToRow({ index: currentIndex, align: "smart" });
+		}
+	}, [currentIndex, data.length, listRef]);
+
+	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>
+			<List<LookupGridRowProps<T>>
+				role="rowgroup"
+				listRef={listRef}
+				style={{ height: Math.max(0, height - HEADER_HEIGHT) }}
+				rowCount={data.length}
+				rowHeight={ROW_HEIGHT}
+				overscanCount={5}
+				rowComponent={LookupGridRow}
+				rowProps={{
+					columns,
+					data,
+					currentIndex,
+					currentColumn,
+					gridTemplateColumns,
+					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";