@olenbetong/appframe-ds 0.9.0 → 1.0.0

package/src/page/PageHeader.tsx

@@ -4,10 +4,9 @@ import { getLocalizedString } from "@olenbetong/appframe-core";
 
 import clsx from "clsx";
 import type React from "react";
-import { useEffect, useRef, useState } from "react";
-import { useLocation } from "react-router";
 
-import { AppMenu, type AppMenuProps } from "../layout/AppMenu.js";
+import { type AppMenuProps } from "../layout/AppMenu.js";
+import { AppMenuDrawer, useAppMenuDrawer } from "../layout/AppMenuDrawer.js";
 import { PageBlock, type PageBlockWidth } from "./PageBlock.js";
 
 export type PageHeaderVariant = "appbar" | "plain";
@@ -57,64 +56,6 @@ export type PageHeaderProps = Omit<React.HTMLAttributes<HTMLElement>, "title"> &
 	variant?: PageHeaderVariant;
 };
 
-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;
-}
-
-type PageHeaderDrawerProps = {
-	AppMenuProps?: AppMenuProps;
-	menu: React.ReactNode;
-	onClose: () => void;
-	isMobile: boolean;
-	open: boolean;
-};
-
-function PageHeaderDrawer({ AppMenuProps, menu, onClose, isMobile, open }: PageHeaderDrawerProps) {
-	let location = useLocation();
-	let prevLocation = useRef(location);
-
-	useEffect(() => {
-		if (location !== prevLocation.current) {
-			prevLocation.current = location;
-			if (isMobile) onClose();
-		}
-	}, [location, isMobile, onClose]);
-
-	return (
-		<>
-			{isMobile && (
-				<div
-					className={clsx("ObPageHeader-drawerOverlay", open && "ObPageHeader-drawerOpen")}
-					onClick={onClose}
-					aria-hidden="true"
-				/>
-			)}
-			<div
-				className={clsx(
-					"ObPageHeader-drawer",
-					"AppMenu-drawer",
-					isMobile ? "ObPageHeader-drawerOverlayMode" : "ObPageHeader-drawerDocked",
-					open && "ObPageHeader-drawerOpen",
-				)}
-			>
-				<AppMenu {...AppMenuProps}>{menu}</AppMenu>
-			</div>
-		</>
-	);
-}
-
 /**
  * Page header for use inside `Page`. See the `variant` prop for the two
  * supported header styles.
@@ -131,12 +72,7 @@ export function PageHeader({
 	width,
 	...props
 }: PageHeaderProps) {
-	let isMobile = useIsMobile();
-	let [desktopOpen, setDesktopOpen] = useState(true);
-	let [mobileOpen, setMobileOpen] = useState(false);
-
-	let open = isMobile ? mobileOpen : desktopOpen;
-	let toggle = () => (isMobile ? setMobileOpen((o) => !o) : setDesktopOpen((o) => !o));
+	let { open, isMobile, toggle, close } = useAppMenuDrawer();
 
 	if (variant === "plain") {
 		return (
@@ -171,13 +107,9 @@ export function PageHeader({
 			</PageBlock>
 			{children}
 			{menu && (
-				<PageHeaderDrawer
-					AppMenuProps={AppMenuProps}
-					menu={menu}
-					onClose={() => setMobileOpen(false)}
-					isMobile={isMobile}
-					open={open}
-				/>
+				<AppMenuDrawer AppMenuProps={AppMenuProps} isMobile={isMobile} onClose={close} open={open}>
+					{menu}
+				</AppMenuDrawer>
 			)}
 		</header>
 	);

package/src/test/happy-dom-document-class.ts

@@ -0,0 +1,24 @@
+/**
+ * happy-dom exposes a `Document` constructor on the window that is *not* in the
+ * prototype chain of the actual `document` (which is an `HTMLDocument` built on
+ * happy-dom's internal `Document` class). `document instanceof Document` is
+ * therefore `false`, which is enough to hang libraries that walk up the tree
+ * until they reach the document — the `@oddbird/popover-polyfill` bundled into
+ * `@digdir/designsystemet-web` loops forever in `nearestInclusiveOpenPopover`,
+ * taking the whole worker with it.
+ *
+ * Point the global `Document` at the class the document really inherits from.
+ * Must run before anything that captures `Document`.
+ */
+export function fixHappyDomDocumentClass(): void {
+	if (typeof document === "undefined" || document instanceof Document) return;
+
+	for (let proto = Object.getPrototypeOf(document); proto; proto = Object.getPrototypeOf(proto)) {
+		let ctor = proto.constructor;
+		if (ctor?.name === "Document") {
+			globalThis.Document = ctor;
+			(globalThis as typeof globalThis & { window: typeof globalThis }).window.Document = ctor;
+			return;
+		}
+	}
+}

package/src/test/setup.ts

@@ -1,3 +1,7 @@
+import { fixHappyDomDocumentClass } from "./happy-dom-document-class.js";
+
+fixHappyDomDocumentClass();
+
 import "@testing-library/jest-dom/vitest";
 
 import { cleanup } from "@testing-library/react";

package/src/theme/useDsColorScheme.ts

@@ -0,0 +1,53 @@
+import { useEffect, useState } from "react";
+
+export function getDsColorScheme(element?: Element | null): "light" | "dark" {
+	let scoped = element?.closest<HTMLElement>("[data-color-scheme]");
+	let scheme =
+		scoped?.dataset.colorScheme ??
+		document.body?.dataset.colorScheme ??
+		document.documentElement?.dataset.colorScheme ??
+		"light";
+
+	if (scheme === "auto") {
+		return globalThis.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+	}
+
+	return scheme === "dark" ? "dark" : "light";
+}
+
+/**
+ * Tracks the color scheme Designsystemet is rendering with. The article template
+ * sets `data-color-scheme` on `<body>`, but it may also be scoped to a subtree,
+ * so resolve it from `element` upwards when one is given. The OS preference is
+ * watched too, since it decides the result when the scheme is `auto`.
+ */
+export function useDsColorScheme(element?: Element | null) {
+	let [scheme, setScheme] = useState<"light" | "dark">(() => getDsColorScheme(element));
+
+	useEffect(() => {
+		function update() {
+			setScheme(getDsColorScheme(element));
+		}
+
+		update();
+
+		// `data-color-scheme` may sit on any ancestor, so watch the whole document
+		// for that one attribute rather than just `<html>` and `<body>`.
+		let observer = new MutationObserver(update);
+		observer.observe(document.documentElement, {
+			attributes: true,
+			attributeFilter: ["data-color-scheme"],
+			subtree: true,
+		});
+
+		let media = globalThis.matchMedia?.("(prefers-color-scheme: dark)");
+		media?.addEventListener("change", update);
+
+		return () => {
+			observer.disconnect();
+			media?.removeEventListener("change", update);
+		};
+	}, [element]);
+
+	return scheme;
+}