@olenbetong/appframe-ds 1.8.0 → 1.9.0

package/src/grid/Toolbar.tsx

@@ -7,9 +7,6 @@ import {
 } from "@mui/x-data-grid-premium";
 import {
 	ArrowsCirclepathIcon,
-	Density1Icon,
-	Density2Icon,
-	Density3Icon,
 	FileCsvIcon,
 	FileExcelIcon,
 	FilterIcon,
@@ -30,7 +27,7 @@ import { getLocalizedString } from "../i18n.js";
 
 export function GridToolbarAddButton({ onClick }: { onClick: () => void }) {
 	return (
-		<Button variant="tertiary" data-size="sm" onClick={onClick}>
+		<Button variant="tertiary" onClick={onClick}>
 			<PlusIcon aria-hidden />
 			{getLocalizedString("Add")}
 		</Button>
@@ -60,7 +57,6 @@ export function GridToolbarRefreshButton({ iconOnly }: GridToolbarIconOnlyProps
 	return (
 		<Button
 			variant="tertiary"
-			data-size="sm"
 			icon={iconOnly}
 			aria-label={iconOnly ? label : undefined}
 			title={iconOnly ? label : undefined}
@@ -79,7 +75,7 @@ export function GridToolbarColumnsButton() {
 	let { openColumnsPanel } = useAfGridContext();
 
 	return (
-		<Button variant="tertiary" data-size="sm" onClick={openColumnsPanel}>
+		<Button variant="tertiary" onClick={openColumnsPanel}>
 			<TableIcon aria-hidden />
 			{getLocalizedString("Columns")}
 		</Button>
@@ -98,8 +94,8 @@ export function GridToolbarFilterButton({ iconOnly }: GridToolbarIconOnlyProps =
 		let name = filterCount > 0 ? `${label} (${filterCount})` : label;
 		return (
 			<BadgePosition placement="top-right" overlap="circle">
-				{filterCount > 0 && <Badge data-color="brand" data-size="sm" count={filterCount} aria-hidden="true" />}
-				<Button variant="tertiary" data-size="sm" icon aria-label={name} title={name} onClick={openFilterBuilder}>
+				{filterCount > 0 && <Badge data-color="brand" count={filterCount} aria-hidden="true" />}
+				<Button variant="tertiary" icon aria-label={name} title={name} onClick={openFilterBuilder}>
 					<FilterIcon aria-hidden />
 				</Button>
 			</BadgePosition>
@@ -107,7 +103,7 @@ export function GridToolbarFilterButton({ iconOnly }: GridToolbarIconOnlyProps =
 	}
 
 	return (
-		<Button variant="tertiary" data-size="sm" onClick={openFilterBuilder}>
+		<Button variant="tertiary" onClick={openFilterBuilder}>
 			<FilterIcon aria-hidden />
 			{label}
 			{filterCount > 0 ? ` (${filterCount})` : ""}
@@ -123,7 +119,7 @@ export function GridToolbarResetLayoutButton() {
 	}
 
 	return (
-		<Button variant="tertiary" data-size="sm" onClick={handleReset}>
+		<Button variant="tertiary" onClick={handleReset}>
 			<ArrowsCirclepathIcon aria-hidden />
 			{getLocalizedString("Reset layout")}
 		</Button>
@@ -182,7 +178,7 @@ export function AfGridToolbarExcelExportButton({ fileName, title }: { fileName?:
 	let dataObject = useDataObject();
 
 	return (
-		<Button variant="tertiary" data-size="sm" onClick={() => handleExportToExcel(apiRef, dataObject, fileName, title)}>
+		<Button variant="tertiary" onClick={() => handleExportToExcel(apiRef, dataObject, fileName, title)}>
 			<FileExcelIcon aria-hidden />
 			{getLocalizedString("Export")}
 		</Button>
@@ -195,7 +191,7 @@ export type GridToolbarMoreOptionsButtonProps = React.PropsWithChildren<{
 }>;
 
 /**
- * The toolbar's "more" menu: exports, density and layout reset. `children` are extra
+ * The toolbar's "more" menu: exports and layout reset. `children` are extra
  * `Dropdown.Item`s placed first. The menu closes when an item is chosen.
  */
 export function GridToolbarMoreOptionsButton({ showColumns, children }: GridToolbarMoreOptionsButtonProps = {}) {
@@ -208,19 +204,12 @@ export function GridToolbarMoreOptionsButton({ showColumns, children }: GridTool
 			<Dropdown.Trigger
 				variant="tertiary"
 				icon
-				data-size="sm"
 				aria-label={getLocalizedString("More options")}
 				title={getLocalizedString("More options")}
 			>
 				<MenuElipsisVerticalIcon aria-hidden />
 			</Dropdown.Trigger>
-			<Dropdown
-				open={open}
-				onOpen={() => setOpen(true)}
-				onClose={() => setOpen(false)}
-				placement="bottom-end"
-				data-size="sm"
-			>
+			<Dropdown open={open} onOpen={() => setOpen(true)} onClose={() => setOpen(false)} placement="bottom-end">
 				<Dropdown.List
 					onClick={(event) => {
 						if ((event.target as HTMLElement).closest("button, a")) setOpen(false);
@@ -242,24 +231,6 @@ export function GridToolbarMoreOptionsButton({ showColumns, children }: GridTool
 						</Dropdown.Button>
 					</Dropdown.Item>
 					<AfGridExcelExportMenuItem />
-					<Dropdown.Item>
-						<Dropdown.Button onClick={() => apiRef.current.setDensity("compact")}>
-							<Density1Icon aria-hidden />
-							{getLocalizedString("Compact")}
-						</Dropdown.Button>
-					</Dropdown.Item>
-					<Dropdown.Item>
-						<Dropdown.Button onClick={() => apiRef.current.setDensity("standard")}>
-							<Density2Icon aria-hidden />
-							{getLocalizedString("Standard")}
-						</Dropdown.Button>
-					</Dropdown.Item>
-					<Dropdown.Item>
-						<Dropdown.Button onClick={() => apiRef.current.setDensity("comfortable")}>
-							<Density3Icon aria-hidden />
-							{getLocalizedString("Comfortable")}
-						</Dropdown.Button>
-					</Dropdown.Item>
 					<Dropdown.Item>
 						<Dropdown.Button onClick={() => (apiRef.current as AfGridApi).resetLayout?.()}>
 							<ArrowsCirclepathIcon aria-hidden />

package/src/grid/index.css

@@ -2,6 +2,50 @@
 	height: 100%;
 }
 
+/*
+ * The grid follows the Designsystemet size mode it sits in instead of MUI's density and type
+ * scale: its text is the size mode's body text, like the inputs around it, and its row and header
+ * heights come from the same mode (`useAfSizeMode`).
+ */
+.AfGrid-root .MuiDataGrid-root {
+	font-size: inherit;
+}
+
+/*
+ * The footer is MUI's own, with a 52px minimum height and pagination text in MUI's type scale; it
+ * is as tall as a control and its text is the grid's.
+ */
+.AfGrid-root {
+	.MuiDataGrid-footerContainer,
+	.MuiTablePagination-toolbar {
+		min-height: var(--ds-size-12, 52px);
+	}
+
+	.MuiTablePagination-root,
+	.MuiTablePagination-selectLabel,
+	.MuiTablePagination-displayedRows {
+		font-size: inherit;
+	}
+}
+
+/*
+ * Controls in a data cell - editors, lookup buttons, the row's action buttons - fit the row, which
+ * is `--ds-size-10` tall, rather than taking Designsystemet's `--ds-size-12` control height, which
+ * would overflow it at every size. The custom properties are set on the components themselves,
+ * so they are overridden there and not on the cell.
+ */
+.AfGrid-root .MuiDataGrid-cell {
+	.ds-input {
+		--dsc-input-size: var(--ds-size-10, 2.25rem);
+		--dsc-input-padding-block: 0;
+	}
+
+	.ds-button {
+		--dsc-button-size: var(--ds-size-8, 2rem);
+		--dsc-button-padding: 0 var(--ds-size-2, 0.5rem);
+	}
+}
+
 .AfGrid-loading {
 	display: flex;
 	align-items: center;

package/src/grid/index.tsx

@@ -20,7 +20,7 @@ import { type DataObject, uid } from "@olenbetong/appframe-data";
 import { DataObjectProvider, useLoading } from "@olenbetong/appframe-react";
 
 import clsx from "clsx";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { FilterBuilder } from "../filter/index.js";
 import { AfGridColumnsPanel } from "./AfGridColumnsPanel.js";
 import { AfHeaderFilterCell } from "./AfHeaderFilterCell.js";
@@ -67,6 +67,7 @@ import { useAfKeepFocusAfterEdit } from "./useAfKeepFocusAfterEdit.js";
 import { useAfRowEditModel } from "./useAfRowEditModel.js";
 import { useAfRowGrouping } from "./useAfRowGrouping.js";
 import { useAfServerAggregation } from "./useAfServerAggregation.js";
+import { useAfSizeMode } from "./useAfSizeMode.js";
 import { useAfSortModel } from "./useAfSortModel.js";
 import { getLocalizedString } from "../i18n.js";
 
@@ -442,6 +443,8 @@ function AfGrid_(props: AfGridProps) {
 	let filterFields = useAfFilterFields(dataObject, columnsProp);
 
 	let keyEvents = useAfKeyBindings({ apiRef, dataObject });
+	let rootRef = useRef<HTMLDivElement>(null);
+	let sizeMode = useAfSizeMode(rootRef);
 
 	useEffect(() => {
 		if (!snackbar) return;
@@ -499,7 +502,7 @@ function AfGrid_(props: AfGridProps) {
 	return (
 		<DataObjectProvider dataObject={dataObject}>
 			<AfGridContextProvider value={gridContext}>
-				<div className="AfGrid-root" style={newItemRow.rootStyle} {...keyEvents} tabIndex={-1}>
+				<div ref={rootRef} className="AfGrid-root" style={newItemRow.rootStyle} {...keyEvents} tabIndex={-1}>
 					<DataGrid
 						apiRef={apiRef}
 						rows={data}
@@ -519,7 +522,13 @@ function AfGrid_(props: AfGridProps) {
 						headerFilters
 						{...paging}
 						showToolbar
+						{...sizeMode}
 						{...other}
+						/*
+						 * The size mode sets the row height (`useAfSizeMode`), so MUI's density stays at the
+						 * standard factor of 1 and is not offered or restored.
+						 */
+						density="standard"
 						{...grouping.gridProps}
 						/*
 						 * Spread rather than passed, because the grid merges props over its defaults with
@@ -580,7 +589,7 @@ function AfGrid_(props: AfGridProps) {
 				/>
 				{!!snackbar && (
 					<div className="AfGrid-snackbar">
-						<Alert data-color="danger" data-size="sm" onClick={() => setSnackbar(null)}>
+						<Alert data-color="danger" onClick={() => setSnackbar(null)}>
 							{snackbar}
 						</Alert>
 					</div>

package/src/grid/slots/index.tsx

@@ -17,22 +17,11 @@ import type { GridSlotProps, GridSlotsComponent } from "@mui/x-data-grid-premium
 import clsx from "clsx";
 import { type Ref, useCallback } from "react";
 
-type DsSize = "2xs" | "xs" | "sm" | "md" | "lg";
-
-/**
- * Maps the MUI slot sizes onto the Designsystemet size tokens. The grid only
- * ever asks for `small` or `medium`, but the toolbar buttons also allow `large`.
+/*
+ * The slots take no size from MUI's `size` prop: they inherit the Designsystemet size mode the
+ * grid sits in, like everything else on the page. Only the spinner's `data-size` is kept, which
+ * picks the spinner's own size rather than the mode.
  */
-function dsSize(size?: "small" | "medium" | "large"): DsSize {
-	switch (size) {
-		case "small":
-			return "sm";
-		case "large":
-			return "lg";
-		default:
-			return "sm";
-	}
-}
 
 /**
  * The grid passes `title` as a `ReactNode`, but Designsystemet's tooltip only
@@ -47,7 +36,7 @@ function BaseCheckbox(props: GridSlotProps["baseCheckbox"]) {
 		indeterminate,
 		inputRef,
 		label,
-		size,
+		size: _size,
 		density: _density,
 		fullWidth: _fullWidth,
 		touchRippleRef: _touchRippleRef,
@@ -79,7 +68,6 @@ function BaseCheckbox(props: GridSlotProps["baseCheckbox"]) {
 			{...slotProps?.htmlInput}
 			ref={ref}
 			className={clsx("AfGrid-checkbox", className)}
-			data-size={dsSize(size)}
 			label={label}
 			aria-label={label ? undefined : ((other as any)["aria-label"] ?? "")}
 		/>
@@ -87,10 +75,10 @@ function BaseCheckbox(props: GridSlotProps["baseCheckbox"]) {
 }
 
 function BaseButton(props: GridSlotProps["baseButton"]) {
-	let { children, size, startIcon, touchRippleRef: _touchRippleRef, ...other } = props;
+	let { children, size: _size, startIcon, touchRippleRef: _touchRippleRef, ...other } = props;
 
 	return (
-		<Button {...(other as any)} variant="tertiary" data-size={dsSize(size)}>
+		<Button {...(other as any)} variant="tertiary">
 			{startIcon}
 			{children}
 		</Button>
@@ -98,17 +86,11 @@ function BaseButton(props: GridSlotProps["baseButton"]) {
 }
 
 function BaseIconButton(props: GridSlotProps["baseIconButton"]) {
-	let { children, size, label, color: _color, edge: _edge, touchRippleRef: _touchRippleRef, ...other } = props;
+	let { children, size: _size, label, color: _color, edge: _edge, touchRippleRef: _touchRippleRef, ...other } = props;
 
 	// `GridActionsCellItem` names its button through `aria-label`, not `label`; keep it
 	return (
-		<Button
-			{...(other as any)}
-			icon
-			variant="tertiary"
-			data-size={dsSize(size)}
-			aria-label={label ?? (other as any)["aria-label"]}
-		>
+		<Button {...(other as any)} icon variant="tertiary" aria-label={label ?? (other as any)["aria-label"]}>
 			{children}
 		</Button>
 	);
@@ -157,7 +139,7 @@ function BaseTooltip(props: GridSlotProps["baseTooltip"]) {
 function BaseTextField(props: GridSlotProps["baseTextField"]) {
 	let {
 		inputRef,
-		size,
+		size: _size,
 		error,
 		helperText,
 		slotProps,
@@ -173,7 +155,6 @@ function BaseTextField(props: GridSlotProps["baseTextField"]) {
 			{...slotProps?.htmlInput}
 			ref={inputRef as Ref<HTMLInputElement>}
 			className={clsx("AfGrid-textField", className)}
-			data-size={dsSize(size)}
 			error={error ? helperText : undefined}
 			aria-label={other.label ? undefined : ((other as any)["aria-label"] ?? "")}
 		/>
@@ -183,7 +164,7 @@ function BaseTextField(props: GridSlotProps["baseTextField"]) {
 function BaseSelect(props: GridSlotProps["baseSelect"]) {
 	let {
 		children,
-		size,
+		size: _size,
 		label,
 		labelId: _labelId,
 		native: _native,
@@ -201,7 +182,6 @@ function BaseSelect(props: GridSlotProps["baseSelect"]) {
 			{...(other as any)}
 			{...slotProps?.htmlInput}
 			className={clsx("AfGrid-select", className)}
-			data-size={dsSize(size)}
 			aria-label={typeof label === "string" ? label : ((other as any)["aria-label"] ?? "")}
 		>
 			{children}
@@ -216,23 +196,18 @@ function BaseSelectOption(props: GridSlotProps["baseSelectOption"]) {
 }
 
 function BaseSwitch(props: GridSlotProps["baseSwitch"]) {
-	let { size, label, ...other } = props;
+	let { size: _size, label, ...other } = props;
 
 	return (
-		<Switch
-			{...(other as any)}
-			data-size={dsSize(size)}
-			label={label}
-			aria-label={label ? undefined : ((other as any)["aria-label"] ?? "")}
-		/>
+		<Switch {...(other as any)} label={label} aria-label={label ? undefined : ((other as any)["aria-label"] ?? "")} />
 	);
 }
 
 function BaseChip(props: GridSlotProps["baseChip"]) {
-	let { label, size, icon, variant, children: _children, ...other } = props;
+	let { label, size: _size, icon, variant, children: _children, ...other } = props;
 
 	return (
-		<Tag {...(other as any)} data-size={dsSize(size)} variant={variant === "outlined" ? "outline" : "default"}>
+		<Tag {...(other as any)} variant={variant === "outlined" ? "outline" : "default"}>
 			{icon}
 			{label}
 		</Tag>

package/src/grid/useAfGridApi.ts

@@ -52,7 +52,6 @@ export function useAfGridApi(props: Partial<AfGridProps>, apiRef: React.RefObjec
 				});
 			}
 
-			apiRef.current?.setDensity(propsRef.current.initialState?.density ?? "compact");
 			apiRef.current?.setPageSize(propsRef.current.dataObject.options.parameters.maxRecords ?? 100);
 			apiRef.current?.setSortModel(
 				afSortOrderToMuiSortModel(

package/src/grid/useAfPersistedState.ts

@@ -47,10 +47,8 @@ function removeNonPersistedState(state: GridInitialState, config?: StatePersiste
 	let pagination: GridInitialState["pagination"] = { paginationModel: {} };
 	let sorting: GridInitialState["sorting"] = {};
 
-	// Persist the relevant state unless explicitly disabled in the config
-	if (config?.density !== false) {
-		newState.density = state.density;
-	}
+	// Persist the relevant state unless explicitly disabled in the config. Not the density: the
+	// size mode sets the row height, and the grid stays at the standard density.
 	if (config?.pinnedColumns !== false) {
 		newState.pinnedColumns = state.pinnedColumns;
 	}
@@ -108,10 +106,7 @@ function getInitialState({ columns, persistenceModel, id, initialState, layoutVe
 	let state: GridInitialState =
 		persistedState?.layoutVersion === layoutVersion
 			? removeNonPersistedState(persistedState.state, persistenceModel)
-			: {
-					density: "compact",
-					...initialState,
-				};
+			: { ...initialState };
 
 	if (!state.columns) {
 		state.columns = {};
@@ -173,6 +168,7 @@ setTimeout(() => {
 
 export type StatePersistenceConfig = {
 	aggregation?: boolean;
+	/** @deprecated The size mode sets the row height, and the density is no longer persisted. */
 	density?: boolean;
 	pinnedColumns?: boolean;
 	rowGrouping?: boolean;

package/src/grid/useAfSizeMode.ts

@@ -0,0 +1,19 @@
+import type { RefObject } from "react";
+
+import { useDsSize } from "../theme/sizeMode.js";
+
+/** MUI's compact row height, the grid's look before it followed the size mode. */
+const FALLBACK_HEIGHT = 36;
+
+/**
+ * Row and header heights from the Designsystemet size mode the grid sits in, in place of MUI's
+ * density: `--ds-size-10`, which is 25px at xs, 31px at sm, 35px at md and 41px at lg with the
+ * site's 14px root. The grid renders at the standard density, so these are the heights as they
+ * are. The text, toolbar and footer follow the same size mode through the stylesheet and by
+ * inheriting `data-size`.
+ */
+export function useAfSizeMode(rootRef: RefObject<HTMLElement | null>) {
+	let height = useDsSize(rootRef, 10, FALLBACK_HEIGHT);
+
+	return { rowHeight: height, columnHeaderHeight: height };
+}

package/src/i18n.ts

@@ -1,13 +1,13 @@
-/*
- * The package's strings live in their own globalization project, `appframe-ds`, so one
- * translation covers every app and the package can word a term its own way. The templates
- * render the dictionary as af.i18n["appframe-ds"]; on a page that does not (a legacy
- * template) the localizer falls back to the article's strings, exactly as before. See
- * `createLocalizer` in @olenbetong/appframe-core.
- */
-
-import { createLocalizer } from "@olenbetong/appframe-core";
-
-export const PROJECT = "appframe-ds";
-
-export const { getLocalizedString, localize } = createLocalizer(PROJECT);
+/*
+ * The package's strings live in their own globalization project, `appframe-ds`, so one
+ * translation covers every app and the package can word a term its own way. The templates
+ * render the dictionary as af.i18n["appframe-ds"]; on a page that does not (a legacy
+ * template) the localizer falls back to the article's strings, exactly as before. See
+ * `createLocalizer` in @olenbetong/appframe-core.
+ */
+
+import { createLocalizer } from "@olenbetong/appframe-core";
+
+export const PROJECT = "appframe-ds";
+
+export const { getLocalizedString, localize } = createLocalizer(PROJECT);

package/src/index.ts

@@ -1,14 +1,14 @@
-export * from "./AfLookup/index.js";
-export * from "./autocomplete/index.js";
-export * from "./binding/index.js";
-export * from "./container/index.js";
-export * from "./cutoff/index.js";
-export * from "./filter/index.js";
-export * from "./input/index.js";
-export * from "./layout/index.js";
-export * from "./link/index.js";
-export * from "./list/index.js";
-export * from "./page/index.js";
-export * from "./paper/index.js";
-export * from "./progress/index.js";
-export * from "./sortable/index.js";
+export * from "./AfLookup/index.js";
+export * from "./autocomplete/index.js";
+export * from "./binding/index.js";
+export * from "./container/index.js";
+export * from "./cutoff/index.js";
+export * from "./filter/index.js";
+export * from "./input/index.js";
+export * from "./layout/index.js";
+export * from "./link/index.js";
+export * from "./list/index.js";
+export * from "./page/index.js";
+export * from "./paper/index.js";
+export * from "./progress/index.js";
+export * from "./sortable/index.js";

package/src/input/NumberInput.tsx

@@ -237,7 +237,6 @@ export function NumberInput({
 							icon
 							type="button"
 							variant="tertiary"
-							data-size="sm"
 							className="ObNumberInput-stepper"
 							tabIndex={-1}
 							disabled={atMin}
@@ -250,7 +249,6 @@ export function NumberInput({
 							icon
 							type="button"
 							variant="tertiary"
-							data-size="sm"
 							className="ObNumberInput-stepper"
 							tabIndex={-1}
 							disabled={atMax}

package/src/layout/AppMenu.tsx

@@ -1,74 +1,74 @@
-import "./AppMenu.css";
-
-import clsx from "clsx";
-import type React from "react";
-import { getLocalizedString } from "../i18n.js";
-
-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>
-	);
-}
+import "./AppMenu.css";
+
+import clsx from "clsx";
+import type React from "react";
+import { getLocalizedString } from "../i18n.js";
+
+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>
+	);
+}