@olenbetong/appframe-ds 1.7.2 → 1.9.0

package/src/mdi/Mdi.tsx

@@ -1,141 +1,141 @@
-import "dockview-react/dist/styles/dockview.css";
-import "./Mdi.css";
-
-import clsx from "clsx";
-import { type DockviewReadyEvent, DockviewReact, type IWatermarkPanelProps } from "dockview-react";
-import { type CSSProperties, createContext, type ReactNode, use, useCallback, useEffect, useState } from "react";
-
-import { useDsColorScheme } from "../theme/useDsColorScheme.js";
-import { copyDocumentAttributes, createDockviewHost } from "./dockviewHost.js";
-import { MDI_COMPONENT } from "./layoutSpec.js";
-import { MdiConfirmCloseDialog } from "./MdiConfirmCloseDialog.js";
-import { useMdiController } from "./MdiContext.js";
-import { MdiPanel } from "./MdiPanel.js";
-import { MdiTab } from "./MdiTab.js";
-import { mdiThemeDark, mdiThemeLight } from "./theme.js";
-import type { MdiConfirmCloseResult, MdiDocumentInfo, MdiLayoutSpec } from "./types.js";
-
-export type MdiProps = {
-	/** Storage key within the article. Without it nothing is restored or saved. */
-	id?: string;
-	/** A persisted layout is only restored when this matches. Bump it when `defaultLayout` changes shape. Default `0`. */
-	layoutVersion?: string | number;
-	defaultLayout: MdiLayoutSpec;
-	/**
-	 * Save every layout change to IndexedDB. Default: `true` when `id` is set. With `false` the
-	 * layout is only written by `saveLayout()`, and a saved layout is still restored on load
-	 * (explicit save/load commands, as in the Windows DailyOrders app).
-	 */
-	persist?: boolean;
-	/** Same-origin blank page popout windows open into. Default `/popout`. */
-	popoutUrl?: string;
-	/**
-	 * Turn drag and drop off entirely. Use it for fixed layouts where every group is
-	 * `locked: "no-drop-target"`: otherwise a tab dragged to the outer edge of the dock
-	 * lands in a new group it can never leave again.
-	 */
-	disableDnd?: boolean;
-	/** Replaces the built-in Save / Discard / Cancel dialog */
-	confirmClose?: (document: MdiDocumentInfo) => Promise<MdiConfirmCloseResult>;
-	/** Shown in a group that has no documents */
-	watermark?: ReactNode;
-	className?: string;
-	style?: CSSProperties;
-};
-
-const WatermarkContext = createContext<ReactNode>(null);
-
-function MdiWatermark(_props: IWatermarkPanelProps) {
-	let content = use(WatermarkContext);
-	return <div className="ObMdi-watermark">{content}</div>;
-}
-
-// Module-level so dockview sees the same registry on every render.
-const COMPONENTS = { [MDI_COMPONENT]: MdiPanel };
-const TAB_COMPONENTS = { [MDI_COMPONENT]: MdiTab };
-type CloseRequest = { document: MdiDocumentInfo; resolve: (result: MdiConfirmCloseResult) => void };
-
-/**
- * The dock: tiled groups of tabbed documents that can be rearranged by drag and
- * drop or moved to a popout window. Fills its parent, so render it in a block
- * with a height, such as `<Page.Block grow overflow="hidden">`.
- */
-export function Mdi({
-	id,
-	layoutVersion = 0,
-	defaultLayout,
-	persist = id !== undefined,
-	popoutUrl = "/popout",
-	disableDnd = false,
-	confirmClose,
-	watermark = null,
-	className,
-	style,
-}: MdiProps) {
-	let controller = useMdiController();
-	let [anchor, setAnchor] = useState<HTMLDivElement | null>(null);
-	let colorScheme = useDsColorScheme(anchor);
-	let [closeRequest, setCloseRequest] = useState<CloseRequest | null>(null);
-
-	let defaultConfirmClose = useCallback(
-		(document: MdiDocumentInfo) =>
-			new Promise<MdiConfirmCloseResult>((resolve) => {
-				setCloseRequest({ document, resolve });
-			}),
-		[],
-	);
-
-	// The controller reads the options when it needs them, so they may change freely.
-	controller.setOptions({
-		id,
-		layoutVersion,
-		defaultLayout,
-		persist,
-		popoutUrl,
-		confirmClose: confirmClose ?? defaultConfirmClose,
-	});
-
-	let onReady = useCallback(
-		(event: DockviewReadyEvent) => {
-			let { api } = event;
-			controller.attach(createDockviewHost(api));
-
-			// dockview disposes these listeners together with the api.
-			api.onDidAddPopoutGroup((popout) => {
-				copyDocumentAttributes(document, popout.window.document);
-			});
-			api.onDidOpenPopoutWindowFail(() => {
-				console.warn("Mdi: the popout window was blocked by the browser.");
-			});
-
-			void controller.initialize();
-		},
-		[controller],
-	);
-
-	useEffect(() => () => controller.detach(), [controller]);
-
-	function handleCloseResult(result: MdiConfirmCloseResult) {
-		closeRequest?.resolve(result);
-		setCloseRequest(null);
-	}
-
-	return (
-		<WatermarkContext value={watermark}>
-			<div className={clsx("ObMdi-root", className)} style={style} ref={setAnchor}>
-				<DockviewReact
-					components={COMPONENTS}
-					tabComponents={TAB_COMPONENTS}
-					defaultTabComponent={MdiTab}
-					watermarkComponent={MdiWatermark}
-					theme={colorScheme === "dark" ? mdiThemeDark : mdiThemeLight}
-					popoutUrl={popoutUrl}
-					disableDnd={disableDnd}
-					disableFloatingGroups
-					onReady={onReady}
-				/>
-				<MdiConfirmCloseDialog document={closeRequest?.document ?? null} onResult={handleCloseResult} />
-			</div>
-		</WatermarkContext>
-	);
-}
+import "dockview-react/dist/styles/dockview.css";
+import "./Mdi.css";
+
+import clsx from "clsx";
+import { type DockviewReadyEvent, DockviewReact, type IWatermarkPanelProps } from "dockview-react";
+import { type CSSProperties, createContext, type ReactNode, use, useCallback, useEffect, useState } from "react";
+
+import { useDsColorScheme } from "../theme/useDsColorScheme.js";
+import { copyDocumentAttributes, createDockviewHost } from "./dockviewHost.js";
+import { MDI_COMPONENT } from "./layoutSpec.js";
+import { MdiConfirmCloseDialog } from "./MdiConfirmCloseDialog.js";
+import { useMdiController } from "./MdiContext.js";
+import { MdiPanel } from "./MdiPanel.js";
+import { MdiTab } from "./MdiTab.js";
+import { mdiThemeDark, mdiThemeLight } from "./theme.js";
+import type { MdiConfirmCloseResult, MdiDocumentInfo, MdiLayoutSpec } from "./types.js";
+
+export type MdiProps = {
+	/** Storage key within the article. Without it nothing is restored or saved. */
+	id?: string;
+	/** A persisted layout is only restored when this matches. Bump it when `defaultLayout` changes shape. Default `0`. */
+	layoutVersion?: string | number;
+	defaultLayout: MdiLayoutSpec;
+	/**
+	 * Save every layout change to IndexedDB. Default: `true` when `id` is set. With `false` the
+	 * layout is only written by `saveLayout()`, and a saved layout is still restored on load
+	 * (explicit save/load commands, as in the Windows DailyOrders app).
+	 */
+	persist?: boolean;
+	/** Same-origin blank page popout windows open into. Default `/popout`. */
+	popoutUrl?: string;
+	/**
+	 * Turn drag and drop off entirely. Use it for fixed layouts where every group is
+	 * `locked: "no-drop-target"`: otherwise a tab dragged to the outer edge of the dock
+	 * lands in a new group it can never leave again.
+	 */
+	disableDnd?: boolean;
+	/** Replaces the built-in Save / Discard / Cancel dialog */
+	confirmClose?: (document: MdiDocumentInfo) => Promise<MdiConfirmCloseResult>;
+	/** Shown in a group that has no documents */
+	watermark?: ReactNode;
+	className?: string;
+	style?: CSSProperties;
+};
+
+const WatermarkContext = createContext<ReactNode>(null);
+
+function MdiWatermark(_props: IWatermarkPanelProps) {
+	let content = use(WatermarkContext);
+	return <div className="ObMdi-watermark">{content}</div>;
+}
+
+// Module-level so dockview sees the same registry on every render.
+const COMPONENTS = { [MDI_COMPONENT]: MdiPanel };
+const TAB_COMPONENTS = { [MDI_COMPONENT]: MdiTab };
+type CloseRequest = { document: MdiDocumentInfo; resolve: (result: MdiConfirmCloseResult) => void };
+
+/**
+ * The dock: tiled groups of tabbed documents that can be rearranged by drag and
+ * drop or moved to a popout window. Fills its parent, so render it in a block
+ * with a height, such as `<Page.Block grow overflow="hidden">`.
+ */
+export function Mdi({
+	id,
+	layoutVersion = 0,
+	defaultLayout,
+	persist = id !== undefined,
+	popoutUrl = "/popout",
+	disableDnd = false,
+	confirmClose,
+	watermark = null,
+	className,
+	style,
+}: MdiProps) {
+	let controller = useMdiController();
+	let [anchor, setAnchor] = useState<HTMLDivElement | null>(null);
+	let colorScheme = useDsColorScheme(anchor);
+	let [closeRequest, setCloseRequest] = useState<CloseRequest | null>(null);
+
+	let defaultConfirmClose = useCallback(
+		(document: MdiDocumentInfo) =>
+			new Promise<MdiConfirmCloseResult>((resolve) => {
+				setCloseRequest({ document, resolve });
+			}),
+		[],
+	);
+
+	// The controller reads the options when it needs them, so they may change freely.
+	controller.setOptions({
+		id,
+		layoutVersion,
+		defaultLayout,
+		persist,
+		popoutUrl,
+		confirmClose: confirmClose ?? defaultConfirmClose,
+	});
+
+	let onReady = useCallback(
+		(event: DockviewReadyEvent) => {
+			let { api } = event;
+			controller.attach(createDockviewHost(api));
+
+			// dockview disposes these listeners together with the api.
+			api.onDidAddPopoutGroup((popout) => {
+				copyDocumentAttributes(document, popout.window.document);
+			});
+			api.onDidOpenPopoutWindowFail(() => {
+				console.warn("Mdi: the popout window was blocked by the browser.");
+			});
+
+			void controller.initialize();
+		},
+		[controller],
+	);
+
+	useEffect(() => () => controller.detach(), [controller]);
+
+	function handleCloseResult(result: MdiConfirmCloseResult) {
+		closeRequest?.resolve(result);
+		setCloseRequest(null);
+	}
+
+	return (
+		<WatermarkContext value={watermark}>
+			<div className={clsx("ObMdi-root", className)} style={style} ref={setAnchor}>
+				<DockviewReact
+					components={COMPONENTS}
+					tabComponents={TAB_COMPONENTS}
+					defaultTabComponent={MdiTab}
+					watermarkComponent={MdiWatermark}
+					theme={colorScheme === "dark" ? mdiThemeDark : mdiThemeLight}
+					popoutUrl={popoutUrl}
+					disableDnd={disableDnd}
+					disableFloatingGroups
+					onReady={onReady}
+				/>
+				<MdiConfirmCloseDialog document={closeRequest?.document ?? null} onResult={handleCloseResult} />
+			</div>
+		</WatermarkContext>
+	);
+}

package/src/mdi/MdiConfirmCloseDialog.tsx

@@ -1,47 +1,41 @@
-import { Button, Dialog, Heading, Paragraph } from "@digdir/designsystemet-react";
-
-import type { MdiConfirmCloseResult, MdiDocumentInfo } from "./types.js";
-import { getLocalizedString } from "../i18n.js";
-
-export type MdiConfirmCloseDialogProps = {
-	/** The document being closed, or `null` when the dialog is closed */
-	document: MdiDocumentInfo | null;
-	onResult: (result: MdiConfirmCloseResult) => void;
-};
-
-/** Save / Discard / Cancel prompt shown when a dirty document is closed. */
-export function MdiConfirmCloseDialog({ document, onResult }: MdiConfirmCloseDialogProps) {
-	let title = document?.title ?? document?.id ?? "";
-
-	return (
-		<Dialog
-			open={document !== null}
-			closedby="any"
-			data-size="sm"
-			className="ObMdi-confirmClose"
-			onClose={() => onResult("cancel")}
-		>
-			<Dialog.Block>
-				<Heading level={2} data-size="xs">
-					{getLocalizedString("Unsaved changes")}
-				</Heading>
-			</Dialog.Block>
-			<Dialog.Block>
-				<Paragraph>
-					{getLocalizedString("Do you want to save the changes to {0} before closing?").replace("{0}", title)}
-				</Paragraph>
-			</Dialog.Block>
-			<Dialog.Block className="ObMdi-confirmClose-actions">
-				<Button type="button" data-size="sm" onClick={() => onResult("save")}>
-					{getLocalizedString("Save")}
-				</Button>
-				<Button type="button" data-size="sm" variant="secondary" onClick={() => onResult("discard")}>
-					{getLocalizedString("Discard")}
-				</Button>
-				<Button type="button" data-size="sm" variant="tertiary" onClick={() => onResult("cancel")}>
-					{getLocalizedString("Cancel")}
-				</Button>
-			</Dialog.Block>
-		</Dialog>
-	);
-}
+import { Button, Dialog, Heading, Paragraph } from "@digdir/designsystemet-react";
+
+import type { MdiConfirmCloseResult, MdiDocumentInfo } from "./types.js";
+import { getLocalizedString } from "../i18n.js";
+
+export type MdiConfirmCloseDialogProps = {
+	/** The document being closed, or `null` when the dialog is closed */
+	document: MdiDocumentInfo | null;
+	onResult: (result: MdiConfirmCloseResult) => void;
+};
+
+/** Save / Discard / Cancel prompt shown when a dirty document is closed. */
+export function MdiConfirmCloseDialog({ document, onResult }: MdiConfirmCloseDialogProps) {
+	let title = document?.title ?? document?.id ?? "";
+
+	return (
+		<Dialog open={document !== null} closedby="any" className="ObMdi-confirmClose" onClose={() => onResult("cancel")}>
+			<Dialog.Block>
+				<Heading level={2} data-size="xs">
+					{getLocalizedString("Unsaved changes")}
+				</Heading>
+			</Dialog.Block>
+			<Dialog.Block>
+				<Paragraph>
+					{getLocalizedString("Do you want to save the changes to {0} before closing?").replace("{0}", title)}
+				</Paragraph>
+			</Dialog.Block>
+			<Dialog.Block className="ObMdi-confirmClose-actions">
+				<Button type="button" onClick={() => onResult("save")}>
+					{getLocalizedString("Save")}
+				</Button>
+				<Button type="button" variant="secondary" onClick={() => onResult("discard")}>
+					{getLocalizedString("Discard")}
+				</Button>
+				<Button type="button" variant="tertiary" onClick={() => onResult("cancel")}>
+					{getLocalizedString("Cancel")}
+				</Button>
+			</Dialog.Block>
+		</Dialog>
+	);
+}

package/src/mdi/MdiContext.tsx

@@ -1,59 +1,59 @@
-import { createContext, type ReactNode, use, useEffect, useMemo, useState, useSyncExternalStore } from "react";
-
-import { MdiController } from "./controller.js";
-import type { MdiApi, MdiDocumentInfo, MdiDocumentTypes } from "./types.js";
-
-const MdiControllerContext = createContext<MdiController | null>(null);
-
-export type MdiProviderProps = {
-	/** The document types this workspace can show, keyed by type name */
-	types: MdiDocumentTypes;
-	children: ReactNode;
-};
-
-/**
- * Owns the document controller. Anything inside it can call `useMdi()`, so
- * toolbars and menus outside the dock itself can open and close documents.
- */
-export function MdiProvider({ types, children }: MdiProviderProps) {
-	let [controller] = useState(() => new MdiController(types));
-
-	useEffect(() => {
-		controller.setTypes(types);
-	}, [controller, types]);
-
-	return <MdiControllerContext value={controller}>{children}</MdiControllerContext>;
-}
-
-export function useMdiController(): MdiController {
-	let controller = use(MdiControllerContext);
-
-	if (!controller) {
-		throw new Error("Mdi: this component must be rendered inside <MdiProvider>.");
-	}
-
-	return controller;
-}
-
-/** The imperative document API: open, activate, close, titles, layout commands. */
-export function useMdi(): MdiApi {
-	return useMdiController();
-}
-
-/** The active document, re-rendering when it changes. Drives shared panels such as a property grid. */
-export function useMdiActiveDocument(): MdiDocumentInfo | undefined {
-	let controller = useMdiController();
-	return useSyncExternalStore(controller.subscribeStore, controller.getActive, controller.getActive);
-}
-
-/** The open documents, optionally of one type. For "Windows" menus and the like. */
-export function useMdiDocuments(type?: string): MdiDocumentInfo[] {
-	let controller = useMdiController();
-	let all = useSyncExternalStore(
-		controller.subscribeStore,
-		controller.getDocumentsSnapshot,
-		controller.getDocumentsSnapshot,
-	);
-
-	return useMemo(() => (type === undefined ? all : all.filter((document) => document.type === type)), [all, type]);
-}
+import { createContext, type ReactNode, use, useEffect, useMemo, useState, useSyncExternalStore } from "react";
+
+import { MdiController } from "./controller.js";
+import type { MdiApi, MdiDocumentInfo, MdiDocumentTypes } from "./types.js";
+
+const MdiControllerContext = createContext<MdiController | null>(null);
+
+export type MdiProviderProps = {
+	/** The document types this workspace can show, keyed by type name */
+	types: MdiDocumentTypes;
+	children: ReactNode;
+};
+
+/**
+ * Owns the document controller. Anything inside it can call `useMdi()`, so
+ * toolbars and menus outside the dock itself can open and close documents.
+ */
+export function MdiProvider({ types, children }: MdiProviderProps) {
+	let [controller] = useState(() => new MdiController(types));
+
+	useEffect(() => {
+		controller.setTypes(types);
+	}, [controller, types]);
+
+	return <MdiControllerContext value={controller}>{children}</MdiControllerContext>;
+}
+
+export function useMdiController(): MdiController {
+	let controller = use(MdiControllerContext);
+
+	if (!controller) {
+		throw new Error("Mdi: this component must be rendered inside <MdiProvider>.");
+	}
+
+	return controller;
+}
+
+/** The imperative document API: open, activate, close, titles, layout commands. */
+export function useMdi(): MdiApi {
+	return useMdiController();
+}
+
+/** The active document, re-rendering when it changes. Drives shared panels such as a property grid. */
+export function useMdiActiveDocument(): MdiDocumentInfo | undefined {
+	let controller = useMdiController();
+	return useSyncExternalStore(controller.subscribeStore, controller.getActive, controller.getActive);
+}
+
+/** The open documents, optionally of one type. For "Windows" menus and the like. */
+export function useMdiDocuments(type?: string): MdiDocumentInfo[] {
+	let controller = useMdiController();
+	let all = useSyncExternalStore(
+		controller.subscribeStore,
+		controller.getDocumentsSnapshot,
+		controller.getDocumentsSnapshot,
+	);
+
+	return useMemo(() => (type === undefined ? all : all.filter((document) => document.type === type)), [all, type]);
+}

package/src/mdi/MdiDocumentContext.tsx

@@ -1,60 +1,60 @@
-import { createContext, use, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
-
-import { parsePanelId } from "./ids.js";
-import { useMdiController } from "./MdiContext.js";
-import type { MdiCloseOptions, MdiDocumentHandle, MdiDocumentOptions, MdiParams } from "./types.js";
-
-export const MdiDocumentIdContext = createContext<string | null>(null);
-
-/**
- * The document a component is rendered in: its params, whether it is active, and
- * the handle to set its title and dirty state or close it. Pass `onSave`/`onClosing`
- * to take part in the close flow.
- */
-export function useMdiDocument<P extends MdiParams = MdiParams>(options?: MdiDocumentOptions): MdiDocumentHandle<P> {
-	let controller = useMdiController();
-	let id = use(MdiDocumentIdContext);
-
-	if (!id) {
-		throw new Error("Mdi: useMdiDocument() must be called from a component rendered as an Mdi document.");
-	}
-
-	// The guards are registered once; they always call the latest callbacks.
-	let latest = useRef(options);
-	useEffect(() => {
-		latest.current = options;
-	});
-
-	let [guards] = useState<MdiDocumentOptions>(() => ({
-		onSave: () => latest.current?.onSave?.() ?? true,
-		onClosing: () => latest.current?.onClosing?.() ?? true,
-	}));
-
-	useEffect(() => controller.registerGuards(id, guards), [controller, id, guards]);
-
-	let info = useSyncExternalStore(
-		controller.subscribeStore,
-		() => controller.getDocument(id),
-		() => controller.getDocument(id),
-	);
-
-	return useMemo(() => {
-		let parsed = parsePanelId(id);
-
-		return {
-			id,
-			type: info?.type ?? parsed.type,
-			key: info?.key ?? parsed.key,
-			params: (info?.params ?? {}) as P,
-			isActive: info?.isActive ?? false,
-			dirty: info?.dirty ?? false,
-			closable: info?.closable ?? true,
-			setTitle: (title: string) => controller.setTitle(id, title),
-			setDirty: (dirty: boolean) => controller.setDirty(id, dirty),
-			close: (closeOptions?: MdiCloseOptions) => controller.close(id, closeOptions),
-			activate: () => controller.activate(id),
-			getWindow: () => controller.getWindow(id),
-			mdi: controller,
-		};
-	}, [controller, id, info]);
-}
+import { createContext, use, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+
+import { parsePanelId } from "./ids.js";
+import { useMdiController } from "./MdiContext.js";
+import type { MdiCloseOptions, MdiDocumentHandle, MdiDocumentOptions, MdiParams } from "./types.js";
+
+export const MdiDocumentIdContext = createContext<string | null>(null);
+
+/**
+ * The document a component is rendered in: its params, whether it is active, and
+ * the handle to set its title and dirty state or close it. Pass `onSave`/`onClosing`
+ * to take part in the close flow.
+ */
+export function useMdiDocument<P extends MdiParams = MdiParams>(options?: MdiDocumentOptions): MdiDocumentHandle<P> {
+	let controller = useMdiController();
+	let id = use(MdiDocumentIdContext);
+
+	if (!id) {
+		throw new Error("Mdi: useMdiDocument() must be called from a component rendered as an Mdi document.");
+	}
+
+	// The guards are registered once; they always call the latest callbacks.
+	let latest = useRef(options);
+	useEffect(() => {
+		latest.current = options;
+	});
+
+	let [guards] = useState<MdiDocumentOptions>(() => ({
+		onSave: () => latest.current?.onSave?.() ?? true,
+		onClosing: () => latest.current?.onClosing?.() ?? true,
+	}));
+
+	useEffect(() => controller.registerGuards(id, guards), [controller, id, guards]);
+
+	let info = useSyncExternalStore(
+		controller.subscribeStore,
+		() => controller.getDocument(id),
+		() => controller.getDocument(id),
+	);
+
+	return useMemo(() => {
+		let parsed = parsePanelId(id);
+
+		return {
+			id,
+			type: info?.type ?? parsed.type,
+			key: info?.key ?? parsed.key,
+			params: (info?.params ?? {}) as P,
+			isActive: info?.isActive ?? false,
+			dirty: info?.dirty ?? false,
+			closable: info?.closable ?? true,
+			setTitle: (title: string) => controller.setTitle(id, title),
+			setDirty: (dirty: boolean) => controller.setDirty(id, dirty),
+			close: (closeOptions?: MdiCloseOptions) => controller.close(id, closeOptions),
+			activate: () => controller.activate(id),
+			getWindow: () => controller.getWindow(id),
+			mdi: controller,
+		};
+	}, [controller, id, info]);
+}