@olenbetong/appframe-ds 1.0.3 → 1.2.0

package/src/mdi/Mdi.test.tsx

@@ -1,87 +1,91 @@
-import { act, render, screen } from "@testing-library/react";
-import { useEffect } from "react";
-import { describe, expect, it, vi } from "vitest";
-
-import { Mdi } from "./Mdi.js";
-import { MdiProvider, useMdi, useMdiActiveDocument } from "./MdiContext.js";
-import { useMdiDocument } from "./MdiDocumentContext.js";
-import type { MdiApi, MdiDocumentProps, MdiDocumentTypes, MdiLayoutSpec } from "./types.js";
-
-vi.mock("@olenbetong/appframe-core", () => ({
-	getLocalizedString: (value: string) => value,
-}));
-
-function Note({ params }: MdiDocumentProps<{ label: string }>) {
-	let document = useMdiDocument();
-
-	return (
-		<div data-testid={document.id}>
-			<span>{params.label}</span>
-			<button type="button" onClick={() => document.setTitle(`${params.label}!`)}>
-				rename
-			</button>
-		</div>
-	);
-}
-
-function ActiveLabel() {
-	let active = useMdiActiveDocument();
-	return <output data-testid="active">{active?.id ?? "none"}</output>;
-}
-
-let apiRef: { current: MdiApi | null } = { current: null };
-
-function Grab() {
-	let api = useMdi();
-	useEffect(() => {
-		apiRef.current = api;
-	});
-	return null;
-}
-
-const types: MdiDocumentTypes = {
-	note: { component: Note, title: (params) => `Note ${params.label as string}` },
-	tree: { component: Note, singleton: true, closable: false, title: "Tree" },
-};
-
-const spec: MdiLayoutSpec = {
-	root: {
-		direction: "horizontal",
-		children: [
-			{ tabs: [{ type: "tree", params: { label: "Tree" } }], hideHeader: true },
-			{ tabs: [{ type: "note", key: "1", params: { label: "First" } }] },
-		],
-	},
-};
-
-describe("Mdi", () => {
-	it("renders the default layout through dockview and exposes the api", async () => {
-		render(
-			<MdiProvider types={types}>
-				<Grab />
-				<ActiveLabel />
-				<div style={{ width: 800, height: 600 }}>
-					<Mdi defaultLayout={spec} />
-				</div>
-			</MdiProvider>,
-		);
-
-		expect(await screen.findByText("First")).toBeInTheDocument();
-		expect(screen.getByTestId("tree")).toBeInTheDocument();
-		expect(apiRef.current?.getDocuments().map((document) => document.id)).toEqual(["tree", "note:1"]);
-
-		await act(async () => {
-			apiRef.current!.openDocument({ type: "note", key: "2", params: { label: "Second" } });
-		});
-
-		expect(await screen.findByText("Second")).toBeInTheDocument();
-		expect(screen.getByTestId("active")).toHaveTextContent("note:2");
-
-		await act(async () => {
-			await apiRef.current!.close("note:2");
-		});
-
-		expect(screen.queryByText("Second")).not.toBeInTheDocument();
-		expect(apiRef.current?.getDocument("tree")?.closable).toBe(false);
-	});
-});
+import { act, render, screen } from "@testing-library/react";
+import { useEffect } from "react";
+import { describe, expect, it, vi } from "vitest";
+
+import { Mdi } from "./Mdi.js";
+import { MdiProvider, useMdi, useMdiActiveDocument } from "./MdiContext.js";
+import { useMdiDocument } from "./MdiDocumentContext.js";
+import type { MdiApi, MdiDocumentProps, MdiDocumentTypes, MdiLayoutSpec } from "./types.js";
+
+vi.mock("@olenbetong/appframe-core", () => ({
+	getLocalizedString: (value: string) => value,
+	createLocalizer: () => ({
+		getLocalizedString: (value: string) => value,
+		localize: (parts: TemplateStringsArray) => parts.join(""),
+	}),
+}));
+
+function Note({ params }: MdiDocumentProps<{ label: string }>) {
+	let document = useMdiDocument();
+
+	return (
+		<div data-testid={document.id}>
+			<span>{params.label}</span>
+			<button type="button" onClick={() => document.setTitle(`${params.label}!`)}>
+				rename
+			</button>
+		</div>
+	);
+}
+
+function ActiveLabel() {
+	let active = useMdiActiveDocument();
+	return <output data-testid="active">{active?.id ?? "none"}</output>;
+}
+
+let apiRef: { current: MdiApi | null } = { current: null };
+
+function Grab() {
+	let api = useMdi();
+	useEffect(() => {
+		apiRef.current = api;
+	});
+	return null;
+}
+
+const types: MdiDocumentTypes = {
+	note: { component: Note, title: (params) => `Note ${params.label as string}` },
+	tree: { component: Note, singleton: true, closable: false, title: "Tree" },
+};
+
+const spec: MdiLayoutSpec = {
+	root: {
+		direction: "horizontal",
+		children: [
+			{ tabs: [{ type: "tree", params: { label: "Tree" } }], hideHeader: true },
+			{ tabs: [{ type: "note", key: "1", params: { label: "First" } }] },
+		],
+	},
+};
+
+describe("Mdi", () => {
+	it("renders the default layout through dockview and exposes the api", async () => {
+		render(
+			<MdiProvider types={types}>
+				<Grab />
+				<ActiveLabel />
+				<div style={{ width: 800, height: 600 }}>
+					<Mdi defaultLayout={spec} />
+				</div>
+			</MdiProvider>,
+		);
+
+		expect(await screen.findByText("First")).toBeInTheDocument();
+		expect(screen.getByTestId("tree")).toBeInTheDocument();
+		expect(apiRef.current?.getDocuments().map((document) => document.id)).toEqual(["tree", "note:1"]);
+
+		await act(async () => {
+			apiRef.current!.openDocument({ type: "note", key: "2", params: { label: "Second" } });
+		});
+
+		expect(await screen.findByText("Second")).toBeInTheDocument();
+		expect(screen.getByTestId("active")).toHaveTextContent("note:2");
+
+		await act(async () => {
+			await apiRef.current!.close("note:2");
+		});
+
+		expect(screen.queryByText("Second")).not.toBeInTheDocument();
+		expect(apiRef.current?.getDocument("tree")?.closable).toBe(false);
+	});
+});

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,47 @@
-import { Button, Dialog, Heading, Paragraph } from "@digdir/designsystemet-react";
-import { getLocalizedString } from "@olenbetong/appframe-core";
-
-import type { MdiConfirmCloseResult, MdiDocumentInfo } from "./types.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"
+			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>
+	);
+}