@olenbetong/appframe-ds 1.3.3 → 1.3.5

package/src/mdi/Mdi.css

@@ -1,138 +1,138 @@
-.ObMdi-root {
-	position: relative;
-	width: 100%;
-	height: 100%;
-	min-width: 0;
-	min-height: 0;
-}
-
-.ObMdi-root > .dv-dockview {
-	width: 100%;
-	height: 100%;
-}
-
-/*
- * The dockview variables mapped to Designsystemet tokens. The theme class is also
- * applied to the container in popout windows, so the mapping travels with them.
- */
-.ObMdi-theme {
-	--dv-paneview-active-outline-color: var(--ds-color-focus-outer, #1e2b3c);
-	--dv-tabs-and-actions-container-font-size: var(--ds-font-size-3, 0.875rem);
-	--dv-tabs-and-actions-container-height: 2.25rem;
-	--dv-tab-font-size: inherit;
-	--dv-tabs-and-actions-container-background-color: var(--ds-color-neutral-surface-default, #f3f4f5);
-	--dv-group-view-background-color: var(--ds-color-neutral-background-default, #fff);
-	--dv-activegroup-visiblepanel-tab-background-color: var(--ds-color-neutral-background-default, #fff);
-	--dv-activegroup-hiddenpanel-tab-background-color: var(--ds-color-neutral-surface-default, #f3f4f5);
-	--dv-inactivegroup-visiblepanel-tab-background-color: var(--ds-color-neutral-background-tinted, #f8f9fa);
-	--dv-inactivegroup-hiddenpanel-tab-background-color: var(--ds-color-neutral-surface-default, #f3f4f5);
-	--dv-activegroup-visiblepanel-tab-color: var(--ds-color-neutral-text-default, #292c30);
-	--dv-activegroup-hiddenpanel-tab-color: var(--ds-color-neutral-text-subtle, #5b5f64);
-	--dv-inactivegroup-visiblepanel-tab-color: var(--ds-color-neutral-text-subtle, #5b5f64);
-	--dv-inactivegroup-hiddenpanel-tab-color: var(--ds-color-neutral-text-subtle, #5b5f64);
-	--dv-tab-divider-color: var(--ds-color-neutral-border-subtle, #d5d7d9);
-	--dv-separator-border: var(--ds-color-neutral-border-subtle, #d5d7d9);
-	--dv-paneview-header-border-color: var(--ds-color-neutral-border-default, #a6a9ad);
-	--dv-sash-color: transparent;
-	--dv-active-sash-color: var(--ds-color-accent-base-default, #116069);
-	--dv-active-sash-transition-duration: 0.1s;
-	--dv-active-sash-transition-delay: 0.3s;
-	--dv-drag-over-background-color: color-mix(in srgb, var(--ds-color-accent-base-default, #116069) 20%, transparent);
-	--dv-drag-over-border-color: var(--ds-color-accent-base-default, #116069);
-	--dv-drag-over-border: none;
-	--dv-edge-dock-indicator-color: var(--ds-color-accent-base-default, #116069);
-	--dv-dnd-compass-color: var(--ds-color-neutral-border-default, #a6a9ad);
-	--dv-dnd-compass-cell-color: var(--ds-color-neutral-surface-default, #f3f4f5);
-	--dv-dnd-compass-edge-cell-color: var(--ds-color-neutral-surface-hover, #e6e8ea);
-	--dv-dnd-compass-active-cell-color: var(--ds-color-accent-surface-hover, #d1e5e7);
-	--dv-tabs-container-scrollbar-color: var(--ds-color-neutral-border-default, #a6a9ad);
-	--dv-scrollbar-background-color: var(--ds-color-neutral-border-default, #a6a9ad);
-	--dv-icon-hover-background-color: var(--ds-color-neutral-surface-hover, #e6e8ea);
-	--dv-context-menu-background-color: var(--ds-color-neutral-background-default, #fff);
-	--dv-context-menu-color: var(--ds-color-neutral-text-default, #292c30);
-	--dv-floating-box-shadow: var(--ds-shadow-lg, 0 8px 32px rgba(0, 0, 0, 0.12));
-	--dv-floating-border: 1px solid var(--ds-color-neutral-border-default, #a6a9ad);
-	--dv-floating-group-border: none;
-	--dv-floating-group-dragging-opacity: 0.5;
-	--dv-floating-titlebar-height: 22px;
-	--dv-floating-titlebar-background-color: var(--dv-tabs-and-actions-container-background-color);
-	--dv-floating-titlebar-border-bottom: var(--dv-floating-border);
-	--dv-overlay-z-index: 999;
-	--dv-border-radius: 0px;
-	--dv-tab-margin: 0;
-	--dv-spacing-padding: 0px;
-	--dv-tab-border-radius: 0px;
-	--dv-sash-border-radius: 0px;
-	--dv-dropdown-border-radius: var(--ds-border-radius-md, 0.25rem);
-	--dv-tab-close-icon-size: inherit;
-	--dv-smart-guides-color: var(--ds-color-accent-base-default, #116069);
-	--dv-smart-guides-preview-color: color-mix(in srgb, var(--ds-color-accent-base-default, #116069) 20%, transparent);
-	--dv-tab-group-color-grey: #5f6368;
-	--dv-tab-group-color-blue: #1a73e8;
-	--dv-tab-group-color-red: #d93025;
-	--dv-tab-group-color-yellow: #f9ab00;
-	--dv-tab-group-color-green: #188038;
-	--dv-tab-group-color-pink: #d01884;
-	--dv-tab-group-color-purple: #a142f4;
-	--dv-tab-group-color-cyan: #007b83;
-	--dv-tab-group-color-orange: #e8710a;
-	--dv-tab-group-chip-padding: 4px 8px;
-	--dv-tab-group-chip-border-radius: 6px;
-	--dv-tab-group-chip-font-size: 11px;
-	--dv-tab-group-line-height: 2px;
-	--dv-tab-group-line-opacity: 0.6;
-
-	font-family: var(--ds-font-family, inherit);
-	color: var(--ds-color-neutral-text-default, #292c30);
-}
-
-/* The active tab gets an accent line so it reads as selected without relying on background alone. */
-.ObMdi-theme .dv-tab.dv-active-tab {
-	box-shadow: inset 0 -2px 0 var(--ds-color-accent-base-default, #116069);
-}
-
-.ObMdi-theme .dv-tab:focus-visible {
-	outline: 2px solid var(--ds-color-focus-outer, #1e2b3c);
-	outline-offset: -2px;
-}
-
-/* Dirty marker: a dot after the title */
-.ObMdi-tab--dirty .dv-default-tab-content::after {
-	content: " \2022";
-	color: var(--ds-color-warning-base-default, #b8860b);
-}
-
-.ObMdi-error {
-	display: flex;
-	flex-direction: column;
-	gap: var(--ds-size-2, 0.5rem);
-	padding: var(--ds-size-4, 1rem);
-	color: var(--ds-color-danger-text-default, #b3221a);
-}
-
-.ObMdi-error-title {
-	margin: 0;
-	font-weight: 600;
-}
-
-.ObMdi-error-message {
-	margin: 0;
-	white-space: pre-wrap;
-	font-size: var(--ds-font-size-2, 0.8125rem);
-	color: var(--ds-color-neutral-text-subtle, #5b5f64);
-}
-
-.ObMdi-watermark {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	width: 100%;
-	height: 100%;
-	color: var(--ds-color-neutral-text-subtle, #5b5f64);
-}
-
-.ObMdi-confirmClose-actions {
-	display: flex;
-	gap: var(--ds-size-2, 0.5rem);
-	justify-content: flex-end;
-}
+.ObMdi-root {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	min-width: 0;
+	min-height: 0;
+}
+
+.ObMdi-root > .dv-dockview {
+	width: 100%;
+	height: 100%;
+}
+
+/*
+ * The dockview variables mapped to Designsystemet tokens. The theme class is also
+ * applied to the container in popout windows, so the mapping travels with them.
+ */
+.ObMdi-theme {
+	--dv-paneview-active-outline-color: var(--ds-color-focus-outer, #1e2b3c);
+	--dv-tabs-and-actions-container-font-size: var(--ds-font-size-3, 0.875rem);
+	--dv-tabs-and-actions-container-height: 2.25rem;
+	--dv-tab-font-size: inherit;
+	--dv-tabs-and-actions-container-background-color: var(--ds-color-neutral-surface-default, #f3f4f5);
+	--dv-group-view-background-color: var(--ds-color-neutral-background-default, #fff);
+	--dv-activegroup-visiblepanel-tab-background-color: var(--ds-color-neutral-background-default, #fff);
+	--dv-activegroup-hiddenpanel-tab-background-color: var(--ds-color-neutral-surface-default, #f3f4f5);
+	--dv-inactivegroup-visiblepanel-tab-background-color: var(--ds-color-neutral-background-tinted, #f8f9fa);
+	--dv-inactivegroup-hiddenpanel-tab-background-color: var(--ds-color-neutral-surface-default, #f3f4f5);
+	--dv-activegroup-visiblepanel-tab-color: var(--ds-color-neutral-text-default, #292c30);
+	--dv-activegroup-hiddenpanel-tab-color: var(--ds-color-neutral-text-subtle, #5b5f64);
+	--dv-inactivegroup-visiblepanel-tab-color: var(--ds-color-neutral-text-subtle, #5b5f64);
+	--dv-inactivegroup-hiddenpanel-tab-color: var(--ds-color-neutral-text-subtle, #5b5f64);
+	--dv-tab-divider-color: var(--ds-color-neutral-border-subtle, #d5d7d9);
+	--dv-separator-border: var(--ds-color-neutral-border-subtle, #d5d7d9);
+	--dv-paneview-header-border-color: var(--ds-color-neutral-border-default, #a6a9ad);
+	--dv-sash-color: transparent;
+	--dv-active-sash-color: var(--ds-color-accent-base-default, #116069);
+	--dv-active-sash-transition-duration: 0.1s;
+	--dv-active-sash-transition-delay: 0.3s;
+	--dv-drag-over-background-color: color-mix(in srgb, var(--ds-color-accent-base-default, #116069) 20%, transparent);
+	--dv-drag-over-border-color: var(--ds-color-accent-base-default, #116069);
+	--dv-drag-over-border: none;
+	--dv-edge-dock-indicator-color: var(--ds-color-accent-base-default, #116069);
+	--dv-dnd-compass-color: var(--ds-color-neutral-border-default, #a6a9ad);
+	--dv-dnd-compass-cell-color: var(--ds-color-neutral-surface-default, #f3f4f5);
+	--dv-dnd-compass-edge-cell-color: var(--ds-color-neutral-surface-hover, #e6e8ea);
+	--dv-dnd-compass-active-cell-color: var(--ds-color-accent-surface-hover, #d1e5e7);
+	--dv-tabs-container-scrollbar-color: var(--ds-color-neutral-border-default, #a6a9ad);
+	--dv-scrollbar-background-color: var(--ds-color-neutral-border-default, #a6a9ad);
+	--dv-icon-hover-background-color: var(--ds-color-neutral-surface-hover, #e6e8ea);
+	--dv-context-menu-background-color: var(--ds-color-neutral-background-default, #fff);
+	--dv-context-menu-color: var(--ds-color-neutral-text-default, #292c30);
+	--dv-floating-box-shadow: var(--ds-shadow-lg, 0 8px 32px rgba(0, 0, 0, 0.12));
+	--dv-floating-border: 1px solid var(--ds-color-neutral-border-default, #a6a9ad);
+	--dv-floating-group-border: none;
+	--dv-floating-group-dragging-opacity: 0.5;
+	--dv-floating-titlebar-height: 22px;
+	--dv-floating-titlebar-background-color: var(--dv-tabs-and-actions-container-background-color);
+	--dv-floating-titlebar-border-bottom: var(--dv-floating-border);
+	--dv-overlay-z-index: 999;
+	--dv-border-radius: 0px;
+	--dv-tab-margin: 0;
+	--dv-spacing-padding: 0px;
+	--dv-tab-border-radius: 0px;
+	--dv-sash-border-radius: 0px;
+	--dv-dropdown-border-radius: var(--ds-border-radius-md, 0.25rem);
+	--dv-tab-close-icon-size: inherit;
+	--dv-smart-guides-color: var(--ds-color-accent-base-default, #116069);
+	--dv-smart-guides-preview-color: color-mix(in srgb, var(--ds-color-accent-base-default, #116069) 20%, transparent);
+	--dv-tab-group-color-grey: #5f6368;
+	--dv-tab-group-color-blue: #1a73e8;
+	--dv-tab-group-color-red: #d93025;
+	--dv-tab-group-color-yellow: #f9ab00;
+	--dv-tab-group-color-green: #188038;
+	--dv-tab-group-color-pink: #d01884;
+	--dv-tab-group-color-purple: #a142f4;
+	--dv-tab-group-color-cyan: #007b83;
+	--dv-tab-group-color-orange: #e8710a;
+	--dv-tab-group-chip-padding: 4px 8px;
+	--dv-tab-group-chip-border-radius: 6px;
+	--dv-tab-group-chip-font-size: 11px;
+	--dv-tab-group-line-height: 2px;
+	--dv-tab-group-line-opacity: 0.6;
+
+	font-family: var(--ds-font-family, inherit);
+	color: var(--ds-color-neutral-text-default, #292c30);
+}
+
+/* The active tab gets an accent line so it reads as selected without relying on background alone. */
+.ObMdi-theme .dv-tab.dv-active-tab {
+	box-shadow: inset 0 -2px 0 var(--ds-color-accent-base-default, #116069);
+}
+
+.ObMdi-theme .dv-tab:focus-visible {
+	outline: 2px solid var(--ds-color-focus-outer, #1e2b3c);
+	outline-offset: -2px;
+}
+
+/* Dirty marker: a dot after the title */
+.ObMdi-tab--dirty .dv-default-tab-content::after {
+	content: " \2022";
+	color: var(--ds-color-warning-base-default, #b8860b);
+}
+
+.ObMdi-error {
+	display: flex;
+	flex-direction: column;
+	gap: var(--ds-size-2, 0.5rem);
+	padding: var(--ds-size-4, 1rem);
+	color: var(--ds-color-danger-text-default, #b3221a);
+}
+
+.ObMdi-error-title {
+	margin: 0;
+	font-weight: 600;
+}
+
+.ObMdi-error-message {
+	margin: 0;
+	white-space: pre-wrap;
+	font-size: var(--ds-font-size-2, 0.8125rem);
+	color: var(--ds-color-neutral-text-subtle, #5b5f64);
+}
+
+.ObMdi-watermark {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	height: 100%;
+	color: var(--ds-color-neutral-text-subtle, #5b5f64);
+}
+
+.ObMdi-confirmClose-actions {
+	display: flex;
+	gap: var(--ds-size-2, 0.5rem);
+	justify-content: flex-end;
+}

package/src/mdi/Mdi.test.tsx

@@ -1,91 +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,
-	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);
-	});
-});
+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);
+	});
+});