@olenbetong/appframe-ds 1.0.1 → 1.0.3

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @olenbetong/appframe-ds
 
+## 1.0.3
+
+### Patch Changes
+
+- d503ffe: Name the neutral and brand colour sets explicitly instead of the `[data-color]` scoped aliases (`--ds-color-text-default`, `--ds-color-surface-hover`, `--ds-color-base-default`, ...) in the autocomplete, lookup combobox, filter and progress styles. The aliases came from the 1.13 theme token build; the 1.21 build the site now uses replaces them with the `--ds-color-main-*` set, and Designsystemet's own CSS no longer relies on them.
+- Updated dependencies [f0403b7]
+  - @olenbetong/appframe-core@2.14.0
+  - @olenbetong/appframe-data@1.7.2
+  - @olenbetong/appframe-react@2.2.1
+
+## 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olenbetong/appframe-ds",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Components that bind Designsystemet components to Appframe data objects",
   "type": "module",
   "types": "./es/index.d.ts",
@@ -13,6 +13,10 @@
       "types": "./es/grid/index.d.ts",
       "import": "./es/grid/index.js"
     },
+    "./progress": {
+      "types": "./es/progress/index.d.ts",
+      "import": "./es/progress/index.js"
+    },
     "./mdi": {
       "types": "./es/mdi/index.d.ts",
       "import": "./es/mdi/index.js"
@@ -56,23 +60,22 @@
     }
   },
   "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.8.0",
     "clsx": "^2.1.1",
-    "dockview-react": "8.3.0",
+    "dockview-react": "8.3.1",
     "localforage": "^1.10.0",
     "mitt": "^3.0.1",
     "react": "19.3.0",
     "react-dom": "19.3.0",
-    "react-virtualized-auto-sizer": "^1.0.26",
-    "react-window": "^1.8.11",
-    "@olenbetong/appframe-data": "1.7.1",
-    "@olenbetong/appframe-core": "2.13.1",
-    "@olenbetong/appframe-react": "2.1.4"
+    "react-window": "2.3.1",
+    "@olenbetong/appframe-core": "2.14.0",
+    "@olenbetong/appframe-react": "2.2.1",
+    "@olenbetong/appframe-data": "1.7.2"
   },
   "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",
@@ -85,8 +88,7 @@
     "@testing-library/user-event": "^14.6.7",
     "@types/react": "19.3.0",
     "@types/react-dom": "19.3.0",
-    "@types/react-window": "^1.8.8",
-    "happy-dom": "^20.14.3",
+    "happy-dom": "20.14.5",
     "react-error-boundary": "6.1.5",
     "react-router": "8.3.1",
     "typescript": "7.0.2"

package/src/AfLookup/LookupCombobox.css

@@ -64,7 +64,7 @@
 	left: -100%;
 	height: 100%;
 	width: 50%;
-	background-color: var(--ds-color-base-default);
+	background-color: var(--ds-color-brand-base-default);
 	animation: ObCombobox-progress-anim 1.5s ease-in-out infinite;
 }
 

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/autocomplete/Autocomplete.css

@@ -199,23 +199,23 @@
 }
 
 /*
- * The `accent` colour set does not exist in every Designsystemet theme, so the
- * option states use the contextual `--ds-color-*` aliases — the same tokens
- * Designsystemet's own Suggestion list uses.
+ * The `accent` colour set does not exist in every Designsystemet theme, and the
+ * contextual `--ds-color-*` aliases of the 1.13 token build are gone since 1.21,
+ * so the option states use the neutral set explicitly.
  */
 .ObAutocomplete-item[data-highlighted] {
-	color: var(--ds-color-text-default);
-	background-color: var(--ds-color-surface-hover);
+	color: var(--ds-color-neutral-text-default);
+	background-color: var(--ds-color-neutral-surface-hover);
 }
 
 .ObAutocomplete-item[data-selected] {
 	font-weight: var(--ds-font-weight-medium);
-	color: var(--ds-color-text-default);
-	background-color: var(--ds-color-surface-tinted);
+	color: var(--ds-color-neutral-text-default);
+	background-color: var(--ds-color-neutral-surface-tinted);
 }
 
 .ObAutocomplete-item[data-selected][data-highlighted] {
-	background-color: var(--ds-color-surface-active);
+	background-color: var(--ds-color-neutral-surface-active);
 }
 
 .ObAutocomplete-item[data-disabled] {

package/src/filter/FilterBuilder.css

@@ -25,7 +25,7 @@
 	grid-area: sidebar;
 	overflow: auto;
 	padding: var(--ds-size-2);
-	border: var(--ds-border-width-default) solid var(--ds-color-border-subtle);
+	border: var(--ds-border-width-default) solid var(--ds-color-neutral-border-subtle);
 	border-radius: var(--ds-border-radius-md);
 }
 

package/src/filter/FilterEditor.css

@@ -199,8 +199,8 @@
 	}
 
 	&[aria-pressed="true"] {
-		background-color: var(--ds-color-surface-active);
-		color: var(--ds-color-text-default);
+		background-color: var(--ds-color-neutral-surface-active);
+		color: var(--ds-color-neutral-text-default);
 	}
 
 	svg {

package/src/filter/FilterShareDialog.css

@@ -15,7 +15,7 @@
 
 .ObFilterShareDialog-candidateLogin {
 	margin-inline-start: auto;
-	color: var(--ds-color-text-subtle);
+	color: var(--ds-color-neutral-text-subtle);
 }
 
 .ObFilterShareDialog-table {

package/src/filter/SavedFilterTree.css

@@ -37,14 +37,14 @@
 	border: none;
 	border-radius: var(--ds-border-radius-sm);
 	background: none;
-	color: var(--ds-color-text-default);
+	color: var(--ds-color-neutral-text-default);
 	font: inherit;
 	text-align: start;
 	cursor: pointer;
 }
 
 .ObSavedFilterTree-node:hover {
-	background: var(--ds-color-surface-hover);
+	background: var(--ds-color-neutral-surface-hover);
 }
 
 .ObSavedFilterTree-node:focus-visible {
@@ -53,7 +53,7 @@
 }
 
 .ObSavedFilterTree-selected {
-	background: var(--ds-color-surface-active);
+	background: var(--ds-color-neutral-surface-active);
 }
 
 .ObSavedFilterTree-dirty .ObSavedFilterTree-label {
@@ -68,7 +68,7 @@
 	justify-content: center;
 	inline-size: var(--ds-size-6);
 	block-size: var(--ds-size-6);
-	color: var(--ds-color-text-subtle);
+	color: var(--ds-color-neutral-text-subtle);
 }
 
 .ObSavedFilterTree-chevron > *,
@@ -87,7 +87,7 @@
 	/* Lines up with the child labels, past their icon. */
 	padding: var(--ds-size-1) var(--ds-size-2) var(--ds-size-1)
 		calc(var(--ds-size-2) + var(--ds-size-6) + var(--ds-size-1));
-	color: var(--ds-color-text-subtle);
+	color: var(--ds-color-neutral-text-subtle);
 	font-style: italic;
 }
 

package/src/progress/LinearProgress.css

@@ -8,7 +8,7 @@
 	inline-size: 100%;
 	block-size: var(--obLinearProgress-thickness);
 	overflow: hidden;
-	background-color: var(--ds-color-surface-active, #cddffb);
+	background-color: var(--ds-color-brand-surface-active, #cddffb);
 	border-radius: var(--ds-border-radius-full, 624.9375rem);
 }
 
@@ -33,7 +33,7 @@
 	inset-block: 0;
 	inset-inline-start: 0;
 	inline-size: 100%;
-	background-color: var(--ds-color-base-default, #0062ba);
+	background-color: var(--ds-color-brand-base-default, #0062ba);
 	border-radius: inherit;
 }
 

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,