@olenbetong/appframe-ds 1.0.3 → 1.2.0

package/src/layout/ResponsiveDialog.tsx

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

package/src/layout/index.tsx

@@ -1,68 +1,69 @@
-import "./index.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 "./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 { 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

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

package/src/link/index.ts

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

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