@olenbetong/appframe-ds 1.8.0 → 1.9.0

package/src/sortable/useSortableItem.ts

@@ -1,95 +1,95 @@
-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,
-	extractClosestEdge,
-} from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
-import { type RefObject, useEffect, useState } from "react";
-
-import { isSortableDragData, type SortableDragData } from "./useSortableContainer.js";
-import type { SortableRecord } from "./types.js";
-
-export type SortableItemState =
-	| { type: "idle" }
-	| { type: "is-dragging" }
-	| { type: "is-dragging-over"; edge: Edge | null };
-
-export interface UseSortableItemOptions<T extends SortableRecord> {
-	/** Identifies the list. Must match the type given to the container/list */
-	type: string;
-	record: T;
-	/** Element that acts as the drop target, usually the list item */
-	itemRef: RefObject<HTMLElement | null>;
-	/** Element that starts the drag, usually a drag handle button */
-	handleRef: RefObject<HTMLElement | null>;
-	enabled?: boolean;
-}
-
-/**
- * Makes a single list item draggable and turns it into a drop target that
- * reports which edge is closest to the pointer, so a drop indicator can be
- * rendered.
- */
-export function useSortableItem<T extends SortableRecord>({
-	type,
-	record,
-	itemRef,
-	handleRef,
-	enabled = true,
-}: UseSortableItemOptions<T>): SortableItemState {
-	let [state, setState] = useState<SortableItemState>({ type: "idle" });
-
-	useEffect(() => {
-		if (!enabled) return;
-		let item = itemRef.current;
-		let handle = handleRef.current;
-		if (!item || !handle) return;
-
-		return combine(
-			draggable({
-				element: handle,
-				getInitialData: () => ({ type, record }) satisfies SortableDragData<T>,
-				onDragStart: () => setState({ type: "is-dragging" }),
-				onDrop: () => setState({ type: "idle" }),
-			}),
-			dropTargetForElements({
-				element: item,
-				canDrop({ source }) {
-					if (!isSortableDragData<T>(source.data, type)) return false;
-					return source.data.record.PrimKey !== record.PrimKey;
-				},
-				getData({ input }) {
-					let data: SortableDragData<T> = { type, record };
-					return attachClosestEdge(data, {
-						element: item,
-						input,
-						allowedEdges: ["top", "bottom"],
-					});
-				},
-				getIsSticky: () => true,
-				onDragEnter({ self }) {
-					let edge = extractClosestEdge(self.data);
-					setState({ type: "is-dragging-over", edge });
-				},
-				onDrag({ self }) {
-					let edge = extractClosestEdge(self.data);
-					setState((current) => {
-						if (current.type === "is-dragging-over" && current.edge === edge) {
-							return current;
-						}
-						return { type: "is-dragging-over", edge };
-					});
-				},
-				onDragLeave() {
-					setState({ type: "idle" });
-				},
-				onDrop() {
-					setState({ type: "idle" });
-				},
-			}),
-		);
-	}, [enabled, record, type, itemRef, handleRef]);
-
-	return state;
-}
+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,
+	extractClosestEdge,
+} from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
+import { type RefObject, useEffect, useState } from "react";
+
+import { isSortableDragData, type SortableDragData } from "./useSortableContainer.js";
+import type { SortableRecord } from "./types.js";
+
+export type SortableItemState =
+	| { type: "idle" }
+	| { type: "is-dragging" }
+	| { type: "is-dragging-over"; edge: Edge | null };
+
+export interface UseSortableItemOptions<T extends SortableRecord> {
+	/** Identifies the list. Must match the type given to the container/list */
+	type: string;
+	record: T;
+	/** Element that acts as the drop target, usually the list item */
+	itemRef: RefObject<HTMLElement | null>;
+	/** Element that starts the drag, usually a drag handle button */
+	handleRef: RefObject<HTMLElement | null>;
+	enabled?: boolean;
+}
+
+/**
+ * Makes a single list item draggable and turns it into a drop target that
+ * reports which edge is closest to the pointer, so a drop indicator can be
+ * rendered.
+ */
+export function useSortableItem<T extends SortableRecord>({
+	type,
+	record,
+	itemRef,
+	handleRef,
+	enabled = true,
+}: UseSortableItemOptions<T>): SortableItemState {
+	let [state, setState] = useState<SortableItemState>({ type: "idle" });
+
+	useEffect(() => {
+		if (!enabled) return;
+		let item = itemRef.current;
+		let handle = handleRef.current;
+		if (!item || !handle) return;
+
+		return combine(
+			draggable({
+				element: handle,
+				getInitialData: () => ({ type, record }) satisfies SortableDragData<T>,
+				onDragStart: () => setState({ type: "is-dragging" }),
+				onDrop: () => setState({ type: "idle" }),
+			}),
+			dropTargetForElements({
+				element: item,
+				canDrop({ source }) {
+					if (!isSortableDragData<T>(source.data, type)) return false;
+					return source.data.record.PrimKey !== record.PrimKey;
+				},
+				getData({ input }) {
+					let data: SortableDragData<T> = { type, record };
+					return attachClosestEdge(data, {
+						element: item,
+						input,
+						allowedEdges: ["top", "bottom"],
+					});
+				},
+				getIsSticky: () => true,
+				onDragEnter({ self }) {
+					let edge = extractClosestEdge(self.data);
+					setState({ type: "is-dragging-over", edge });
+				},
+				onDrag({ self }) {
+					let edge = extractClosestEdge(self.data);
+					setState((current) => {
+						if (current.type === "is-dragging-over" && current.edge === edge) {
+							return current;
+						}
+						return { type: "is-dragging-over", edge };
+					});
+				},
+				onDragLeave() {
+					setState({ type: "idle" });
+				},
+				onDrop() {
+					setState({ type: "idle" });
+				},
+			}),
+		);
+	}, [enabled, record, type, itemRef, handleRef]);
+
+	return state;
+}

package/src/sortable/useSortableList.ts

@@ -1,117 +1,117 @@
-import type { Edge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
-import type { DataObject } from "@olenbetong/appframe-data";
-import { useData } from "@olenbetong/appframe-react";
-import { useCallback, useMemo } from "react";
-
-import { reorderSortOrder } from "./reorderSortOrder.js";
-import { DEFAULT_SORT_ORDER_SPACING } from "./sortOrder.js";
-import type { SortableRecord } from "./types.js";
-import { useSortableContainer } from "./useSortableContainer.js";
-
-export interface SortableListOptions<T extends SortableRecord> {
-	/** Data object holding the records to display */
-	dataObject: DataObject<T>;
-	/**
-	 * Data object used to persist the new sort order, when the list is bound to
-	 * a read-only view. Defaults to `dataObject`.
-	 */
-	updateDataObject?: DataObject<any>;
-	/**
-	 * Identifies the list. Only items sharing the same type can be dropped on
-	 * each other. Defaults to the data object id.
-	 */
-	type?: string;
-	/** Limits the list to a subset of the records, e.g. rows for the current master record */
-	filter?: (record: T) => boolean;
-	/** Disables dragging, e.g. while the list is read only */
-	enabled?: boolean;
-	/** Spacing used when appending to the end of the list */
-	spacing?: number;
-	/**
-	 * Called when the list runs out of free sort order values (two records share
-	 * the same sort order). Typically executes a stored procedure that renumbers
-	 * the list with even spacing.
-	 */
-	onNormalize?: () => Promise<void>;
-	onError?: (error: unknown) => void;
-}
-
-export interface SortableList<T extends SortableRecord> {
-	/** Records passing `filter`, sorted by `SortOrder` */
-	records: T[];
-	/** Identifies the list. Pass to `useSortableItem` when rendering items manually */
-	type: string;
-	enabled: boolean;
-	/**
-	 * Moves a record relative to another record. `edge` decides whether it is
-	 * placed before (`null`/`"top"`) or after (`"bottom"`) the target.
-	 */
-	moveItem: (sourcePrimKey: string, targetPrimKey: string, edge: Edge | null) => Promise<void>;
-}
-
-/**
- * Keeps a data object sorted by its `SortOrder` column and handles drops from
- * the sortable items rendered inside it.
- *
- * Use {@link SortableItemList} for the common list layout, or this hook
- * directly together with {@link useSortableItem} and {@link DropIndicator}
- * when the items need custom markup.
- */
-export function useSortableList<T extends SortableRecord>({
-	dataObject,
-	updateDataObject,
-	type,
-	filter,
-	enabled = true,
-	spacing = DEFAULT_SORT_ORDER_SPACING,
-	onNormalize,
-	onError,
-}: SortableListOptions<T>): SortableList<T> {
-	let data = useData(dataObject);
-	let listType = type ?? dataObject.getDataSourceId();
-	let dataObjectForUpdate = updateDataObject ?? dataObject;
-	let records = useMemo(() => {
-		let filtered = filter ? data.filter(filter) : data;
-		return [...filtered].sort((a, b) => (a.SortOrder ?? spacing) - (b.SortOrder ?? spacing));
-	}, [data, filter, spacing]);
-
-	let moveItem = useCallback(
-		async (sourcePrimKey: string, targetPrimKey: string, edge: Edge | null) => {
-			try {
-				await reorderSortOrder({
-					records,
-					sourcePrimKey,
-					targetPrimKey,
-					edge,
-					spacing,
-					onNormalize,
-					refreshRecords: async () => {
-						await dataObject.refreshDataSource();
-						let refreshed = dataObject.getData();
-						let filtered = filter ? refreshed.filter(filter) : refreshed;
-						return [...filtered].sort((a, b) => (a.SortOrder ?? spacing) - (b.SortOrder ?? spacing));
-					},
-					listDataObject: dataObject,
-					updateDataObject: dataObjectForUpdate,
-				});
-			} catch (error) {
-				if (onError) {
-					onError(error);
-				} else {
-					throw error;
-				}
-			}
-		},
-		[records, spacing, onNormalize, dataObject, dataObjectForUpdate, filter, onError],
-	);
-
-	useSortableContainer<T>({
-		type: listType,
-		enabled,
-		onDrop: ({ source, target, edge }) => {
-			void moveItem(source.PrimKey, target.PrimKey, edge);
-		},
-	});
-
-	return { records, type: listType, enabled, moveItem };
-}
+import type { Edge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
+import type { DataObject } from "@olenbetong/appframe-data";
+import { useData } from "@olenbetong/appframe-react";
+import { useCallback, useMemo } from "react";
+
+import { reorderSortOrder } from "./reorderSortOrder.js";
+import { DEFAULT_SORT_ORDER_SPACING } from "./sortOrder.js";
+import type { SortableRecord } from "./types.js";
+import { useSortableContainer } from "./useSortableContainer.js";
+
+export interface SortableListOptions<T extends SortableRecord> {
+	/** Data object holding the records to display */
+	dataObject: DataObject<T>;
+	/**
+	 * Data object used to persist the new sort order, when the list is bound to
+	 * a read-only view. Defaults to `dataObject`.
+	 */
+	updateDataObject?: DataObject<any>;
+	/**
+	 * Identifies the list. Only items sharing the same type can be dropped on
+	 * each other. Defaults to the data object id.
+	 */
+	type?: string;
+	/** Limits the list to a subset of the records, e.g. rows for the current master record */
+	filter?: (record: T) => boolean;
+	/** Disables dragging, e.g. while the list is read only */
+	enabled?: boolean;
+	/** Spacing used when appending to the end of the list */
+	spacing?: number;
+	/**
+	 * Called when the list runs out of free sort order values (two records share
+	 * the same sort order). Typically executes a stored procedure that renumbers
+	 * the list with even spacing.
+	 */
+	onNormalize?: () => Promise<void>;
+	onError?: (error: unknown) => void;
+}
+
+export interface SortableList<T extends SortableRecord> {
+	/** Records passing `filter`, sorted by `SortOrder` */
+	records: T[];
+	/** Identifies the list. Pass to `useSortableItem` when rendering items manually */
+	type: string;
+	enabled: boolean;
+	/**
+	 * Moves a record relative to another record. `edge` decides whether it is
+	 * placed before (`null`/`"top"`) or after (`"bottom"`) the target.
+	 */
+	moveItem: (sourcePrimKey: string, targetPrimKey: string, edge: Edge | null) => Promise<void>;
+}
+
+/**
+ * Keeps a data object sorted by its `SortOrder` column and handles drops from
+ * the sortable items rendered inside it.
+ *
+ * Use {@link SortableItemList} for the common list layout, or this hook
+ * directly together with {@link useSortableItem} and {@link DropIndicator}
+ * when the items need custom markup.
+ */
+export function useSortableList<T extends SortableRecord>({
+	dataObject,
+	updateDataObject,
+	type,
+	filter,
+	enabled = true,
+	spacing = DEFAULT_SORT_ORDER_SPACING,
+	onNormalize,
+	onError,
+}: SortableListOptions<T>): SortableList<T> {
+	let data = useData(dataObject);
+	let listType = type ?? dataObject.getDataSourceId();
+	let dataObjectForUpdate = updateDataObject ?? dataObject;
+	let records = useMemo(() => {
+		let filtered = filter ? data.filter(filter) : data;
+		return [...filtered].sort((a, b) => (a.SortOrder ?? spacing) - (b.SortOrder ?? spacing));
+	}, [data, filter, spacing]);
+
+	let moveItem = useCallback(
+		async (sourcePrimKey: string, targetPrimKey: string, edge: Edge | null) => {
+			try {
+				await reorderSortOrder({
+					records,
+					sourcePrimKey,
+					targetPrimKey,
+					edge,
+					spacing,
+					onNormalize,
+					refreshRecords: async () => {
+						await dataObject.refreshDataSource();
+						let refreshed = dataObject.getData();
+						let filtered = filter ? refreshed.filter(filter) : refreshed;
+						return [...filtered].sort((a, b) => (a.SortOrder ?? spacing) - (b.SortOrder ?? spacing));
+					},
+					listDataObject: dataObject,
+					updateDataObject: dataObjectForUpdate,
+				});
+			} catch (error) {
+				if (onError) {
+					onError(error);
+				} else {
+					throw error;
+				}
+			}
+		},
+		[records, spacing, onNormalize, dataObject, dataObjectForUpdate, filter, onError],
+	);
+
+	useSortableContainer<T>({
+		type: listType,
+		enabled,
+		onDrop: ({ source, target, edge }) => {
+			void moveItem(source.PrimKey, target.PrimKey, edge);
+		},
+	});
+
+	return { records, type: listType, enabled, moveItem };
+}

package/src/test/happy-dom-document-class.ts

@@ -1,24 +1,24 @@
-/**
- * happy-dom exposes a `Document` constructor on the window that is *not* in the
- * prototype chain of the actual `document` (which is an `HTMLDocument` built on
- * happy-dom's internal `Document` class). `document instanceof Document` is
- * therefore `false`, which is enough to hang libraries that walk up the tree
- * until they reach the document — the `@oddbird/popover-polyfill` bundled into
- * `@digdir/designsystemet-web` loops forever in `nearestInclusiveOpenPopover`,
- * taking the whole worker with it.
- *
- * Point the global `Document` at the class the document really inherits from.
- * Must run before anything that captures `Document`.
- */
-export function fixHappyDomDocumentClass(): void {
-	if (typeof document === "undefined" || document instanceof Document) return;
-
-	for (let proto = Object.getPrototypeOf(document); proto; proto = Object.getPrototypeOf(proto)) {
-		let ctor = proto.constructor;
-		if (ctor?.name === "Document") {
-			globalThis.Document = ctor;
-			(globalThis as typeof globalThis & { window: typeof globalThis }).window.Document = ctor;
-			return;
-		}
-	}
-}
+/**
+ * happy-dom exposes a `Document` constructor on the window that is *not* in the
+ * prototype chain of the actual `document` (which is an `HTMLDocument` built on
+ * happy-dom's internal `Document` class). `document instanceof Document` is
+ * therefore `false`, which is enough to hang libraries that walk up the tree
+ * until they reach the document — the `@oddbird/popover-polyfill` bundled into
+ * `@digdir/designsystemet-web` loops forever in `nearestInclusiveOpenPopover`,
+ * taking the whole worker with it.
+ *
+ * Point the global `Document` at the class the document really inherits from.
+ * Must run before anything that captures `Document`.
+ */
+export function fixHappyDomDocumentClass(): void {
+	if (typeof document === "undefined" || document instanceof Document) return;
+
+	for (let proto = Object.getPrototypeOf(document); proto; proto = Object.getPrototypeOf(proto)) {
+		let ctor = proto.constructor;
+		if (ctor?.name === "Document") {
+			globalThis.Document = ctor;
+			(globalThis as typeof globalThis & { window: typeof globalThis }).window.Document = ctor;
+			return;
+		}
+	}
+}

package/src/test/setup.ts

@@ -1,27 +1,27 @@
-import { fixHappyDomDocumentClass } from "./happy-dom-document-class.js";
-
-fixHappyDomDocumentClass();
-
-import "@testing-library/jest-dom/vitest";
-
-import type { TestingLibraryMatchers } from "@testing-library/jest-dom/matchers";
-
-import { cleanup } from "@testing-library/react";
-import { afterEach } from "vitest";
-
-afterEach(() => {
-	cleanup();
-});
-
-/*
- * jest-dom 7.0.1 types its matchers onto the one-parameter `Assertion<T>` of Vitest 4, which
- * Vitest 5 replaced with `Assertion<R, T>`; custom matchers now go on `Matchers<R, T>`. Until
- * jest-dom ships Vitest 5 types, register them there. Remove this when its `vitest` entry
- * types `Matchers` itself.
- */
-declare module "vitest" {
-	interface Matchers<R extends void | Promise<void> = void | Promise<void>, T = unknown> extends TestingLibraryMatchers<
-		T,
-		R
-	> {}
-}
+import { fixHappyDomDocumentClass } from "./happy-dom-document-class.js";
+
+fixHappyDomDocumentClass();
+
+import "@testing-library/jest-dom/vitest";
+
+import type { TestingLibraryMatchers } from "@testing-library/jest-dom/matchers";
+
+import { cleanup } from "@testing-library/react";
+import { afterEach } from "vitest";
+
+afterEach(() => {
+	cleanup();
+});
+
+/*
+ * jest-dom 7.0.1 types its matchers onto the one-parameter `Assertion<T>` of Vitest 4, which
+ * Vitest 5 replaced with `Assertion<R, T>`; custom matchers now go on `Matchers<R, T>`. Until
+ * jest-dom ships Vitest 5 types, register them there. Remove this when its `vitest` entry
+ * types `Matchers` itself.
+ */
+declare module "vitest" {
+	interface Matchers<R extends void | Promise<void> = void | Promise<void>, T = unknown> extends TestingLibraryMatchers<
+		T,
+		R
+	> {}
+}

package/src/theme/sizeMode.ts

@@ -0,0 +1,62 @@
+import { type RefObject, useLayoutEffect, useState } from "react";
+
+/** Components whose `data-size` picks a variant of their own (text or avatar size), not the size mode. */
+const SIZE_VARIANTS = ".ds-heading, .ds-paragraph, .ds-spinner, .ds-avatar";
+
+/**
+ * The Designsystemet size mode an element is in: the `data-size` of its closest ancestor (or
+ * itself) that sets one, or null when nothing does and the page default applies.
+ */
+export function getSizeMode(element: Element | null | undefined) {
+	return element?.closest(`[data-size]:not(${SIZE_VARIANTS})`)?.getAttribute("data-size") ?? null;
+}
+
+/**
+ * Gives an element rendered outside its owner - a dialog or popover portaled to `<body>` - the
+ * size mode of the element it belongs to, which it would otherwise not inherit.
+ */
+export function copySizeMode(target: HTMLElement | null | undefined, owner: Element | null | undefined) {
+	if (!target) return;
+
+	let size = getSizeMode(owner);
+	if (size) {
+		target.dataset.size = size;
+	} else {
+		delete target.dataset.size;
+	}
+}
+
+/**
+ * The pixel value of `--ds-size-<step>` at an element's position. The token is a `calc()` that
+ * a custom property hands over unresolved, so it is measured on a hidden probe instead. 0 when
+ * the Designsystemet theme is not loaded.
+ */
+export function measureDsSize(element: Element, step: number) {
+	let probe = element.ownerDocument.createElement("div");
+	probe.style.cssText = `position: absolute; visibility: hidden; block-size: var(--ds-size-${step});`;
+	element.append(probe);
+	let height = probe.getBoundingClientRect().height;
+	probe.remove();
+
+	return height;
+}
+
+/**
+ * A height for something sized in script (a virtualized row, a grid row) that follows the size
+ * mode the element sits in: `--ds-size-<step>`, or `fallback` until it is measured and when the
+ * theme is not loaded. Measured once, after mount and before paint: the size mode of a page does
+ * not change while it is open.
+ */
+export function useDsSize(ref: RefObject<Element | null>, step: number, fallback: number) {
+	let [size, setSize] = useState(fallback);
+
+	useLayoutEffect(() => {
+		let element = ref.current;
+		if (!element) return;
+
+		let measured = Math.round(measureDsSize(element, step));
+		if (measured) setSize(measured);
+	}, [ref, step]);
+
+	return size;
+}