@olenbetong/appframe-ds 0.2.0 → 0.3.0

package/es/layout/PartnerToggle.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+let toggleRoot = document.createElement("div");
+let brand = document.querySelector(".partner-nav__brand");
+toggleRoot.id = "toggle-root";
+document.querySelector(".partner-nav")?.insertBefore(toggleRoot, brand);
+export function PartnerToggle({ onClick, open, }) {
+    return createPortal(_jsx("button", { type: "button", className: "LayoutSmall-toggle", onClick: onClick, children: open ? "◀" : "☰" }), toggleRoot);
+}

package/es/layout/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const AF_MUI_PAGE_TITLE_ID = "PageTitleSmallLayout";
+export declare const AF_MUI_APPBAR_TOOLS_ID = "AppBarTools";

package/es/layout/constants.js

@@ -0,0 +1,2 @@
+export const AF_MUI_PAGE_TITLE_ID = "PageTitleSmallLayout";
+export const AF_MUI_APPBAR_TOOLS_ID = "AppBarTools";

package/es/layout/index.css

@@ -0,0 +1,65 @@
+.app-view {
+	height: 100%;
+	overflow-y: hidden;
+}
+
+.scroll-view {
+	height: 100%;
+	max-height: 100%;
+	overflow-y: auto;
+}
+
+.flow > * + * {
+	margin-top: var(--flow-spacing, 1rem) !important;
+}
+
+.flow-xs > * {
+	--flow-spacing: 0.25rem;
+}
+
+.flow-sm > * {
+	--flow-spacing: 0.5rem;
+}
+
+.flow-lg > * {
+	--flow-spacing: 1.5rem;
+}
+
+.flow-xl > * {
+	--flow-spacing: 2rem;
+}
+
+.flow-xxl > * {
+	--flow-spacing: 3rem;
+}
+
+.app-grid {
+	height: 100%;
+	overflow-y: hidden;
+	display: grid;
+	gap: 1rem;
+}
+
+.rows-af {
+	grid-template-rows: auto 1fr;
+}
+
+.rows-aaf {
+	grid-template-rows: auto auto 1fr;
+}
+
+.rows-afaf {
+	grid-template-rows: auto 1fr auto 1fr;
+}
+
+.rows-aff {
+	grid-template-rows: auto 1fr 1fr;
+}
+
+.rows-f {
+	grid-template-rows: 1fr;
+}
+
+.rows-ff {
+	grid-template-rows: 1fr 1fr;
+}

package/es/layout/index.d.ts

@@ -0,0 +1,33 @@
+import "./index.css";
+import type React from "react";
+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;
+};
+export * from "./AppMenu.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";
+export declare function AppLayout(props: AppLayoutProps): import("react/jsx-runtime").JSX.Element;

package/es/layout/index.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "./index.css";
+import { useEffect, useState } from "react";
+import { AppLayoutDesktop } from "./AppLayoutDesktop.js";
+import { AppLayoutMobile } from "./AppLayoutMobile.js";
+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) => setIsMobile(e.matches);
+        mq.addEventListener("change", handler);
+        return () => mq.removeEventListener("change", handler);
+    }, []);
+    return isMobile;
+}
+export * from "./AppMenu.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";
+export function AppLayout(props) {
+    let isSmall = useIsMobile();
+    let Component = isSmall ? AppLayoutMobile : AppLayoutDesktop;
+    return _jsx(Component, { ...props });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olenbetong/appframe-ds",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Components that bind Designsystemet components to Appframe data objects",
   "type": "module",
   "types": "./es/index.d.ts",
@@ -15,10 +15,12 @@
   "author": "Bjørnar Vister Hansen <bvh@olenbetong.no>",
   "license": "MIT",
   "peerDependencies": {
-    "@digdir/designsystemet-react": ">=1.0.0",
+    "@digdir/designsystemet-react": ">=1.15.0",
     "@mui/icons-material": ">=7.0.0",
     "react": ">=18.2.0",
-    "react-dom": ">=18.2.0"
+    "react-dom": ">=18.2.0",
+    "react-error-boundary": ">=5.0.0",
+    "react-router": ">=7.0.0"
   },
   "dependencies": {
     "@olenbetong/appframe-core": "2.11.10",
@@ -29,18 +31,21 @@
     "clsx": "^2.1.1"
   },
   "devDependencies": {
-    "@digdir/designsystemet-react": "1.13.3",
-    "@mui/icons-material": "9.0.0",
-    "@types/react": "19.2.14",
+    "@digdir/designsystemet-react": "1.15.0",
+    "@mui/icons-material": "9.0.1",
+    "@types/react": "19.2.15",
     "@types/react-dom": "19.2.3",
     "@types/react-window": "^1.8.8",
-    "react": "19.2.5",
-    "react-dom": "19.2.5",
+    "react": "19.2.6",
+    "react-dom": "19.2.6",
+    "react-error-boundary": "6.1.2",
+    "react-router": "7.16.0",
     "typescript": "6.0.3"
   },
+  "optionalDependencies": {},
   "scripts": {
     "build": "pnpm run build:tsc && pnpm run build:css",
     "build:tsc": "node --no-warnings ../../scripts/clean.ts ./es tsconfig.build.tsbuildinfo && tsc -p tsconfig.build.json",
-    "build:css": "cp src/AfLookup/Lookup.css es/AfLookup/Lookup.css && cp src/AfLookup/Combobox.css es/AfLookup/Combobox.css"
+    "build:css": "cp src/AfLookup/Lookup.css es/AfLookup/Lookup.css && cp src/AfLookup/Combobox.css es/AfLookup/Combobox.css && mkdir -p es/layout && cp src/layout/AppMenu.css es/layout/AppMenu.css && cp src/layout/AppMenuItem.css es/layout/AppMenuItem.css && cp src/layout/AppMenuSubheader.css es/layout/AppMenuSubheader.css && cp src/layout/AppLayoutDesktop.css es/layout/AppLayoutDesktop.css && cp src/layout/AppLayoutMobile.css es/layout/AppLayoutMobile.css && cp src/layout/index.css es/layout/index.css && cp src/layout/ErrorBoundary.css es/layout/ErrorBoundary.css && cp src/layout/PageContainer.css es/layout/PageContainer.css"
   }
 }

package/src/index.ts

@@ -1,2 +1,3 @@
 export * from "./AfLookup/index.js";
 export * from "./binding/index.js";
+export * from "./layout/index.js";

package/src/layout/AppLayoutDesktop.css

@@ -0,0 +1,65 @@
+.LayoutLarge-container {
+	height: 100vh;
+	display: grid;
+	grid-template-rows: 1fr;
+}
+
+.LayoutLarge-root {
+	height: 100%;
+	overflow: hidden;
+}
+
+.LayoutLarge-root.LayoutLarge-withMenu {
+	transition: padding 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms !important;
+	padding-left: 0;
+	position: relative;
+}
+
+.LayoutLarge-root.LayoutLarge-withMenu.open {
+	padding-left: var(--navbar-drawer-width, 24rem);
+}
+
+.LayoutLarge-menu {
+	height: 100%;
+	width: var(--navbar-drawer-width, 24rem);
+	transition: left ease-in-out 200ms;
+	position: absolute;
+	top: 0;
+	left: calc(var(--navbar-drawer-width, 24rem) * -1);
+	z-index: 1200;
+	background-color: white;
+	box-shadow:
+		rgb(0 0 0 / 20%) 0px 2px 1px -1px,
+		rgb(0 0 0 / 14%) 0px 1px 1px 0px,
+		rgb(0 0 0 / 12%) 0px 1px 3px 0px;
+}
+
+.LayoutLarge-withMenu.open .LayoutLarge-menu {
+	left: 0;
+}
+
+@media screen {
+	.LayoutLarge-main {
+		height: 100%;
+		overflow: auto;
+	}
+
+	.LayoutLarge-main:has(> .app-view, > .ObPageContainer-fullHeight) {
+		max-height: 100%;
+		overflow: hidden;
+	}
+}
+
+@media print {
+	.LayoutLarge-menu {
+		display: none !important;
+		box-shadow: none !important;
+		overflow: hidden !important;
+	}
+
+	.LayoutLarge-root {
+		display: block;
+		height: auto;
+		overflow: visible;
+	}
+}

package/src/layout/AppLayoutDesktop.tsx

@@ -0,0 +1,45 @@
+import "./AppLayoutDesktop.css";
+
+import clsx from "clsx";
+import { Suspense, useState } from "react";
+import { ErrorBoundary } from "react-error-boundary";
+
+import { AppMenu } from "./AppMenu.js";
+import { ErrorAlertFallback } from "./ErrorBoundary.js";
+import type { AppLayoutProps } from "./index.js";
+import { PartnerToggle } from "./PartnerToggle.js";
+
+function LoadingFallback() {
+	return (
+		<div
+			style={{
+				height: "4px",
+				background: "linear-gradient(90deg, var(--ds-color-brand-base-default, #0062ba) 0%, transparent 100%)",
+				animation: "progress-indeterminate 1.5s ease-in-out infinite",
+			}}
+		/>
+	);
+}
+
+export function AppLayoutDesktop({ AppMenuProps, children, menu, partner }: AppLayoutProps) {
+	let [open, setOpen] = useState(true);
+
+	return (
+		<div className={clsx(partner ? "app-view" : "LayoutLarge-container")}>
+			{partner && menu && <PartnerToggle open={open} onClick={() => setOpen((o) => !o)} />}
+
+			<div className={clsx("LayoutLarge-root", menu && "LayoutLarge-withMenu", open && "open")}>
+				{menu && (
+					<AppMenu className="LayoutLarge-menu AppMenu-drawer" {...AppMenuProps}>
+						{menu}
+					</AppMenu>
+				)}
+				<main className="LayoutLarge-main">
+					<Suspense fallback={<LoadingFallback />}>
+						<ErrorBoundary FallbackComponent={ErrorAlertFallback}>{children}</ErrorBoundary>
+					</Suspense>
+				</main>
+			</div>
+		</div>
+	);
+}

package/src/layout/AppLayoutMobile.css

@@ -0,0 +1,75 @@
+.LayoutSmall-root:has(> .ObPageContainer-fullHeight, > .app-view) {
+	display: grid;
+	grid-template-rows: auto 1fr;
+	height: 100dvh;
+	overflow: hidden;
+}
+
+.partner-nav {
+	color: white;
+}
+
+/* Minimal toggle-only bar shown when there's a sidebar menu but no server AppBar */
+.LayoutSmall-menuBar {
+	display: flex;
+	align-items: center;
+	height: var(--navbar-height, 3.5rem);
+}
+
+.LayoutSmall-toggle {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: transparent;
+	border: none;
+	color: inherit;
+	cursor: pointer;
+	border-radius: 50%;
+	height: var(--navbar-height, 3.5rem);
+	width: var(--navbar-height, 3.5rem);
+	font-size: 1.5rem;
+	flex-shrink: 0;
+}
+
+.LayoutSmall-toggle:hover {
+	background-color: rgb(0 0 0 / 0.06);
+}
+
+/* Drawer overlay */
+.LayoutSmall-drawerOverlay {
+	position: fixed;
+	inset: 0;
+	background-color: rgb(0 0 0 / 50%);
+	z-index: 1199;
+	opacity: 0;
+	pointer-events: none;
+	transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.LayoutSmall-drawerOverlay.open {
+	opacity: 1;
+	pointer-events: auto;
+}
+
+/* Drawer panel */
+.LayoutSmall-drawer {
+	position: fixed;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	max-width: 90%;
+	width: var(--navbar-drawer-width, 20rem);
+	z-index: 1200;
+	background-color: var(--ds-color-neutral-background-default, #fff);
+	box-shadow:
+		rgb(0 0 0 / 20%) 0px 8px 10px -5px,
+		rgb(0 0 0 / 14%) 0px 16px 24px 2px,
+		rgb(0 0 0 / 12%) 0px 6px 30px 5px;
+	transform: translateX(-100%);
+	transition: transform 225ms cubic-bezier(0, 0, 0.2, 1);
+	overflow: hidden;
+}
+
+.LayoutSmall-drawer.open {
+	transform: translateX(0);
+}

package/src/layout/AppLayoutMobile.tsx

@@ -0,0 +1,50 @@
+import "./AppLayoutMobile.css";
+
+import { useEffect, useState } from "react";
+import { useLocation } from "react-router";
+
+import { AppMenu } from "./AppMenu.js";
+import type { AppLayoutProps } from "./index.js";
+import { PartnerToggle } from "./PartnerToggle.js";
+
+function Toggle({ onToggle }: { onToggle: () => void }) {
+	return (
+		<button type="button" className="LayoutSmall-toggle" onClick={onToggle} aria-label="Toggle menu">
+			☰
+		</button>
+	);
+}
+
+export function AppLayoutMobile({ AppMenuProps, children, menu, partner }: AppLayoutProps) {
+	let [drawerOpen, setDrawerOpen] = useState(false);
+	let location = useLocation();
+
+	// biome-ignore lint/correctness/useExhaustiveDependencies: close drawer on navigation
+	useEffect(() => {
+		setDrawerOpen(false);
+	}, [location]);
+
+	return (
+		<div className="LayoutSmall-root">
+			{partner && menu && <PartnerToggle open={drawerOpen} onClick={() => setDrawerOpen((c) => !c)} />}
+			{!partner && menu && (
+				<div className="LayoutSmall-menuBar">
+					<Toggle onToggle={() => setDrawerOpen((c) => !c)} />
+				</div>
+			)}
+			{menu && (
+				<>
+					<div
+						className={`LayoutSmall-drawerOverlay${drawerOpen ? " open" : ""}`}
+						onClick={() => setDrawerOpen(false)}
+						aria-hidden="true"
+					/>
+					<div className={`LayoutSmall-drawer AppMenu-drawer${drawerOpen ? " open" : ""}`}>
+						<AppMenu {...AppMenuProps}>{menu}</AppMenu>
+					</div>
+				</>
+			)}
+			{children}
+		</div>
+	);
+}

package/src/layout/AppMenu.css

@@ -0,0 +1,67 @@
+.AppMenu-header {
+	padding: 1rem;
+}
+
+.AppMenu-header .AppMenu-title {
+	font-weight: 500;
+	letter-spacing: -0.02rem;
+	font-size: var(--ds-font-size-xl, 1.5rem);
+	margin: 0;
+}
+
+.AppMenu-header .AppMenu-subTitle {
+	font-size: var(--ds-font-size-sm, 1.1rem);
+	margin: 0;
+	color: var(--ds-color-neutral-text-subtle, #555);
+}
+
+.AppMenu-divider {
+	border: none;
+	border-top: 1px solid var(--ds-color-neutral-border-default, #dfdfdf);
+	margin: 0;
+}
+
+.AppMenu-pendingCount {
+	color: var(--ds-color-neutral-text-subtle, #666) !important;
+	font-size: 0.8em;
+	font-weight: 700;
+	padding-right: 0.5rem;
+}
+
+.MenuItems-root {
+	overflow-y: auto;
+	scrollbar-width: thin;
+	scrollbar-color: var(--ds-color-neutral-border-default, #dfdfdf) transparent;
+}
+
+.MenuItems-root::-webkit-scrollbar {
+	width: 0.4rem;
+}
+
+.MenuItems-root::-webkit-scrollbar-button {
+	display: none;
+}
+
+.MenuItems-root::-webkit-scrollbar-thumb {
+	width: 0.4rem;
+	background-color: var(--ds-color-neutral-border-default, #dfdfdf);
+}
+
+.MenuItems-root .AppMenuList-nested .AppMenuItem-root {
+	padding-left: 3rem;
+	padding-block: 0.25rem;
+}
+
+.MenuItems-root .AppMenuList-nested .AppMenuItem-root .AppMenuItem-text {
+	font-size: 0.9rem;
+}
+
+.MenuItems-collapse {
+	margin-bottom: -0.5rem;
+	margin-top: -0.5rem;
+}
+
+.MenuItem-noWrap {
+	overflow: hidden;
+	white-space: nowrap;
+}

package/src/layout/AppMenu.tsx

@@ -0,0 +1,75 @@
+import "./AppMenu.css";
+
+import { getLocalizedString } from "@olenbetong/appframe-core";
+
+import clsx from "clsx";
+import type React from "react";
+
+type MenuHeaderProps = {
+	children?: React.ReactNode[] | React.ReactNode;
+	primary: string;
+	secondary?: string;
+};
+
+function MenuHeader({ primary, secondary }: MenuHeaderProps) {
+	return (
+		<>
+			<div className="AppMenu-header">
+				<h1 className="AppMenu-title" id="NavigationHeader">
+					{primary}
+				</h1>
+				{secondary && <p className="AppMenu-subTitle">{secondary}</p>}
+			</div>
+			<hr className="AppMenu-divider" />
+		</>
+	);
+}
+
+function handleKeyDown(evt: React.KeyboardEvent) {
+	let nextElement: Element | null | undefined = null;
+	let appMenu = evt.currentTarget;
+
+	if (!document.activeElement || !(appMenu instanceof HTMLElement) || !appMenu.contains(document.activeElement)) return;
+
+	let links = Array.from(appMenu.querySelectorAll<HTMLElement>("a, button"));
+	let currentIndex = links.indexOf(document.activeElement as HTMLElement);
+
+	if (evt.key === "ArrowDown" || evt.key === "ArrowRight") {
+		if (currentIndex < links.length) {
+			nextElement = links[currentIndex + 1];
+		}
+	} else if (evt.key === "ArrowUp" || evt.key === "ArrowLeft") {
+		if (currentIndex > 0) {
+			nextElement = links[currentIndex - 1];
+		}
+	} else if (evt.key === "Home" || evt.key === "End") {
+		nextElement = links.at(evt.key === "Home" ? 0 : -1);
+	}
+
+	if (nextElement instanceof HTMLElement) {
+		evt.preventDefault();
+		nextElement.scrollIntoView({ block: "nearest" });
+		nextElement.focus();
+	}
+}
+
+export type AppMenuProps = Pick<React.HTMLProps<HTMLElement>, "aria-label" | "aria-labelledby" | "className" | "id"> & {
+	children?: React.ReactNode[] | React.ReactNode;
+	headerPrimary?: string;
+	headerSecondary?: string;
+};
+
+export function AppMenu({ children, className, headerPrimary, headerSecondary, ...props }: AppMenuProps) {
+	return (
+		<nav
+			aria-labelledby={headerPrimary ? "NavigationHeader" : undefined}
+			aria-label={headerPrimary ? undefined : getLocalizedString("Application pages")}
+			className={clsx(className, "MenuItems-root")}
+			onKeyDown={handleKeyDown}
+			{...props}
+		>
+			{headerPrimary && <MenuHeader primary={headerPrimary} secondary={headerSecondary} />}
+			{children}
+		</nav>
+	);
+}

package/src/layout/AppMenuItem.css

@@ -0,0 +1,97 @@
+.AppMenuItem-root {
+	display: flex;
+	align-items: center;
+	position: relative;
+	border-radius: var(--ds-border-radius-md, 0.25rem);
+	overflow: hidden;
+	margin: 0.5rem;
+	padding: 0.5rem;
+	width: calc(100% - 1rem);
+	box-sizing: border-box;
+	text-decoration: none;
+	color: var(--ds-color-neutral-text-default, rgba(0, 0, 0, 0.87));
+	background: transparent;
+	border: none;
+	cursor: pointer;
+	font-family: inherit;
+	font-size: inherit;
+	text-align: left;
+}
+
+@media (pointer: fine) {
+	.AppMenuItem-root {
+		margin: 0.2rem 0.5rem;
+	}
+}
+
+.AppMenuItem-icon {
+	display: flex;
+	align-items: center;
+	min-width: 2.5rem;
+	color: inherit;
+	flex-shrink: 0;
+}
+
+.AppMenuItem-text {
+	flex: 1;
+	font-weight: 500;
+	color: var(--ds-color-neutral-text-default, rgba(0, 0, 0, 0.87));
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.AppMenuItem-info {
+	margin-left: auto;
+	flex-shrink: 0;
+}
+
+.AppMenuItem-root::before {
+	background-color: #000;
+	opacity: 0;
+	transition:
+		opacity 30ms linear,
+		background-color 30ms linear;
+	content: "";
+	position: absolute;
+	top: 0;
+	left: 0;
+	height: 100%;
+	width: 100%;
+	pointer-events: none;
+}
+
+.AppMenuItem-root:hover,
+.AppMenuItem-root:focus,
+.AppMenuItem-root:active {
+	text-decoration: none;
+	outline: none;
+}
+
+.AppMenuItem-root:hover::before {
+	opacity: 0.04;
+}
+
+.AppMenuItem-root:active::before {
+	opacity: 0.16;
+}
+
+.AppMenuItem-root.active::before,
+.AppMenuItem-root.active:hover::before {
+	background-color: var(--ds-color-brand-base-default, var(--brand-primary, #0062ba));
+	opacity: 0.16;
+}
+
+.AppMenuItem-root.active:hover::before {
+	opacity: 0.2;
+}
+
+.AppMenuItem-root.active:active::before {
+	opacity: 0.24;
+}
+
+.AppMenuItem-root.active .AppMenuItem-text,
+.AppMenuItem-root.active .AppMenuItem-icon {
+	color: var(--ds-color-brand-base-default, var(--brand-primary, #0062ba));
+}