@olenbetong/appframe-ds 1.4.1 → 1.6.0

package/src/grid/useAfKeepFocusAfterEdit.ts

@@ -0,0 +1,64 @@
+import { type GridApi, gridFocusCellSelector } from "@mui/x-data-grid-premium";
+
+import type React from "react";
+import { useEffect } from "react";
+
+/** How long after a row or cell changes mode a focus loss is still blamed on it. */
+const EDIT_STOP_WINDOW_MS = 1000;
+
+/**
+ * Keeps the keyboard focus in the grid when a row or cell enters or leaves edit mode.
+ *
+ * Two things drop the focus to `<body>`, after which the arrow keys scroll the page instead of
+ * moving between cells: when editing stops (Escape, Enter), the grid moves the focus from the
+ * editor back to the cell and Chrome then takes it from that cell with no script involved; and the
+ * edit, save and cancel buttons are removed while they have the focus. This puts the focus back on
+ * the cell the grid's own focus state points at - but only right after a mode change, and only
+ * when the focus was lost from that cell, so a click outside the grid (which clears that state)
+ * keeps the focus where it went.
+ */
+export function useAfKeepFocusAfterEdit(apiRef: React.RefObject<GridApi | null>) {
+	useEffect(() => {
+		let api = apiRef.current;
+		let root = api?.rootElementRef?.current;
+		if (!api || !root) return;
+
+		let lastModeChange = 0;
+		let markModeChange = () => {
+			lastModeChange = Date.now();
+		};
+
+		let handleFocusOut = (event: FocusEvent) => {
+			if (event.relatedTarget || Date.now() - lastModeChange > EDIT_STOP_WINDOW_MS) return;
+			let lostFrom = (event.target as HTMLElement).closest?.<HTMLElement>(".MuiDataGrid-row");
+			if (!lostFrom) return;
+
+			setTimeout(() => {
+				let doc = root.ownerDocument;
+				if (doc.activeElement !== doc.body) return;
+
+				// The focus state may have moved on to another cell of the same row (the save and
+				// cancel buttons move it to the actions cell), so restore whatever it points at.
+				let focused = gridFocusCellSelector(apiRef);
+				if (!focused || String(focused.id) !== lostFrom.dataset.id) return;
+
+				let cell = apiRef.current?.getCellElement(focused.id, focused.field);
+				if (!cell) return;
+
+				let target = cell.querySelector<HTMLElement>('[tabindex="0"]') ?? cell;
+				target.focus({ preventScroll: true });
+			}, 0);
+		};
+
+		let unsubscribers = [
+			api.subscribeEvent("rowModesModelChange", markModeChange),
+			api.subscribeEvent("cellModesModelChange", markModeChange),
+		];
+		root.addEventListener("focusout", handleFocusOut);
+
+		return () => {
+			for (let unsubscribe of unsubscribers) unsubscribe();
+			root.removeEventListener("focusout", handleFocusOut);
+		};
+	}, [apiRef]);
+}

package/src/input/InputAdornments.css

@@ -20,11 +20,7 @@
 	border-radius: var(--ds-border-radius-md, 0.375rem);
 }
 
-.ObInputAdornments-root[data-size="xs"] {
-	--obInputAdornments-padding: 0.125rem;
-	--obInputAdornments-fontSize: var(--ds-font-size-1, 0.75rem);
-}
-
+/* Designsystemet components come in sm, md and lg; xs and xl are typography-only sizes */
 .ObInputAdornments-root[data-size="sm"] {
 	--obInputAdornments-padding: 0.25rem;
 	--obInputAdornments-fontSize: var(--ds-font-size-2, 0.875rem);

package/src/input/NumberInput.css

@@ -0,0 +1,9 @@
+.ObNumberInput-root .ObInputAdornments-field {
+	/* Numbers read best right aligned, and the steppers sit at the end anyway */
+	text-align: end;
+	font-variant-numeric: tabular-nums;
+}
+
+.ObNumberInput-root .ObNumberInput-stepper {
+	flex-shrink: 0;
+}

package/src/input/NumberInput.test.tsx

@@ -0,0 +1,212 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { useState } from "react";
+import { describe, expect, it, vi } from "vitest";
+
+import { NumberInput, type NumberInputProps } from "./NumberInput.js";
+
+function Controlled({
+	initial = null,
+	onChange,
+	...props
+}: Partial<Omit<NumberInputProps, "value" | "onChange">> & {
+	initial?: number | null;
+	onChange?: (value: number | null) => void;
+}) {
+	let [value, setValue] = useState<number | null>(initial);
+
+	return (
+		<NumberInput
+			label="Hours"
+			{...props}
+			value={value}
+			onChange={(next) => {
+				setValue(next);
+				onChange?.(next);
+			}}
+		/>
+	);
+}
+
+describe("NumberInput", () => {
+	it("shows the value formatted with the fraction digits, in nb-NO without a session", () => {
+		render(<Controlled initial={8} />);
+
+		expect(screen.getByLabelText("Hours")).toHaveValue("8,00");
+	});
+
+	it("formats in the culture given", () => {
+		render(<Controlled initial={1234.5} culture="en-GB" />);
+
+		expect(screen.getByLabelText("Hours")).toHaveValue("1,234.50");
+	});
+
+	it("reads a period as the decimal separator for a Norwegian user too", async () => {
+		let onChange = vi.fn();
+		let user = userEvent.setup();
+		render(<Controlled initial={null} culture="nb-NO" onChange={onChange} />);
+
+		let input = screen.getByLabelText("Hours");
+		await user.type(input, "1.5");
+		expect(onChange).toHaveBeenLastCalledWith(1.5);
+
+		await user.tab();
+		expect(input).toHaveValue("1,50");
+	});
+
+	it("shows an empty input for null", () => {
+		render(<Controlled initial={null} />);
+
+		expect(screen.getByLabelText("Hours")).toHaveValue("");
+	});
+
+	it("parses typed text with either decimal separator", async () => {
+		let onChange = vi.fn();
+		let user = userEvent.setup();
+		render(<Controlled initial={null} onChange={onChange} />);
+
+		let input = screen.getByLabelText("Hours");
+		await user.type(input, "1,5");
+		expect(onChange).toHaveBeenLastCalledWith(1.5);
+		expect(input).toHaveValue("1,5");
+
+		await user.clear(input);
+		await user.type(input, "2.25");
+		expect(onChange).toHaveBeenLastCalledWith(2.25);
+	});
+
+	it("reports null when cleared and nothing while the text is incomplete", async () => {
+		let onChange = vi.fn();
+		let user = userEvent.setup();
+		render(<Controlled initial={3} onChange={onChange} />);
+
+		let input = screen.getByLabelText("Hours");
+		await user.clear(input);
+		expect(onChange).toHaveBeenLastCalledWith(null);
+
+		onChange.mockClear();
+		await user.type(input, "-");
+		expect(onChange).not.toHaveBeenCalled();
+	});
+
+	it("formats the value again on blur", async () => {
+		let user = userEvent.setup();
+		render(<Controlled initial={null} />);
+
+		let input = screen.getByLabelText("Hours");
+		await user.type(input, "1,5");
+		await user.tab();
+
+		expect(input).toHaveValue("1,50");
+	});
+
+	it("steps with the buttons, rounding to the fraction digits", async () => {
+		let onChange = vi.fn();
+		let user = userEvent.setup();
+		render(<Controlled initial={0.1} step={0.2} onChange={onChange} />);
+
+		await user.click(screen.getByRole("button", { name: "Increase value" }));
+		expect(onChange).toHaveBeenLastCalledWith(0.3);
+
+		await user.click(screen.getByRole("button", { name: "Decrease value" }));
+		await user.click(screen.getByRole("button", { name: "Decrease value" }));
+		expect(onChange).toHaveBeenLastCalledWith(-0.1);
+	});
+
+	it("steps from zero when empty", async () => {
+		let onChange = vi.fn();
+		let user = userEvent.setup();
+		render(<Controlled initial={null} step={0.25} onChange={onChange} />);
+
+		await user.click(screen.getByRole("button", { name: "Increase value" }));
+		expect(onChange).toHaveBeenLastCalledWith(0.25);
+	});
+
+	it("steps with the arrow keys and keeps the text selected", async () => {
+		let onChange = vi.fn();
+		let user = userEvent.setup();
+		render(<Controlled initial={1} onChange={onChange} />);
+
+		let input = screen.getByLabelText("Hours") as HTMLInputElement;
+		await user.click(input);
+		await user.keyboard("{ArrowUp}{ArrowUp}{ArrowDown}");
+
+		expect(onChange).toHaveBeenLastCalledWith(2);
+		expect(input).toHaveValue("2,00");
+	});
+
+	it("clamps typed and stepped values to min and max", async () => {
+		let onChange = vi.fn();
+		let user = userEvent.setup();
+		render(<Controlled initial={23} min={0} max={24} onChange={onChange} />);
+
+		let input = screen.getByLabelText("Hours");
+		await user.click(screen.getByRole("button", { name: "Increase value" }));
+		expect(onChange).toHaveBeenLastCalledWith(24);
+		expect(screen.getByRole("button", { name: "Increase value" })).toBeDisabled();
+
+		await user.clear(input);
+		await user.type(input, "30");
+		expect(onChange).toHaveBeenLastCalledWith(24);
+		expect(input).toHaveValue("24,00");
+
+		await user.clear(input);
+		await user.type(input, "-5");
+		expect(onChange).toHaveBeenLastCalledWith(0);
+	});
+
+	it("hides the steppers when read only, disabled or asked to", () => {
+		let { rerender } = render(<Controlled initial={1} readOnly />);
+		expect(screen.queryByRole("button")).toBeNull();
+
+		rerender(<Controlled initial={1} disabled />);
+		expect(screen.queryByRole("button")).toBeNull();
+
+		rerender(<Controlled initial={1} hideSteppers />);
+		expect(screen.queryByRole("button")).toBeNull();
+
+		rerender(<Controlled initial={1} />);
+		expect(screen.getAllByRole("button")).toHaveLength(2);
+	});
+
+	it("does not step a read only input from the keyboard", () => {
+		let onChange = vi.fn();
+		render(<Controlled initial={1} readOnly onChange={onChange} />);
+
+		fireEvent.keyDown(screen.getByLabelText("Hours"), { key: "ArrowUp" });
+		expect(onChange).not.toHaveBeenCalled();
+	});
+
+	it("shows the description and the error, and marks the input invalid", () => {
+		render(<Controlled initial={1} description="Including overtime" error="Too many hours" />);
+
+		expect(screen.getByText("Including overtime")).toBeInTheDocument();
+		expect(screen.getByText("Too many hours")).toBeInTheDocument();
+		expect(screen.getByLabelText("Hours")).toHaveAttribute("aria-invalid", "true");
+	});
+
+	it("shows a value changed from the outside while focused", async () => {
+		function Resettable() {
+			let [value, setValue] = useState<number | null>(5);
+			return (
+				<>
+					<NumberInput label="Hours" value={value} onChange={setValue} />
+					<button type="button" onClick={() => setValue(0)}>
+						Reset
+					</button>
+				</>
+			);
+		}
+
+		let user = userEvent.setup();
+		render(<Resettable />);
+
+		let input = screen.getByLabelText("Hours");
+		await user.click(input);
+		await user.keyboard("7");
+		expect(input).toHaveValue("7");
+
+		fireEvent.click(screen.getByRole("button", { name: "Reset" }));
+		expect(input).toHaveValue("0,00");
+	});
+});

package/src/input/NumberInput.tsx

@@ -0,0 +1,268 @@
+import "./NumberInput.css";
+
+import { Button, Field, Label, ValidationMessage } from "@digdir/designsystemet-react";
+import { MinusIcon, PlusIcon } from "@navikt/aksel-icons";
+import clsx from "clsx";
+import { type ReactNode, type Ref, useCallback, useEffect, useId, useRef, useState } from "react";
+
+import { InputAdornments, type InputAdornmentsProps } from "./InputAdornments.js";
+import { clamp, formatNumber, parseNumber, roundTo } from "./numberFormat.js";
+import { getLocalizedString } from "../i18n.js";
+
+export type NumberInputProps = Omit<
+	InputAdornmentsProps,
+	"value" | "defaultValue" | "onChange" | "type" | "children" | "min" | "max" | "step" | "inputMode" | "ref"
+> & {
+	/**
+	 * The number being edited. `null` renders an empty input.
+	 */
+	value: number | null | undefined;
+	/**
+	 * Called with the parsed number whenever the text in the input is a valid number, and with
+	 * `null` when the input is cleared. Not called while the text is incomplete (a lone `-`).
+	 */
+	onChange: (value: number | null) => void;
+	/**
+	 * Fraction digits shown and rounded to when stepping. Defaults to 2.
+	 */
+	decimalDigits?: number;
+	/**
+	 * BCP 47 culture the value is formatted in (`nb-NO` shows `8,00`, `en-GB` shows `8.00`).
+	 * Defaults to the Appframe session's culture, and to `nb-NO` when there is no session.
+	 * Typed text is parsed the same way whatever the culture: both `,` and `.` are decimal separators.
+	 */
+	culture?: string;
+	/**
+	 * Amount added or subtracted by the stepper buttons and the arrow keys. Defaults to 1.
+	 */
+	step?: number;
+	/**
+	 * Smallest allowed value. Typed and stepped values are clamped to it.
+	 */
+	min?: number;
+	/**
+	 * Largest allowed value. Typed and stepped values are clamped to it.
+	 */
+	max?: number;
+	label?: ReactNode;
+	description?: ReactNode;
+	/**
+	 * Error message shown below the input. Also marks the input invalid.
+	 */
+	error?: ReactNode;
+	/**
+	 * Hide the increment and decrement buttons. The arrow keys still step. The buttons are also
+	 * hidden when the input is disabled or read only.
+	 */
+	hideSteppers?: boolean;
+	/**
+	 * Ref to the input element.
+	 */
+	ref?: Ref<HTMLInputElement>;
+};
+
+/**
+ * A text input for editing a number, with stepper buttons and arrow key support. The number is
+ * shown formatted in the user's culture (`8,00`) and edited as text, so both `,` and `.` are
+ * accepted as the decimal separator. The whole value is selected when the input gets focus, so
+ * typing replaces it.
+ *
+ * `className` and `style` go on the `Field` wrapper, like Designsystemet's `Textfield`; the rest
+ * of the props go to the input.
+ *
+ * @example
+ * ```jsx
+ * <NumberInput label="Hours" value={hours} onChange={setHours} step={0.25} min={0} max={24} />
+ * ```
+ */
+export function NumberInput({
+	value,
+	onChange,
+	decimalDigits = 2,
+	culture,
+	step = 1,
+	min,
+	max,
+	label,
+	description,
+	error,
+	hideSteppers = false,
+	className,
+	style,
+	disabled,
+	readOnly,
+	onFocus,
+	onBlur,
+	onKeyDown,
+	ref,
+	"data-size": size,
+	"data-color": color,
+	id: idProp,
+	...props
+}: NumberInputProps) {
+	let generatedId = useId();
+	let id = idProp ?? generatedId;
+	let inputRef = useRef<HTMLInputElement | null>(null);
+	let [hasFocus, setHasFocus] = useState(false);
+	let [text, setText] = useState("");
+	/** The last value this input reported, so an outside change can be told from our own. */
+	let lastEmitted = useRef<number | null>(value ?? null);
+
+	let setRefs = useCallback(
+		(element: HTMLInputElement | null) => {
+			inputRef.current = element;
+			if (typeof ref === "function") {
+				ref(element);
+			} else if (ref) {
+				ref.current = element;
+			}
+		},
+		[ref],
+	);
+
+	function emit(next: number | null) {
+		lastEmitted.current = next;
+		onChange(next);
+	}
+
+	function editText(nextValue: number | null) {
+		setText(formatNumber(nextValue, { decimalDigits, culture }) ?? "");
+	}
+
+	function handleTextChange(raw: string) {
+		setText(raw);
+
+		let parsed = parseNumber(raw);
+		if (parsed === null) {
+			emit(null);
+			return;
+		}
+		if (Number.isNaN(parsed)) {
+			return;
+		}
+
+		let clamped = clamp(parsed, min, max);
+		if (clamped !== parsed) {
+			editText(clamped);
+		}
+		emit(clamped);
+	}
+
+	function addStep(delta: number) {
+		let current = hasFocus ? parseNumber(text) : (value ?? null);
+		if (current === null || Number.isNaN(current)) {
+			current = 0;
+		}
+
+		let next = roundTo(clamp(current + delta, min, max), decimalDigits);
+		editText(next);
+		emit(next);
+
+		let input = inputRef.current;
+		if (input && document.activeElement === input) {
+			setTimeout(() => input.select(), 0);
+		}
+	}
+
+	function handleFocus(event: React.FocusEvent<HTMLInputElement>) {
+		lastEmitted.current = value ?? null;
+		editText(value ?? null);
+		setHasFocus(true);
+		onFocus?.(event);
+	}
+
+	function handleBlur(event: React.FocusEvent<HTMLInputElement>) {
+		setHasFocus(false);
+		onBlur?.(event);
+	}
+
+	function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {
+		if (!readOnly && !disabled) {
+			if (event.key === "ArrowUp") {
+				event.preventDefault();
+				addStep(step);
+			} else if (event.key === "ArrowDown") {
+				event.preventDefault();
+				addStep(-step);
+			}
+		}
+		onKeyDown?.(event);
+	}
+
+	// Select the whole value when the input gets focus, so typing replaces it
+	useEffect(() => {
+		if (hasFocus) {
+			inputRef.current?.select();
+		}
+	}, [hasFocus]);
+
+	// The value changed from the outside while editing (cancel edit, a reset): show the new value
+	useEffect(() => {
+		if (hasFocus && (value ?? null) !== lastEmitted.current) {
+			lastEmitted.current = value ?? null;
+			setText(formatNumber(value, { decimalDigits, culture }) ?? "");
+		}
+	}, [value, hasFocus, decimalDigits, culture]);
+
+	let showSteppers = !hideSteppers && !disabled && !readOnly;
+	let current = value ?? null;
+	let atMin = current !== null && min !== undefined && current <= min;
+	let atMax = current !== null && max !== undefined && current >= max;
+
+	return (
+		<Field className={clsx("ObNumberInput-root", className)} style={style} data-size={size} data-color={color}>
+			{!!label && <Label htmlFor={id}>{label}</Label>}
+			{!!description && <Field.Description>{description}</Field.Description>}
+			<InputAdornments
+				{...props}
+				data-size={size}
+				data-color={color}
+				id={id}
+				ref={setRefs}
+				type="text"
+				inputMode="decimal"
+				autoComplete="off"
+				disabled={disabled}
+				readOnly={readOnly}
+				aria-invalid={error ? true : undefined}
+				value={hasFocus ? text : (formatNumber(value, { decimalDigits, culture, grouping: true }) ?? "")}
+				onChange={(event) => handleTextChange(event.target.value)}
+				onFocus={handleFocus}
+				onBlur={handleBlur}
+				onKeyDown={handleKeyDown}
+			>
+				{showSteppers && (
+					<>
+						<Button
+							icon
+							type="button"
+							variant="tertiary"
+							data-size="sm"
+							className="ObNumberInput-stepper"
+							tabIndex={-1}
+							disabled={atMin}
+							aria-label={getLocalizedString("Decrease value")}
+							onClick={() => addStep(-step)}
+						>
+							<MinusIcon aria-hidden />
+						</Button>
+						<Button
+							icon
+							type="button"
+							variant="tertiary"
+							data-size="sm"
+							className="ObNumberInput-stepper"
+							tabIndex={-1}
+							disabled={atMax}
+							aria-label={getLocalizedString("Increase value")}
+							onClick={() => addStep(step)}
+						>
+							<PlusIcon aria-hidden />
+						</Button>
+					</>
+				)}
+			</InputAdornments>
+			{!!error && <ValidationMessage>{error}</ValidationMessage>}
+		</Field>
+	);
+}

package/src/input/index.ts

@@ -1 +1,3 @@
 export * from "./InputAdornments.js";
+export * from "./NumberInput.js";
+export { formatNumber, getDefaultCulture, parseNumber, type FormatNumberOptions } from "./numberFormat.js";

package/src/input/numberFormat.test.ts

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