@olenbetong/appframe-ds 1.0.0 → 1.0.2

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @olenbetong/appframe-ds
 
+## 1.0.2
+
+### Patch Changes
+
+- e7e2be3: Migrate the lookup combobox and grid to react-window 2 (`List` with `rowComponent`/`rowProps`, dynamic row heights via `useDynamicRowHeight`), update @atlaskit/pragmatic-drag-and-drop to 3.x and its non-deprecated entry points, and drop the unused react-virtualized-auto-sizer and @types/react-window dependencies.
+- Updated dependencies [c48fb2f]
+  - @olenbetong/appframe-react@2.2.0
+
+## 1.0.1
+
+### Patch Changes
+
+- 61855a9: Fix the AfGrid sort-order and filter-count badge: it is now anchored to the header icon button instead of floating beside it (where the column header clipped it), and uses a compact 1rem size.
+- Updated dependencies [986cea3]
+- Updated dependencies [2787329]
+  - @olenbetong/appframe-data@1.7.1
+  - @olenbetong/appframe-react@2.1.4
+
 ## 1.0.0
 
 ### Major Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olenbetong/appframe-ds",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Components that bind Designsystemet components to Appframe data objects",
   "type": "module",
   "types": "./es/index.d.ts",
@@ -35,8 +35,6 @@
     "@mui/x-data-grid-premium": ">=8.0.0 <9.0.0",
     "@mui/x-license": ">=8.0.0 <9.0.0",
     "@navikt/aksel-icons": ">=8.16.1",
-    "react": ">=19.2.8",
-    "react-dom": ">=19.2.8",
     "react-error-boundary": ">=6.1.2",
     "react-router": ">=8.3.0"
   },
@@ -58,38 +56,36 @@
     }
   },
   "dependencies": {
-    "@atlaskit/pragmatic-drag-and-drop": "2.0.2",
+    "@atlaskit/pragmatic-drag-and-drop": "3.1.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "2.2.0",
-    "@base-ui/react": "1.7.0",
+    "@base-ui/react": "1.8.0",
     "clsx": "^2.1.1",
-    "dockview-react": "8.2.0",
+    "dockview-react": "8.3.1",
     "localforage": "^1.10.0",
     "mitt": "^3.0.1",
-    "react-virtualized-auto-sizer": "^1.0.26",
-    "react-window": "^1.8.11",
+    "react": "19.3.0",
+    "react-dom": "19.3.0",
+    "react-window": "2.3.1",
     "@olenbetong/appframe-core": "2.13.1",
-    "@olenbetong/appframe-data": "1.7.0",
-    "@olenbetong/appframe-react": "2.1.3"
+    "@olenbetong/appframe-data": "1.7.1",
+    "@olenbetong/appframe-react": "2.2.0"
   },
   "devDependencies": {
-    "@digdir/designsystemet-react": "1.21.0",
+    "@digdir/designsystemet-react": "1.21.1",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
     "@mui/material": "9.4.0",
     "@mui/x-data-grid-premium": "8.29.3",
     "@mui/x-license": "8.29.3",
-    "@navikt/aksel-icons": "8.16.1",
+    "@navikt/aksel-icons": "8.16.2",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "16.3.3",
-    "@testing-library/user-event": "^14.6.6",
-    "@types/react": "19.2.18",
-    "@types/react-dom": "19.2.5",
-    "@types/react-window": "^1.8.8",
-    "happy-dom": "^20.12.0",
-    "react": "19.2.8",
-    "react-dom": "19.2.8",
-    "react-error-boundary": "6.1.4",
+    "@testing-library/user-event": "^14.6.7",
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
+    "happy-dom": "20.14.5",
+    "react-error-boundary": "6.1.5",
     "react-router": "8.3.1",
     "typescript": "7.0.2"
   },

package/src/AfLookup/LookupCombobox.tsx

@@ -6,8 +6,8 @@ import type { DataObject } from "@olenbetong/appframe-data";
 import { type LookupColumn, useComboboxData } from "@olenbetong/appframe-react";
 
 import clsx from "clsx";
-import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
-import { VariableSizeList as VirtualList } from "react-window";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { List, type RowComponentProps, useDynamicRowHeight, useListRef } from "react-window";
 
 import { LookupGrid } from "./LookupGrid.js";
 
@@ -43,6 +43,46 @@ 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 ? "0 8px" : "8px",
+			}}
+			id={itemId}
+		/>
+	);
+}
+
 export function LookupCombobox<T extends Record<string, unknown>>(props: LookupComboboxProps<T>) {
 	let {
 		nullable,
@@ -55,7 +95,7 @@ export function LookupCombobox<T extends Record<string, unknown>>(props: LookupC
 	} = props;
 	let isGrid = props.variant === "grid";
 	let columns = isGrid ? (props as LookupComboboxGridProps<T>).columns : undefined;
-	let listRef = useRef<VirtualList>(null);
+	let listRef = useListRef(null);
 
 	let [isDesktop, setIsDesktop] = useState(
 		() => typeof window !== "undefined" && window.matchMedia("(width >= 768px) and (pointer: fine)").matches,
@@ -102,47 +142,15 @@ export function LookupCombobox<T extends Record<string, unknown>>(props: LookupC
 		return () => resizeObserver.disconnect();
 	}, []);
 
-	let sizeMap = useRef(new Map<number, number>());
-	let getItemSize = (index: number) => sizeMap.current.get(index) ?? 56;
-	let setSize = useCallback((index: number, size: number) => {
-		if (sizeMap.current.get(index) !== size) {
-			sizeMap.current.set(index, size);
-			// listRef will not be set on the initial render, so delay resetting
-			setTimeout(() => listRef.current?.resetAfterIndex(index, true));
-		}
-	}, []);
-
-	let Row = ({ index, style: { height, ...style } }: { index: number; style: React.CSSProperties }) => {
-		let rowRef = useRef<HTMLLIElement>(null);
-
-		useLayoutEffect(() => {
-			if (!rowRef.current) return;
-			setSize(index, rowRef.current.offsetHeight);
-		}, [index]);
-
-		let item = data[index];
-		let itemId = getItemId(item);
-		let active = index === currentIndex;
-		let ItemComponent = (props as LookupComboboxListProps<T>).renderItem;
-
-		return (
-			<ItemComponent
-				className={clsx("ObCombobox-listItem", active && "active", isItemSelected?.(item) && "selected")}
-				aria-selected={active}
-				onClick={() => handleSelectItem(item)}
-				item={item}
-				style={{
-					...style,
-					padding: isDesktop ? "0 8px" : "8px",
-				}}
-				ref={rowRef}
-				key={itemId}
-				id={itemId}
-			/>
-		);
-	};
+	// 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(() => listRef.current?.scrollToItem(currentIndex, "smart"), [currentIndex]);
+	useEffect(() => {
+		if (currentIndex >= 0 && currentIndex < data.length) {
+			listRef.current?.scrollToRow({ index: currentIndex, align: "smart" });
+		}
+	}, [currentIndex, data.length, listRef]);
 
 	useEffect(() => {
 		if (initialSearchValue !== undefined) {
@@ -203,16 +211,24 @@ export function LookupCombobox<T extends Record<string, unknown>>(props: LookupC
 						/>
 					) : (
 						<div className="ObCombobox-list" role="listbox">
-							<VirtualList
-								ref={listRef}
-								height={height}
-								width="100%"
-								itemCount={data.length}
-								itemSize={getItemSize}
+							<List<LookupComboboxRowProps<T>>
+								role="presentation"
+								listRef={listRef}
+								style={{ height }}
+								rowCount={data.length}
+								rowHeight={rowHeight}
 								overscanCount={5}
-							>
-								{Row}
-							</VirtualList>
+								rowComponent={LookupComboboxRow}
+								rowProps={{
+									data,
+									currentIndex,
+									isDesktop,
+									getItemId,
+									isItemSelected,
+									onSelectItem: handleSelectItem,
+									renderItem: (props as LookupComboboxListProps<T>).renderItem,
+								}}
+							/>
 						</div>
 					))}
 			</div>

package/src/AfLookup/LookupGrid.tsx

@@ -4,8 +4,8 @@ import { getLocalizedString } from "@olenbetong/appframe-core";
 import type { LookupColumn } from "@olenbetong/appframe-react";
 
 import clsx from "clsx";
-import { useEffect, useMemo, useRef } from "react";
-import { FixedSizeList as VirtualList } from "react-window";
+import { useEffect, useMemo } from "react";
+import { List, type RowComponentProps, useListRef } from "react-window";
 
 const ROW_HEIGHT = 40;
 const HEADER_HEIGHT = 40;
@@ -29,6 +29,49 @@ function getColumnWidth<T extends Record<string, unknown>>(column: LookupColumn<
 	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,
@@ -39,40 +82,14 @@ export function LookupGrid<T extends Record<string, unknown>>({
 	isItemSelected,
 	onSelectItem,
 }: LookupGridProps<T>) {
-	let listRef = useRef<VirtualList>(null);
+	let listRef = useListRef(null);
 	let gridTemplateColumns = useMemo(() => columns.map(getColumnWidth).join(" "), [columns]);
 
-	useEffect(() => listRef.current?.scrollToItem(currentIndex, "smart"), [currentIndex]);
-
-	// oxlint-disable-next-line react/no-nested-component-definitions -- react-window row renderer
-	let Row = ({ index, style }: { index: number; style: React.CSSProperties }) => {
-		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)}
-				key={itemId}
-				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>
-		);
-	};
+	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">
@@ -83,16 +100,25 @@ export function LookupGrid<T extends Record<string, unknown>>({
 					</div>
 				))}
 			</div>
-			<VirtualList
-				ref={listRef}
-				height={Math.max(0, height - HEADER_HEIGHT)}
-				width="100%"
-				itemCount={data.length}
-				itemSize={ROW_HEIGHT}
+			<List<LookupGridRowProps<T>>
+				role="rowgroup"
+				listRef={listRef}
+				style={{ height: Math.max(0, height - HEADER_HEIGHT) }}
+				rowCount={data.length}
+				rowHeight={ROW_HEIGHT}
 				overscanCount={5}
-			>
-				{Row}
-			</VirtualList>
+				rowComponent={LookupGridRow}
+				rowProps={{
+					columns,
+					data,
+					currentIndex,
+					currentColumn,
+					gridTemplateColumns,
+					getItemId,
+					isItemSelected,
+					onSelectItem,
+				}}
+			/>
 		</div>
 	);
 }

package/src/grid/slots/index.tsx

@@ -237,18 +237,25 @@ function BaseBadge(props: GridSlotProps["baseBadge"]) {
 	let { badgeContent, children, invisible, color, variant, overlap, className, ...other } = props;
 	let count = typeof badgeContent === "number" ? badgeContent : Number(badgeContent);
 
+	// The badge must wrap the element it decorates so Designsystemet anchors it to
+	// that element's corner. Rendering it as a sibling put the badge on an empty
+	// box next to the icon, where it was clipped by the column header.
 	return (
-		<span {...(other as any)} className={clsx("AfGrid-badgeWrapper", className)}>
+		<Badge.Position
+			{...(other as any)}
+			className={clsx("AfGrid-badge", className)}
+			placement="top-right"
+			overlap={overlap === "circular" ? "circle" : "rectangle"}
+		>
 			{children}
 			{!invisible && (
-				<Badge.Position placement="top-right" overlap={overlap === "circular" ? "circle" : "rectangle"}>
-					<Badge
-						count={variant === "dot" || Number.isNaN(count) ? undefined : count}
-						data-color={color === "error" ? "danger" : color === "primary" ? "accent" : "neutral"}
-					/>
-				</Badge.Position>
+				<Badge
+					aria-hidden
+					count={variant === "dot" || Number.isNaN(count) ? undefined : count}
+					data-color={color === "error" ? "danger" : color === "primary" ? "accent" : "neutral"}
+				/>
 			)}
-		</span>
+		</Badge.Position>
 	);
 }
 

package/src/grid/slots/slots.css

@@ -12,9 +12,20 @@
 	width: 100%;
 }
 
-.AfGrid-badgeWrapper {
-	position: relative;
-	display: inline-flex;
+/* Sort-order and filter-count badges on header icon buttons: a compact number
+   pinned to the button corner instead of Designsystemet's default 1.5rem badge. */
+.AfGrid-badge .ds-badge {
+	--dsc-badge-size--count: var(--ds-size-4, 1rem);
+	--dsc-badge-padding: 0 var(--ds-size-1, 0.25rem);
+
+	/* Pull the badge down from the default 14% so its top edge stays inside the
+	   header row instead of being cropped. */
+	--dsc-badge-top: 32%;
+}
+
+.AfGrid-badge .ds-badge::before {
+	font-size: var(--ds-font-size-1, 0.75rem);
+	line-height: 1;
 }
 
 .AfGrid-linearProgress {

package/src/sortable/useSortableContainer.ts

@@ -1,4 +1,4 @@
-import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/adapter/element-adapter";
 import { type Edge, extractClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
 import { useEffect, useRef } from "react";
 

package/src/sortable/useSortableItem.ts

@@ -1,5 +1,5 @@
-import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
-import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/utils/combine";
+import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/adapter/element-adapter";
 import {
 	attachClosestEdge,
 	type Edge,