@olenbetong/appframe-ds 1.6.0 → 1.7.0

package/src/input/numberFormat.test.ts

@@ -1,79 +1,79 @@
-import { describe, expect, it } from "vitest";
-
-import { clamp, formatNumber, getDefaultCulture, parseNumber, roundTo } from "./numberFormat.js";
-
-describe("formatNumber", () => {
-	it("returns null for nothing", () => {
-		expect(formatNumber(null)).toBeNull();
-		expect(formatNumber(undefined)).toBeNull();
-		expect(formatNumber(Number.NaN)).toBeNull();
-	});
-
-	it("falls back to nb-NO when there is no Appframe session", () => {
-		expect(getDefaultCulture()).toBe("nb-NO");
-		expect(formatNumber(8)).toBe("8,00");
-	});
-
-	it("follows the culture given", () => {
-		expect(formatNumber(8, { culture: "en-GB" })).toBe("8.00");
-		expect(formatNumber(8, { culture: "de-DE" })).toBe("8,00");
-	});
-
-	it("pads and rounds to the fraction digits", () => {
-		expect(formatNumber(1.005, { decimalDigits: 0 })).toBe("1");
-		expect(formatNumber(1.5, { decimalDigits: 3 })).toBe("1,500");
-	});
-
-	it("leaves out thousands separators unless asked for them", () => {
-		expect(formatNumber(1234.5)).toBe("1234,50");
-		expect(formatNumber(1234.5, { culture: "en-GB" })).toBe("1234.50");
-		expect(formatNumber(1234.5, { culture: "en-GB", grouping: true })).toBe("1,234.50");
-		// nb-NO groups with a (narrow no-break) space
-		expect(formatNumber(1234.5, { grouping: true })).toMatch(/^1\s234,50$/);
-	});
-
-	it("round trips through parseNumber in any culture", () => {
-		expect(parseNumber(formatNumber(1234.5))).toBe(1234.5);
-		expect(parseNumber(formatNumber(1234.5, { culture: "en-GB" }))).toBe(1234.5);
-	});
-});
-
-describe("parseNumber", () => {
-	it("returns null for empty text", () => {
-		expect(parseNumber("")).toBeNull();
-		expect(parseNumber("   ")).toBeNull();
-		expect(parseNumber(null)).toBeNull();
-		expect(parseNumber(undefined)).toBeNull();
-	});
-
-	it("reads both comma and period as the decimal separator", () => {
-		expect(parseNumber("1,5")).toBe(1.5);
-		expect(parseNumber("1.5")).toBe(1.5);
-		expect(parseNumber("1,")).toBe(1);
-		expect(parseNumber(".5")).toBe(0.5);
-	});
-
-	it("accepts the typographic minus and ignores whitespace", () => {
-		expect(parseNumber("−2")).toBe(-2);
-		expect(parseNumber(" 1 234 ")).toBe(1234);
-	});
-
-	it("returns NaN for text that is not a number yet", () => {
-		expect(parseNumber("-")).toBeNaN();
-		expect(parseNumber("abc")).toBeNaN();
-	});
-});
-
-describe("roundTo and clamp", () => {
-	it("rounds away floating point noise", () => {
-		expect(roundTo(0.1 + 0.2, 2)).toBe(0.3);
-		expect(roundTo(2.675, 0)).toBe(3);
-	});
-
-	it("clamps only against the bounds given", () => {
-		expect(clamp(5)).toBe(5);
-		expect(clamp(5, 0, 3)).toBe(3);
-		expect(clamp(-1, 0)).toBe(0);
-		expect(clamp(2, undefined, 1)).toBe(1);
-	});
-});
+import { describe, expect, it } from "vitest";
+
+import { clamp, formatNumber, getDefaultCulture, parseNumber, roundTo } from "./numberFormat.js";
+
+describe("formatNumber", () => {
+	it("returns null for nothing", () => {
+		expect(formatNumber(null)).toBeNull();
+		expect(formatNumber(undefined)).toBeNull();
+		expect(formatNumber(Number.NaN)).toBeNull();
+	});
+
+	it("falls back to nb-NO when there is no Appframe session", () => {
+		expect(getDefaultCulture()).toBe("nb-NO");
+		expect(formatNumber(8)).toBe("8,00");
+	});
+
+	it("follows the culture given", () => {
+		expect(formatNumber(8, { culture: "en-GB" })).toBe("8.00");
+		expect(formatNumber(8, { culture: "de-DE" })).toBe("8,00");
+	});
+
+	it("pads and rounds to the fraction digits", () => {
+		expect(formatNumber(1.005, { decimalDigits: 0 })).toBe("1");
+		expect(formatNumber(1.5, { decimalDigits: 3 })).toBe("1,500");
+	});
+
+	it("leaves out thousands separators unless asked for them", () => {
+		expect(formatNumber(1234.5)).toBe("1234,50");
+		expect(formatNumber(1234.5, { culture: "en-GB" })).toBe("1234.50");
+		expect(formatNumber(1234.5, { culture: "en-GB", grouping: true })).toBe("1,234.50");
+		// nb-NO groups with a (narrow no-break) space
+		expect(formatNumber(1234.5, { grouping: true })).toMatch(/^1\s234,50$/);
+	});
+
+	it("round trips through parseNumber in any culture", () => {
+		expect(parseNumber(formatNumber(1234.5))).toBe(1234.5);
+		expect(parseNumber(formatNumber(1234.5, { culture: "en-GB" }))).toBe(1234.5);
+	});
+});
+
+describe("parseNumber", () => {
+	it("returns null for empty text", () => {
+		expect(parseNumber("")).toBeNull();
+		expect(parseNumber("   ")).toBeNull();
+		expect(parseNumber(null)).toBeNull();
+		expect(parseNumber(undefined)).toBeNull();
+	});
+
+	it("reads both comma and period as the decimal separator", () => {
+		expect(parseNumber("1,5")).toBe(1.5);
+		expect(parseNumber("1.5")).toBe(1.5);
+		expect(parseNumber("1,")).toBe(1);
+		expect(parseNumber(".5")).toBe(0.5);
+	});
+
+	it("accepts the typographic minus and ignores whitespace", () => {
+		expect(parseNumber("−2")).toBe(-2);
+		expect(parseNumber(" 1 234 ")).toBe(1234);
+	});
+
+	it("returns NaN for text that is not a number yet", () => {
+		expect(parseNumber("-")).toBeNaN();
+		expect(parseNumber("abc")).toBeNaN();
+	});
+});
+
+describe("roundTo and clamp", () => {
+	it("rounds away floating point noise", () => {
+		expect(roundTo(0.1 + 0.2, 2)).toBe(0.3);
+		expect(roundTo(2.675, 0)).toBe(3);
+	});
+
+	it("clamps only against the bounds given", () => {
+		expect(clamp(5)).toBe(5);
+		expect(clamp(5, 0, 3)).toBe(3);
+		expect(clamp(-1, 0)).toBe(0);
+		expect(clamp(2, undefined, 1)).toBe(1);
+	});
+});

package/src/input/numberFormat.ts

@@ -1,94 +1,94 @@
-/*
- * Culture-aware number formatting and parsing for inputs that edit a number as
- * text. Formatting follows the user's culture, read from the Appframe session
- * when the function runs so a page that sets it after this module loads still
- * formats correctly. Parsing is deliberately culture-agnostic: a Norwegian user
- * typing `1.5` means the same as `1,5`.
- */
-
-export const DEFAULT_CULTURE = "nb-NO";
-
-export type FormatNumberOptions = {
-	/**
-	 * Number of fraction digits, used as both minimum and maximum so `8` is
-	 * shown as `8,00`. Defaults to 2.
-	 */
-	decimalDigits?: number;
-	/**
-	 * Whether to use thousands separators. Off by default, since the result
-	 * is often fed back into `parseNumber`, which does not understand them.
-	 */
-	grouping?: boolean;
-	/**
-	 * BCP 47 culture to format in. Defaults to the Appframe session's culture,
-	 * and to `nb-NO` when there is no session (tests, Storybook).
-	 */
-	culture?: string;
-};
-
-const formatters = new Map<string, Intl.NumberFormat>();
-
-/**
- * The culture numbers are formatted in when none is given: the Appframe
- * session's, or `nb-NO` outside a session.
- */
-export function getDefaultCulture(): string {
-	return globalThis.af?.userSession?.culture ?? DEFAULT_CULTURE;
-}
-
-/**
- * Formats a number with a fixed number of fraction digits in the user's culture.
- * Returns `null` for `null`/`undefined` so the result can be fed straight into an input value.
- */
-export function formatNumber(value: number | null | undefined, options: FormatNumberOptions = {}): string | null {
-	if (value == null || Number.isNaN(value)) return null;
-
-	let decimalDigits = options.decimalDigits ?? 2;
-	let grouping = options.grouping ?? false;
-	let culture = options.culture ?? getDefaultCulture();
-	let key = `${culture}|${decimalDigits}|${grouping}`;
-	let formatter = formatters.get(key);
-
-	if (!formatter) {
-		formatter = new Intl.NumberFormat(culture, {
-			minimumFractionDigits: decimalDigits,
-			maximumFractionDigits: decimalDigits,
-			useGrouping: grouping,
-		});
-		formatters.set(key, formatter);
-	}
-
-	return formatter.format(value);
-}
-
-/**
- * Parses text typed by a user into a number, whatever their culture. Both `,`
- * and `.` are always read as the decimal separator (never as thousands
- * separators), whitespace is the only thousands separator understood
- * (`1 234,5`, including the no-break spaces `Intl` groups with), and the
- * typographic minus is accepted.
- *
- * Returns `null` for an empty string, and `NaN` for text that is not (yet) a
- * number, such as a lone `-`.
- */
-export function parseNumber(text: string | null | undefined): number | null {
-	if (text == null) return null;
-
-	let normalized = text.replace(/\s/g, "").replace("−", "-").replace(",", ".");
-	if (normalized === "") return null;
-
-	return Number(normalized);
-}
-
-/**
- * Rounds to a number of fraction digits, avoiding the floating point noise of
- * repeated additions (`0.1 + 0.2`).
- */
-export function roundTo(value: number, decimalDigits: number): number {
-	let factor = 10 ** decimalDigits;
-	return Math.round(value * factor) / factor;
-}
-
-export function clamp(value: number, min = Number.NEGATIVE_INFINITY, max = Number.POSITIVE_INFINITY): number {
-	return Math.min(Math.max(value, min), max);
-}
+/*
+ * Culture-aware number formatting and parsing for inputs that edit a number as
+ * text. Formatting follows the user's culture, read from the Appframe session
+ * when the function runs so a page that sets it after this module loads still
+ * formats correctly. Parsing is deliberately culture-agnostic: a Norwegian user
+ * typing `1.5` means the same as `1,5`.
+ */
+
+export const DEFAULT_CULTURE = "nb-NO";
+
+export type FormatNumberOptions = {
+	/**
+	 * Number of fraction digits, used as both minimum and maximum so `8` is
+	 * shown as `8,00`. Defaults to 2.
+	 */
+	decimalDigits?: number;
+	/**
+	 * Whether to use thousands separators. Off by default, since the result
+	 * is often fed back into `parseNumber`, which does not understand them.
+	 */
+	grouping?: boolean;
+	/**
+	 * BCP 47 culture to format in. Defaults to the Appframe session's culture,
+	 * and to `nb-NO` when there is no session (tests, Storybook).
+	 */
+	culture?: string;
+};
+
+const formatters = new Map<string, Intl.NumberFormat>();
+
+/**
+ * The culture numbers are formatted in when none is given: the Appframe
+ * session's, or `nb-NO` outside a session.
+ */
+export function getDefaultCulture(): string {
+	return globalThis.af?.userSession?.culture ?? DEFAULT_CULTURE;
+}
+
+/**
+ * Formats a number with a fixed number of fraction digits in the user's culture.
+ * Returns `null` for `null`/`undefined` so the result can be fed straight into an input value.
+ */
+export function formatNumber(value: number | null | undefined, options: FormatNumberOptions = {}): string | null {
+	if (value == null || Number.isNaN(value)) return null;
+
+	let decimalDigits = options.decimalDigits ?? 2;
+	let grouping = options.grouping ?? false;
+	let culture = options.culture ?? getDefaultCulture();
+	let key = `${culture}|${decimalDigits}|${grouping}`;
+	let formatter = formatters.get(key);
+
+	if (!formatter) {
+		formatter = new Intl.NumberFormat(culture, {
+			minimumFractionDigits: decimalDigits,
+			maximumFractionDigits: decimalDigits,
+			useGrouping: grouping,
+		});
+		formatters.set(key, formatter);
+	}
+
+	return formatter.format(value);
+}
+
+/**
+ * Parses text typed by a user into a number, whatever their culture. Both `,`
+ * and `.` are always read as the decimal separator (never as thousands
+ * separators), whitespace is the only thousands separator understood
+ * (`1 234,5`, including the no-break spaces `Intl` groups with), and the
+ * typographic minus is accepted.
+ *
+ * Returns `null` for an empty string, and `NaN` for text that is not (yet) a
+ * number, such as a lone `-`.
+ */
+export function parseNumber(text: string | null | undefined): number | null {
+	if (text == null) return null;
+
+	let normalized = text.replace(/\s/g, "").replace("−", "-").replace(",", ".");
+	if (normalized === "") return null;
+
+	return Number(normalized);
+}
+
+/**
+ * Rounds to a number of fraction digits, avoiding the floating point noise of
+ * repeated additions (`0.1 + 0.2`).
+ */
+export function roundTo(value: number, decimalDigits: number): number {
+	let factor = 10 ** decimalDigits;
+	return Math.round(value * factor) / factor;
+}
+
+export function clamp(value: number, min = Number.NEGATIVE_INFINITY, max = Number.POSITIVE_INFINITY): number {
+	return Math.min(Math.max(value, min), max);
+}

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

package/src/layout/AppMenuDrawer.css

@@ -1,71 +1,71 @@
-/* --- drawer --- */
-
-@media screen {
-	.ObPageHeader-drawer {
-		/*
-		 * Absolute, not fixed: the drawer belongs to the page, so it stays clear of any site
-		 * chrome rendered above the app. Raising z-index instead would put the menu over that
-		 * chrome and hide it, and #root often creates its own stacking context anyway.
-		 * Requires Page (which is position: relative); use layout="app" so it has a height.
-		 */
-		position: absolute;
-		top: 0;
-		left: 0;
-		bottom: 0;
-		width: var(--ob-page-drawer-width, 20rem);
-		max-width: 90%;
-		box-sizing: border-box;
-		background-color: var(--ds-color-neutral-background-default, #fff);
-		color: var(--ds-color-neutral-text-default, #1e2b3c);
-		transform: translateX(-100%);
-		/* Same timing as the content offset in Page.css, so the two edges move together. */
-		transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1);
-		overflow: hidden;
-		display: flex;
-		flex-direction: column;
-	}
-
-	.ObPageHeader-drawer > .MenuItems-root {
-		flex: 1 1 auto;
-		min-height: 0;
-	}
-
-	.ObPageHeader-drawer.ObPageHeader-drawerOpen {
-		transform: translateX(0);
-	}
-
-	.ObPageHeader-drawerDocked {
-		border-right: 1px solid var(--ds-color-neutral-border-subtle, #dfdfdf);
-		z-index: 1100;
-	}
-
-	.ObPageHeader-drawerOverlayMode {
-		z-index: 1200;
-		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;
-	}
-
-	.ObPageHeader-drawerOverlay {
-		position: absolute;
-		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);
-	}
-
-	.ObPageHeader-drawerOverlay.ObPageHeader-drawerOpen {
-		opacity: 1;
-		pointer-events: auto;
-	}
-}
-
-@media print {
-	.ObPageHeader-drawer,
-	.ObPageHeader-drawerOverlay {
-		display: none !important;
-	}
-}
+/* --- drawer --- */
+
+@media screen {
+	.ObPageHeader-drawer {
+		/*
+		 * Absolute, not fixed: the drawer belongs to the page, so it stays clear of any site
+		 * chrome rendered above the app. Raising z-index instead would put the menu over that
+		 * chrome and hide it, and #root often creates its own stacking context anyway.
+		 * Requires Page (which is position: relative); use layout="app" so it has a height.
+		 */
+		position: absolute;
+		top: 0;
+		left: 0;
+		bottom: 0;
+		width: var(--ob-page-drawer-width, 20rem);
+		max-width: 90%;
+		box-sizing: border-box;
+		background-color: var(--ds-color-neutral-background-default, #fff);
+		color: var(--ds-color-neutral-text-default, #1e2b3c);
+		transform: translateX(-100%);
+		/* Same timing as the content offset in Page.css, so the two edges move together. */
+		transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1);
+		overflow: hidden;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.ObPageHeader-drawer > .MenuItems-root {
+		flex: 1 1 auto;
+		min-height: 0;
+	}
+
+	.ObPageHeader-drawer.ObPageHeader-drawerOpen {
+		transform: translateX(0);
+	}
+
+	.ObPageHeader-drawerDocked {
+		border-right: 1px solid var(--ds-color-neutral-border-subtle, #dfdfdf);
+		z-index: 1100;
+	}
+
+	.ObPageHeader-drawerOverlayMode {
+		z-index: 1200;
+		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;
+	}
+
+	.ObPageHeader-drawerOverlay {
+		position: absolute;
+		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);
+	}
+
+	.ObPageHeader-drawerOverlay.ObPageHeader-drawerOpen {
+		opacity: 1;
+		pointer-events: auto;
+	}
+}
+
+@media print {
+	.ObPageHeader-drawer,
+	.ObPageHeader-drawerOverlay {
+		display: none !important;
+	}
+}