@olenbetong/appframe-ds 1.6.0 → 1.7.0

package/src/layout/AppMenuDrawer.tsx

@@ -1,122 +1,122 @@
-import "./AppMenuDrawer.css";
-
-import clsx from "clsx";
-import type React from "react";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { useLocation } from "react-router";
-
-import { AppMenu, type AppMenuProps } from "./AppMenu.js";
-
-/** Below this width the drawer is an overlay rather than docked beside the content. */
-const MOBILE_QUERY = "(max-width: 1199px)";
-
-function useIsMobile() {
-	let [isMobile, setIsMobile] = useState(() => {
-		if (typeof window === "undefined") return false;
-		return window.matchMedia(MOBILE_QUERY).matches;
-	});
-
-	useEffect(() => {
-		let mq = window.matchMedia(MOBILE_QUERY);
-		let handler = (e: MediaQueryListEvent) => setIsMobile(e.matches);
-		mq.addEventListener("change", handler);
-		return () => mq.removeEventListener("change", handler);
-	}, []);
-
-	return isMobile;
-}
-
-export type AppMenuDrawerState = {
-	/** Whether the drawer is showing. Docked drawers start open, overlays start closed. */
-	open: boolean;
-	/** True while the drawer is an overlay rather than docked. */
-	isMobile: boolean;
-	toggle: () => void;
-	close: () => void;
-};
-
-/**
- * Open/closed state for an {@link AppMenuDrawer}, including the responsive behaviour: docked and
- * open by default on desktop, an overlay that starts closed on smaller screens.
- *
- * Exposed separately from the drawer so the toggle button can live somewhere else entirely —
- * an app on a site template that renders its own toolbar puts the toggle in that toolbar rather
- * than in a second one of its own.
- */
-export function useAppMenuDrawer(): AppMenuDrawerState {
-	let isMobile = useIsMobile();
-	let [desktopOpen, setDesktopOpen] = useState(true);
-	let [mobileOpen, setMobileOpen] = useState(false);
-
-	let toggle = useCallback(() => {
-		if (isMobile) {
-			setMobileOpen((open) => !open);
-		} else {
-			setDesktopOpen((open) => !open);
-		}
-	}, [isMobile]);
-
-	let close = useCallback(() => setMobileOpen(false), []);
-
-	return { open: isMobile ? mobileOpen : desktopOpen, isMobile, toggle, close };
-}
-
-export type AppMenuDrawerProps = {
-	/** Props for the `AppMenu` wrapping the items. */
-	AppMenuProps?: AppMenuProps;
-	/** Menu content — typically `AppMenuItem` and `AppMenuSubheader`. */
-	children: React.ReactNode;
-	isMobile: boolean;
-	onClose: () => void;
-	open: boolean;
-};
-
-/**
- * The app-navigation drawer: docked beside the content on desktop, an overlay on smaller
- * screens. Use it with {@link useAppMenuDrawer}.
- *
- * `Page.Header`'s `appbar` variant renders this for you along with a toggle and a title bar. Use
- * this component directly when the app must *not* render a bar of its own — for example on a site
- * template that already renders a toolbar, where an appbar would be a second one.
- *
- * It must be rendered inside `Page` for the docked drawer to offset the content (`Page.css`
- * matches on these class names). The drawer is `position: fixed` and starts at
- * `--ob-page-drawer-top`, which defaults to `0`; set that to the height of a site toolbar so the
- * drawer sits below it rather than over it.
- */
-export function AppMenuDrawer({ AppMenuProps, children, isMobile, onClose, open }: AppMenuDrawerProps) {
-	let location = useLocation();
-	let prevLocation = useRef(location);
-
-	// Following a link should dismiss an overlay; a docked drawer stays put.
-	useEffect(() => {
-		if (location !== prevLocation.current) {
-			prevLocation.current = location;
-			if (isMobile) onClose();
-		}
-	}, [location, isMobile, onClose]);
-
-	return (
-		<>
-			{isMobile && (
-				// oxlint-disable-next-line click-events-have-key-events -- Escape and the toggle
-				// both close the drawer; this is a pointer affordance for the scrim only.
-				<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}>{children}</AppMenu>
-			</div>
-		</>
-	);
-}
+import "./AppMenuDrawer.css";
+
+import clsx from "clsx";
+import type React from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useLocation } from "react-router";
+
+import { AppMenu, type AppMenuProps } from "./AppMenu.js";
+
+/** Below this width the drawer is an overlay rather than docked beside the content. */
+const MOBILE_QUERY = "(max-width: 1199px)";
+
+function useIsMobile() {
+	let [isMobile, setIsMobile] = useState(() => {
+		if (typeof window === "undefined") return false;
+		return window.matchMedia(MOBILE_QUERY).matches;
+	});
+
+	useEffect(() => {
+		let mq = window.matchMedia(MOBILE_QUERY);
+		let handler = (e: MediaQueryListEvent) => setIsMobile(e.matches);
+		mq.addEventListener("change", handler);
+		return () => mq.removeEventListener("change", handler);
+	}, []);
+
+	return isMobile;
+}
+
+export type AppMenuDrawerState = {
+	/** Whether the drawer is showing. Docked drawers start open, overlays start closed. */
+	open: boolean;
+	/** True while the drawer is an overlay rather than docked. */
+	isMobile: boolean;
+	toggle: () => void;
+	close: () => void;
+};
+
+/**
+ * Open/closed state for an {@link AppMenuDrawer}, including the responsive behaviour: docked and
+ * open by default on desktop, an overlay that starts closed on smaller screens.
+ *
+ * Exposed separately from the drawer so the toggle button can live somewhere else entirely —
+ * an app on a site template that renders its own toolbar puts the toggle in that toolbar rather
+ * than in a second one of its own.
+ */
+export function useAppMenuDrawer(): AppMenuDrawerState {
+	let isMobile = useIsMobile();
+	let [desktopOpen, setDesktopOpen] = useState(true);
+	let [mobileOpen, setMobileOpen] = useState(false);
+
+	let toggle = useCallback(() => {
+		if (isMobile) {
+			setMobileOpen((open) => !open);
+		} else {
+			setDesktopOpen((open) => !open);
+		}
+	}, [isMobile]);
+
+	let close = useCallback(() => setMobileOpen(false), []);
+
+	return { open: isMobile ? mobileOpen : desktopOpen, isMobile, toggle, close };
+}
+
+export type AppMenuDrawerProps = {
+	/** Props for the `AppMenu` wrapping the items. */
+	AppMenuProps?: AppMenuProps;
+	/** Menu content — typically `AppMenuItem` and `AppMenuSubheader`. */
+	children: React.ReactNode;
+	isMobile: boolean;
+	onClose: () => void;
+	open: boolean;
+};
+
+/**
+ * The app-navigation drawer: docked beside the content on desktop, an overlay on smaller
+ * screens. Use it with {@link useAppMenuDrawer}.
+ *
+ * `Page.Header`'s `appbar` variant renders this for you along with a toggle and a title bar. Use
+ * this component directly when the app must *not* render a bar of its own — for example on a site
+ * template that already renders a toolbar, where an appbar would be a second one.
+ *
+ * It must be rendered inside `Page` for the docked drawer to offset the content (`Page.css`
+ * matches on these class names). The drawer is `position: fixed` and starts at
+ * `--ob-page-drawer-top`, which defaults to `0`; set that to the height of a site toolbar so the
+ * drawer sits below it rather than over it.
+ */
+export function AppMenuDrawer({ AppMenuProps, children, isMobile, onClose, open }: AppMenuDrawerProps) {
+	let location = useLocation();
+	let prevLocation = useRef(location);
+
+	// Following a link should dismiss an overlay; a docked drawer stays put.
+	useEffect(() => {
+		if (location !== prevLocation.current) {
+			prevLocation.current = location;
+			if (isMobile) onClose();
+		}
+	}, [location, isMobile, onClose]);
+
+	return (
+		<>
+			{isMobile && (
+				// oxlint-disable-next-line click-events-have-key-events -- Escape and the toggle
+				// both close the drawer; this is a pointer affordance for the scrim only.
+				<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}>{children}</AppMenu>
+			</div>
+		</>
+	);
+}

package/src/layout/AppMenuItem.css

@@ -47,8 +47,12 @@
 	flex-shrink: 0;
 }
 
+/*
+ * Hover and press tint the item with the text colour, so it darkens the item in light mode and
+ * lightens it in dark mode; a black overlay disappeared on the dark menu.
+ */
 .AppMenuItem-root::before {
-	background-color: #000;
+	background-color: var(--ds-color-neutral-text-default, #000);
 	opacity: 0;
 	transition:
 		opacity 30ms linear,
@@ -70,7 +74,7 @@
 }
 
 .AppMenuItem-root:hover::before {
-	opacity: 0.04;
+	opacity: 0.08;
 }
 
 .AppMenuItem-root:active::before {

package/src/layout/DialogMotion.css

@@ -1,79 +1,79 @@
-/*
- * One open and close motion for every centred modal: Designsystemet's Dialog (the filter builder,
- * the site search, the report launcher and any app's own dialogs) and anything else that opts in
- * with the `ob-dialog-motion` class (the chrome's app menu, which is a plain <dialog>).
- *
- * Designsystemet animates the opening with keyframes only, 300 ms, and nothing on close. This
- * replaces that with transitions, so the close plays the same motion in reverse:
- *   - @starting-style gives the first frame after showModal() something to transition from;
- *   - `display` and `overlay` transition with `allow-discrete`, which keeps the dialog in the top
- *     layer until the fade out has finished after close().
- * Browsers without `overlay` (Firefox, Safari at the time of writing) still animate the opening
- * and close without the fade; nothing breaks.
- *
- * A dialog only fades out when it is closed with close() and stays mounted. One that React
- * removes on close disappears at once.
- *
- * Reduced motion keeps a short fade and drops the movement.
- */
-
-:root {
-	--ob-dialog-enter-duration: 180ms;
-	--ob-dialog-exit-duration: 140ms;
-	--ob-dialog-offset: 1rem;
-}
-
-@media (prefers-reduced-motion: reduce) {
-	:root {
-		--ob-dialog-offset: 0;
-	}
-}
-
-.ds-dialog:is(:not([data-placement]), [data-placement="center"]),
-.ob-dialog-motion {
-	opacity: 0;
-	translate: 0 var(--ob-dialog-offset);
-	transition-property: opacity, translate, overlay, display;
-	transition-duration: var(--ob-dialog-exit-duration);
-	transition-timing-function: ease-in;
-	transition-behavior: allow-discrete;
-
-	&[open] {
-		opacity: 1;
-		translate: 0 0;
-		/* Designsystemet's keyframes would play on top of the transition. */
-		animation: none;
-		transition-duration: var(--ob-dialog-enter-duration);
-		transition-timing-function: ease-out;
-
-		/*
-		 * Nested so it has exactly this rule's selector. A separate @starting-style rule for
-		 * `.ob-dialog-motion[open]` is less specific than this one, whose `:is()` takes the
-		 * specificity of `.ds-dialog:is(...)`, and loses to it: the dialog then has no
-		 * starting frame and appears without the transition.
-		 */
-		@starting-style {
-			opacity: 0;
-			translate: 0 var(--ob-dialog-offset);
-		}
-	}
-
-	&::backdrop {
-		opacity: 0;
-		animation: none;
-		transition-property: opacity, overlay, display;
-		transition-duration: var(--ob-dialog-exit-duration);
-		transition-timing-function: ease-in;
-		transition-behavior: allow-discrete;
-	}
-
-	&[open]::backdrop {
-		opacity: 1;
-		transition-duration: var(--ob-dialog-enter-duration);
-		transition-timing-function: ease-out;
-
-		@starting-style {
-			opacity: 0;
-		}
-	}
-}
+/*
+ * One open and close motion for every centred modal: Designsystemet's Dialog (the filter builder,
+ * the site search, the report launcher and any app's own dialogs) and anything else that opts in
+ * with the `ob-dialog-motion` class (the chrome's app menu, which is a plain <dialog>).
+ *
+ * Designsystemet animates the opening with keyframes only, 300 ms, and nothing on close. This
+ * replaces that with transitions, so the close plays the same motion in reverse:
+ *   - @starting-style gives the first frame after showModal() something to transition from;
+ *   - `display` and `overlay` transition with `allow-discrete`, which keeps the dialog in the top
+ *     layer until the fade out has finished after close().
+ * Browsers without `overlay` (Firefox, Safari at the time of writing) still animate the opening
+ * and close without the fade; nothing breaks.
+ *
+ * A dialog only fades out when it is closed with close() and stays mounted. One that React
+ * removes on close disappears at once.
+ *
+ * Reduced motion keeps a short fade and drops the movement.
+ */
+
+:root {
+	--ob-dialog-enter-duration: 180ms;
+	--ob-dialog-exit-duration: 140ms;
+	--ob-dialog-offset: 1rem;
+}
+
+@media (prefers-reduced-motion: reduce) {
+	:root {
+		--ob-dialog-offset: 0;
+	}
+}
+
+.ds-dialog:is(:not([data-placement]), [data-placement="center"]),
+.ob-dialog-motion {
+	opacity: 0;
+	translate: 0 var(--ob-dialog-offset);
+	transition-property: opacity, translate, overlay, display;
+	transition-duration: var(--ob-dialog-exit-duration);
+	transition-timing-function: ease-in;
+	transition-behavior: allow-discrete;
+
+	&[open] {
+		opacity: 1;
+		translate: 0 0;
+		/* Designsystemet's keyframes would play on top of the transition. */
+		animation: none;
+		transition-duration: var(--ob-dialog-enter-duration);
+		transition-timing-function: ease-out;
+
+		/*
+		 * Nested so it has exactly this rule's selector. A separate @starting-style rule for
+		 * `.ob-dialog-motion[open]` is less specific than this one, whose `:is()` takes the
+		 * specificity of `.ds-dialog:is(...)`, and loses to it: the dialog then has no
+		 * starting frame and appears without the transition.
+		 */
+		@starting-style {
+			opacity: 0;
+			translate: 0 var(--ob-dialog-offset);
+		}
+	}
+
+	&::backdrop {
+		opacity: 0;
+		animation: none;
+		transition-property: opacity, overlay, display;
+		transition-duration: var(--ob-dialog-exit-duration);
+		transition-timing-function: ease-in;
+		transition-behavior: allow-discrete;
+	}
+
+	&[open]::backdrop {
+		opacity: 1;
+		transition-duration: var(--ob-dialog-enter-duration);
+		transition-timing-function: ease-out;
+
+		@starting-style {
+			opacity: 0;
+		}
+	}
+}