@olenbetong/appframe-ds 1.6.0 → 1.7.0

package/src/layout/ResponsiveDialog.tsx

@@ -1,55 +1,55 @@
-import "./ResponsiveDialog.css";
-
-import { Dialog, type DialogProps, Heading } from "@digdir/designsystemet-react";
-import clsx from "clsx";
-
-export type ResponsiveDialogMaxWidth = "xs" | "sm" | "md" | "lg" | "xl" | false;
-
-export type ResponsiveDialogProps = Omit<DialogProps, "title" | "open" | "onClose"> & {
-	open: boolean;
-	onClose?: () => void;
-	title?: React.ReactNode;
-	/**
-	 * Width of the dialog on screens wide enough for it, in MUI's breakpoint names (`sm` is
-	 * 600px, `md` 900px, `lg` 1200px, `xl` 1536px). Below the next breakpoint up the dialog
-	 * fills the screen. `false` fills the screen always.
-	 */
-	maxWidth?: ResponsiveDialogMaxWidth;
-};
-
-/**
- * A Designsystemet `Dialog` that is a centred, width-limited dialog on large screens and
- * full-screen on small ones - the MUI `Dialog fullScreen` behaviour, decided by CSS media
- * queries rather than a hook. The title goes in the first `Dialog.Block` with the dialog's own
- * close button; put the content and actions in further `Dialog.Block`s.
- *
- * Equivalent of `ResponsiveDialog` in `@olenbetong/appframe-mui`. `onClose` takes no
- * arguments: the dialog closes on the close button, the backdrop and Escape alike.
- */
-export function ResponsiveDialog({
-	children,
-	className,
-	maxWidth = "sm",
-	onClose,
-	open,
-	title,
-	...props
-}: ResponsiveDialogProps) {
-	return (
-		<Dialog
-			closedby="any"
-			{...props}
-			open={open}
-			onClose={onClose}
-			className={clsx("ObResponsiveDialog-root", className)}
-			data-max-width={maxWidth === false ? "none" : maxWidth}
-		>
-			{title && (
-				<Dialog.Block>
-					<Heading data-size="xs">{title}</Heading>
-				</Dialog.Block>
-			)}
-			{children}
-		</Dialog>
-	);
-}
+import "./ResponsiveDialog.css";
+
+import { Dialog, type DialogProps, Heading } from "@digdir/designsystemet-react";
+import clsx from "clsx";
+
+export type ResponsiveDialogMaxWidth = "xs" | "sm" | "md" | "lg" | "xl" | false;
+
+export type ResponsiveDialogProps = Omit<DialogProps, "title" | "open" | "onClose"> & {
+	open: boolean;
+	onClose?: () => void;
+	title?: React.ReactNode;
+	/**
+	 * Width of the dialog on screens wide enough for it, in MUI's breakpoint names (`sm` is
+	 * 600px, `md` 900px, `lg` 1200px, `xl` 1536px). Below the next breakpoint up the dialog
+	 * fills the screen. `false` fills the screen always.
+	 */
+	maxWidth?: ResponsiveDialogMaxWidth;
+};
+
+/**
+ * A Designsystemet `Dialog` that is a centred, width-limited dialog on large screens and
+ * full-screen on small ones - the MUI `Dialog fullScreen` behaviour, decided by CSS media
+ * queries rather than a hook. The title goes in the first `Dialog.Block` with the dialog's own
+ * close button; put the content and actions in further `Dialog.Block`s.
+ *
+ * Equivalent of `ResponsiveDialog` in `@olenbetong/appframe-mui`. `onClose` takes no
+ * arguments: the dialog closes on the close button, the backdrop and Escape alike.
+ */
+export function ResponsiveDialog({
+	children,
+	className,
+	maxWidth = "sm",
+	onClose,
+	open,
+	title,
+	...props
+}: ResponsiveDialogProps) {
+	return (
+		<Dialog
+			closedby="any"
+			{...props}
+			open={open}
+			onClose={onClose}
+			className={clsx("ObResponsiveDialog-root", className)}
+			data-max-width={maxWidth === false ? "none" : maxWidth}
+		>
+			{title && (
+				<Dialog.Block>
+					<Heading data-size="xs">{title}</Heading>
+				</Dialog.Block>
+			)}
+			{children}
+		</Dialog>
+	);
+}

package/src/layout/index.tsx

@@ -1,70 +1,70 @@
-import "./index.css";
-import "./DialogMotion.css";
-
-import { useEffect, useState } from "react";
-import type React from "react";
-
-import { AppLayoutDesktop } from "./AppLayoutDesktop.js";
-import { AppLayoutMobile } from "./AppLayoutMobile.js";
-import type { AppMenuProps } from "./AppMenu.js";
-
-export type AppLayoutProps = {
-	AppMenuProps?: AppMenuProps;
-	children: React.ReactNode | React.ReactNode[];
-	menu?: React.ReactNode | React.ReactNode[];
-	/**
-	 * @deprecated The toolbar is now server-rendered. This prop has no effect.
-	 */
-	toolbar?: React.ReactNode | React.ReactNode[];
-	/**
-	 * @deprecated The title is now rendered in the server-rendered toolbar. This prop has no effect.
-	 */
-	title?: React.ReactNode;
-	/**
-	 * @deprecated The toolbar is now server-rendered. This prop has no effect.
-	 */
-	enableMenuToggle?: boolean;
-	/**
-	 * Enable partner mode (for partner.olenbetong.no applications).
-	 * Adds a toggle button to the existing partner header instead of the app bar.
-	 */
-	partner?: boolean;
-};
-
-function useIsMobile() {
-	let [isMobile, setIsMobile] = useState(() => {
-		if (typeof window === "undefined") return false;
-		return window.matchMedia("(max-width: 1199px)").matches;
-	});
-
-	useEffect(() => {
-		let mq = window.matchMedia("(max-width: 1199px)");
-		let handler = (e: MediaQueryListEvent) => setIsMobile(e.matches);
-		mq.addEventListener("change", handler);
-		return () => mq.removeEventListener("change", handler);
-	}, []);
-
-	return isMobile;
-}
-
-export * from "./AppMenu.js";
-export * from "./AppMenuDrawer.js";
-export * from "./AppMenuItem.js";
-export * from "./AppMenuSubheader.js";
-export * from "./constants.js";
-export * from "./ErrorBoundary.js";
-export * from "./PageContainer.js";
-export * from "./ResponsiveDialog.js";
-export * from "./PartnerToggle.js";
-
-/**
- * @deprecated Use the `Page` primitives instead (`Page`, `Page.Header`,
- * `Page.Block`). `<AppLayout menu={...} title={...}>` becomes
- * `<Page layout="app"><Page.Header title={...} menu={...} />...</Page>`.
- */
-export function AppLayout(props: AppLayoutProps) {
-	let isSmall = useIsMobile();
-	let Component = isSmall ? AppLayoutMobile : AppLayoutDesktop;
-
-	return <Component {...props} />;
-}
+import "./index.css";
+import "./DialogMotion.css";
+
+import { useEffect, useState } from "react";
+import type React from "react";
+
+import { AppLayoutDesktop } from "./AppLayoutDesktop.js";
+import { AppLayoutMobile } from "./AppLayoutMobile.js";
+import type { AppMenuProps } from "./AppMenu.js";
+
+export type AppLayoutProps = {
+	AppMenuProps?: AppMenuProps;
+	children: React.ReactNode | React.ReactNode[];
+	menu?: React.ReactNode | React.ReactNode[];
+	/**
+	 * @deprecated The toolbar is now server-rendered. This prop has no effect.
+	 */
+	toolbar?: React.ReactNode | React.ReactNode[];
+	/**
+	 * @deprecated The title is now rendered in the server-rendered toolbar. This prop has no effect.
+	 */
+	title?: React.ReactNode;
+	/**
+	 * @deprecated The toolbar is now server-rendered. This prop has no effect.
+	 */
+	enableMenuToggle?: boolean;
+	/**
+	 * Enable partner mode (for partner.olenbetong.no applications).
+	 * Adds a toggle button to the existing partner header instead of the app bar.
+	 */
+	partner?: boolean;
+};
+
+function useIsMobile() {
+	let [isMobile, setIsMobile] = useState(() => {
+		if (typeof window === "undefined") return false;
+		return window.matchMedia("(max-width: 1199px)").matches;
+	});
+
+	useEffect(() => {
+		let mq = window.matchMedia("(max-width: 1199px)");
+		let handler = (e: MediaQueryListEvent) => setIsMobile(e.matches);
+		mq.addEventListener("change", handler);
+		return () => mq.removeEventListener("change", handler);
+	}, []);
+
+	return isMobile;
+}
+
+export * from "./AppMenu.js";
+export * from "./AppMenuDrawer.js";
+export * from "./AppMenuItem.js";
+export * from "./AppMenuSubheader.js";
+export * from "./constants.js";
+export * from "./ErrorBoundary.js";
+export * from "./PageContainer.js";
+export * from "./ResponsiveDialog.js";
+export * from "./PartnerToggle.js";
+
+/**
+ * @deprecated Use the `Page` primitives instead (`Page`, `Page.Header`,
+ * `Page.Block`). `<AppLayout menu={...} title={...}>` becomes
+ * `<Page layout="app"><Page.Header title={...} menu={...} />...</Page>`.
+ */
+export function AppLayout(props: AppLayoutProps) {
+	let isSmall = useIsMobile();
+	let Component = isSmall ? AppLayoutMobile : AppLayoutDesktop;
+
+	return <Component {...props} />;
+}

package/src/link/Link.tsx

@@ -1,23 +1,23 @@
-import { Link as DsLink, type LinkProps as DsLinkProps } from "@digdir/designsystemet-react";
-import { forwardRef } from "react";
-import { Link as RouterLink, type LinkProps as RouterLinkProps } from "react-router";
-
-export type LinkProps = Omit<DsLinkProps, "href" | "asChild"> &
-	Omit<RouterLinkProps, "to" | "children"> & {
-		/** The in-app path, resolved by react-router. */
-		href: string;
-	};
-
-/**
- * A Designsystemet `Link` that navigates with react-router: `href` is the route, the
- * navigation is a view transition. Equivalent of `Link` in `@olenbetong/appframe-mui`.
- */
-export const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link({ href, children, ...props }, ref) {
-	return (
-		<DsLink asChild>
-			<RouterLink viewTransition to={href} {...props} ref={ref}>
-				{children}
-			</RouterLink>
-		</DsLink>
-	);
-});
+import { Link as DsLink, type LinkProps as DsLinkProps } from "@digdir/designsystemet-react";
+import { forwardRef } from "react";
+import { Link as RouterLink, type LinkProps as RouterLinkProps } from "react-router";
+
+export type LinkProps = Omit<DsLinkProps, "href" | "asChild"> &
+	Omit<RouterLinkProps, "to" | "children"> & {
+		/** The in-app path, resolved by react-router. */
+		href: string;
+	};
+
+/**
+ * A Designsystemet `Link` that navigates with react-router: `href` is the route, the
+ * navigation is a view transition. Equivalent of `Link` in `@olenbetong/appframe-mui`.
+ */
+export const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link({ href, children, ...props }, ref) {
+	return (
+		<DsLink asChild>
+			<RouterLink viewTransition to={href} {...props} ref={ref}>
+				{children}
+			</RouterLink>
+		</DsLink>
+	);
+});

package/src/link/index.ts

@@ -1 +1 @@
-export * from "./Link.js";
+export * from "./Link.js";

package/src/mdi/Mdi.css

@@ -34,17 +34,17 @@
 	--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-color: var(--ds-color-brand-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-background-color: color-mix(in srgb, var(--ds-color-brand-base-default, #116069) 20%, transparent);
+	--dv-drag-over-border-color: var(--ds-color-brand-base-default, #116069);
 	--dv-drag-over-border: none;
-	--dv-edge-dock-indicator-color: var(--ds-color-accent-base-default, #116069);
+	--dv-edge-dock-indicator-color: var(--ds-color-brand-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-dnd-compass-active-cell-color: var(--ds-color-brand-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);
@@ -65,8 +65,8 @@
 	--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-smart-guides-color: var(--ds-color-brand-base-default, #116069);
+	--dv-smart-guides-preview-color: color-mix(in srgb, var(--ds-color-brand-base-default, #116069) 20%, transparent);
 	--dv-tab-group-color-grey: #5f6368;
 	--dv-tab-group-color-blue: #1a73e8;
 	--dv-tab-group-color-red: #d93025;
@@ -88,7 +88,7 @@
 
 /* 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);
+	box-shadow: inset 0 -2px 0 var(--ds-color-brand-base-default, #116069);
 }
 
 .ObMdi-theme .dv-tab:focus-visible {

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);
+	});
+});