@olenbetong/appframe-ds 1.0.3 → 1.2.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,12 +1,12 @@
-import { fixHappyDomDocumentClass } from "./happy-dom-document-class.js";
-
-fixHappyDomDocumentClass();
-
-import "@testing-library/jest-dom/vitest";
-
-import { cleanup } from "@testing-library/react";
-import { afterEach } from "vitest";
-
-afterEach(() => {
-	cleanup();
-});
+import { fixHappyDomDocumentClass } from "./happy-dom-document-class.js";
+
+fixHappyDomDocumentClass();
+
+import "@testing-library/jest-dom/vitest";
+
+import { cleanup } from "@testing-library/react";
+import { afterEach } from "vitest";
+
+afterEach(() => {
+	cleanup();
+});

package/src/theme/useDsColorScheme.ts

@@ -1,53 +1,53 @@
-import { useEffect, useState } from "react";
-
-export function getDsColorScheme(element?: Element | null): "light" | "dark" {
-	let scoped = element?.closest<HTMLElement>("[data-color-scheme]");
-	let scheme =
-		scoped?.dataset.colorScheme ??
-		document.body?.dataset.colorScheme ??
-		document.documentElement?.dataset.colorScheme ??
-		"light";
-
-	if (scheme === "auto") {
-		return globalThis.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-	}
-
-	return scheme === "dark" ? "dark" : "light";
-}
-
-/**
- * Tracks the color scheme Designsystemet is rendering with. The article template
- * sets `data-color-scheme` on `<body>`, but it may also be scoped to a subtree,
- * so resolve it from `element` upwards when one is given. The OS preference is
- * watched too, since it decides the result when the scheme is `auto`.
- */
-export function useDsColorScheme(element?: Element | null) {
-	let [scheme, setScheme] = useState<"light" | "dark">(() => getDsColorScheme(element));
-
-	useEffect(() => {
-		function update() {
-			setScheme(getDsColorScheme(element));
-		}
-
-		update();
-
-		// `data-color-scheme` may sit on any ancestor, so watch the whole document
-		// for that one attribute rather than just `<html>` and `<body>`.
-		let observer = new MutationObserver(update);
-		observer.observe(document.documentElement, {
-			attributes: true,
-			attributeFilter: ["data-color-scheme"],
-			subtree: true,
-		});
-
-		let media = globalThis.matchMedia?.("(prefers-color-scheme: dark)");
-		media?.addEventListener("change", update);
-
-		return () => {
-			observer.disconnect();
-			media?.removeEventListener("change", update);
-		};
-	}, [element]);
-
-	return scheme;
-}
+import { useEffect, useState } from "react";
+
+export function getDsColorScheme(element?: Element | null): "light" | "dark" {
+	let scoped = element?.closest<HTMLElement>("[data-color-scheme]");
+	let scheme =
+		scoped?.dataset.colorScheme ??
+		document.body?.dataset.colorScheme ??
+		document.documentElement?.dataset.colorScheme ??
+		"light";
+
+	if (scheme === "auto") {
+		return globalThis.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+	}
+
+	return scheme === "dark" ? "dark" : "light";
+}
+
+/**
+ * Tracks the color scheme Designsystemet is rendering with. The article template
+ * sets `data-color-scheme` on `<body>`, but it may also be scoped to a subtree,
+ * so resolve it from `element` upwards when one is given. The OS preference is
+ * watched too, since it decides the result when the scheme is `auto`.
+ */
+export function useDsColorScheme(element?: Element | null) {
+	let [scheme, setScheme] = useState<"light" | "dark">(() => getDsColorScheme(element));
+
+	useEffect(() => {
+		function update() {
+			setScheme(getDsColorScheme(element));
+		}
+
+		update();
+
+		// `data-color-scheme` may sit on any ancestor, so watch the whole document
+		// for that one attribute rather than just `<html>` and `<body>`.
+		let observer = new MutationObserver(update);
+		observer.observe(document.documentElement, {
+			attributes: true,
+			attributeFilter: ["data-color-scheme"],
+			subtree: true,
+		});
+
+		let media = globalThis.matchMedia?.("(prefers-color-scheme: dark)");
+		media?.addEventListener("change", update);
+
+		return () => {
+			observer.disconnect();
+			media?.removeEventListener("change", update);
+		};
+	}, [element]);
+
+	return scheme;
+}

package/tsconfig.build.json

@@ -1,9 +1,9 @@
-{
-	"extends": "../tsconfig.build.base.json",
-	"compilerOptions": {
-		"rootDir": "./src",
-		"outDir": "./es"
-	},
-	"include": ["src"],
-	"exclude": ["es", "node_modules"]
-}
+{
+	"extends": "../tsconfig.build.base.json",
+	"compilerOptions": {
+		"rootDir": "./src",
+		"outDir": "./es"
+	},
+	"include": ["src"],
+	"exclude": ["es", "node_modules"]
+}

package/tsconfig.json

@@ -1,8 +1,8 @@
-{
-	"extends": "../tsconfig.build.base.json",
-	"compilerOptions": {
-		"rootDir": "./src",
-		"outDir": "./es"
-	},
-	"include": ["src"]
-}
+{
+	"extends": "../tsconfig.build.base.json",
+	"compilerOptions": {
+		"rootDir": "./src",
+		"outDir": "./es"
+	},
+	"include": ["src"]
+}

package/vitest.config.ts

@@ -1,10 +1,10 @@
-import { defineConfig } from "vitest/config";
-
-export default defineConfig({
-	test: {
-		include: ["src/**/*.test.tsx", "src/**/*.test.ts"],
-		environment: "happy-dom",
-		setupFiles: ["src/test/setup.ts"],
-		env: { NODE_ENV: "test" },
-	},
-});
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+	test: {
+		include: ["src/**/*.test.tsx", "src/**/*.test.ts"],
+		environment: "happy-dom",
+		setupFiles: ["src/test/setup.ts"],
+		env: { NODE_ENV: "test" },
+	},
+});