@olenbetong/appframe-ds 1.5.0 → 1.6.1

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/InputAdornments.css

@@ -1,84 +1,80 @@
-/*
- * The wrapper is the visual input: it owns the border, background, hover and
- * focus styling, while the inner Designsystemet input is rendered bare so the
- * input and the adornments read as a single control.
- */
-.ObInputAdornments-root {
-	--obInputAdornments-padding: 0.25rem;
-	--obInputAdornments-gap: 0.25rem;
-	--obInputAdornments-fontSize: var(--ds-font-size-3, 1rem);
-
-	display: flex;
-	align-items: center;
-	box-sizing: border-box;
-	gap: var(--obInputAdornments-gap);
-	padding: var(--obInputAdornments-padding);
-	inline-size: 100%;
-	color: var(--ds-color-neutral-text-default, #1e2b3c);
-	background-color: var(--ds-color-neutral-surface-default, #fff);
-	border: var(--ds-border-width-default, 1px) solid var(--ds-color-neutral-border-default, #b3b3b3);
-	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);
-}
-
-.ObInputAdornments-root[data-size="sm"] {
-	--obInputAdornments-padding: 0.25rem;
-	--obInputAdornments-fontSize: var(--ds-font-size-2, 0.875rem);
-}
-
-.ObInputAdornments-root[data-size="md"] {
-	--obInputAdornments-padding: 0.25rem;
-	--obInputAdornments-fontSize: var(--ds-font-size-3, 1rem);
-}
-
-.ObInputAdornments-root[data-size="lg"] {
-	--obInputAdornments-padding: 0.375rem;
-	--obInputAdornments-fontSize: var(--ds-font-size-4, 1.125rem);
-}
-
-/* The Designsystemet input hover (an inner outline doubling the border), drawn on the wrapper */
-.ObInputAdornments-root:hover:not(
-		:focus-within,
-		:has(.ObInputAdornments-field:disabled, .ObInputAdornments-field[readonly])
-	) {
-	outline: var(--ds-border-width-default, 1px) solid var(--ds-color-neutral-border-default, #b3b3b3);
-	outline-offset: -0.1px;
-}
-
-.ObInputAdornments-root:has(.ObInputAdornments-field:focus-visible) {
-	box-shadow: var(--dsc-focus-boxShadow);
-	outline: var(--dsc-focus-outline);
-	outline-offset: var(--ds-border-width-focus, 3px);
-}
-
-.ObInputAdornments-root:has(.ObInputAdornments-field:disabled) {
-	cursor: not-allowed;
-	opacity: var(--ds-disabled-opacity, 0.3);
-}
-
-/* The bare input: all the visual styling lives on the wrapper instead */
-.ObInputAdornments-root .ObInputAdornments-field {
-	flex: 1;
-	min-inline-size: 0;
-	font-size: var(--obInputAdornments-fontSize);
-	background: transparent;
-	border: none;
-}
-
-.ObInputAdornments-root .ObInputAdornments-field:disabled {
-	opacity: 1;
-}
-
-.ObInputAdornments-root .ObInputAdornments-field:hover {
-	outline: none;
-}
-
-.ObInputAdornments-root .ObInputAdornments-field:focus-visible {
-	box-shadow: none;
-	outline: none;
-	outline-offset: 0;
-}
+/*
+ * The wrapper is the visual input: it owns the border, background, hover and
+ * focus styling, while the inner Designsystemet input is rendered bare so the
+ * input and the adornments read as a single control.
+ */
+.ObInputAdornments-root {
+	--obInputAdornments-padding: 0.25rem;
+	--obInputAdornments-gap: 0.25rem;
+	--obInputAdornments-fontSize: var(--ds-font-size-3, 1rem);
+
+	display: flex;
+	align-items: center;
+	box-sizing: border-box;
+	gap: var(--obInputAdornments-gap);
+	padding: var(--obInputAdornments-padding);
+	inline-size: 100%;
+	color: var(--ds-color-neutral-text-default, #1e2b3c);
+	background-color: var(--ds-color-neutral-surface-default, #fff);
+	border: var(--ds-border-width-default, 1px) solid var(--ds-color-neutral-border-default, #b3b3b3);
+	border-radius: var(--ds-border-radius-md, 0.375rem);
+}
+
+/* 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);
+}
+
+.ObInputAdornments-root[data-size="md"] {
+	--obInputAdornments-padding: 0.25rem;
+	--obInputAdornments-fontSize: var(--ds-font-size-3, 1rem);
+}
+
+.ObInputAdornments-root[data-size="lg"] {
+	--obInputAdornments-padding: 0.375rem;
+	--obInputAdornments-fontSize: var(--ds-font-size-4, 1.125rem);
+}
+
+/* The Designsystemet input hover (an inner outline doubling the border), drawn on the wrapper */
+.ObInputAdornments-root:hover:not(
+		:focus-within,
+		:has(.ObInputAdornments-field:disabled, .ObInputAdornments-field[readonly])
+	) {
+	outline: var(--ds-border-width-default, 1px) solid var(--ds-color-neutral-border-default, #b3b3b3);
+	outline-offset: -0.1px;
+}
+
+.ObInputAdornments-root:has(.ObInputAdornments-field:focus-visible) {
+	box-shadow: var(--dsc-focus-boxShadow);
+	outline: var(--dsc-focus-outline);
+	outline-offset: var(--ds-border-width-focus, 3px);
+}
+
+.ObInputAdornments-root:has(.ObInputAdornments-field:disabled) {
+	cursor: not-allowed;
+	opacity: var(--ds-disabled-opacity, 0.3);
+}
+
+/* The bare input: all the visual styling lives on the wrapper instead */
+.ObInputAdornments-root .ObInputAdornments-field {
+	flex: 1;
+	min-inline-size: 0;
+	font-size: var(--obInputAdornments-fontSize);
+	background: transparent;
+	border: none;
+}
+
+.ObInputAdornments-root .ObInputAdornments-field:disabled {
+	opacity: 1;
+}
+
+.ObInputAdornments-root .ObInputAdornments-field:hover {
+	outline: none;
+}
+
+.ObInputAdornments-root .ObInputAdornments-field:focus-visible {
+	box-shadow: none;
+	outline: none;
+	outline-offset: 0;
+}

package/src/input/InputAdornments.tsx

@@ -1,102 +1,102 @@
-import "./InputAdornments.css";
-
-import { Input, type InputProps } from "@digdir/designsystemet-react";
-import clsx from "clsx";
-import { Children, isValidElement, type ReactElement, type ReactNode, type Ref } from "react";
-
-export type InputSlotProps = {
-	/**
-	 * Extra classes for the input rendered in this slot
-	 */
-	className?: string;
-};
-
-/**
- * Marks where the input should be rendered among the children of
- * `InputAdornments`. Renders nothing on its own; `InputAdornments` swaps it
- * for the actual input. When it is left out, the input is rendered before the
- * adornments.
- *
- * @example
- * ```jsx
- * <InputAdornments value={value} onChange={handleChange}>
- *   <SearchIcon aria-hidden />
- *   <InputSlot />
- *   <Button icon variant="tertiary"><XMarkIcon aria-hidden /></Button>
- * </InputAdornments>
- * ```
- */
-export function InputSlot(_props: InputSlotProps) {
-	return null;
-}
-
-export type InputAdornmentsProps = Omit<InputProps, "children"> & {
-	/**
-	 * Adornments rendered next to the input, e.g. icons or buttons. Include an
-	 * `InputSlot` to control where the input itself ends up.
-	 */
-	children?: ReactNode;
-	/**
-	 * Classes for the wrapper that carries the input styling
-	 */
-	className?: string;
-	/**
-	 * Classes for the bare input element itself
-	 */
-	inputClassName?: string;
-	/**
-	 * Ref to the input element. The wrapper is an implementation detail, so the
-	 * ref points at the input rather than at the element carrying the styling.
-	 */
-	ref?: Ref<HTMLInputElement>;
-};
-
-/**
- * Input with adornments, equivalent to a MUI `TextField` with
- * `InputProps.startAdornment` / `endAdornment`. Designsystemet has no
- * equivalent, so the border, background, hover and focus styling is moved from
- * the input onto a wrapper element, making the input and its adornments read
- * as a single control.
- *
- * All other props are forwarded to the Designsystemet `Input`, so `ref`,
- * `value`, `onChange`, `data-size` and `data-color` work as usual.
- *
- * @example
- * ```jsx
- * // Input first (default), adornments after
- * <InputAdornments aria-label="Search" value={value} onChange={handleChange}>
- *   <Button icon variant="tertiary"><MagnifyingGlassIcon aria-hidden /></Button>
- * </InputAdornments>
- *
- * // Explicit placement with InputSlot
- * <InputAdornments aria-label="Amount" data-size="lg">
- *   <span aria-hidden>kr</span>
- *   <InputSlot />
- *   <span aria-hidden>,-</span>
- * </InputAdornments>
- * ```
- */
-export function InputAdornments({ children, className, inputClassName, ...props }: InputAdornmentsProps) {
-	let size = props["data-size"];
-	let color = props["data-color"];
-	let childArray = Children.toArray(children);
-	let slot = childArray.find((child) => isValidElement(child) && child.type === InputSlot) as
-		| ReactElement<InputSlotProps>
-		| undefined;
-
-	let input = (
-		<Input
-			key="ObInputAdornments-input"
-			{...props}
-			className={clsx("ObInputAdornments-field", inputClassName, slot?.props.className)}
-		/>
-	);
-
-	let content = slot ? childArray.map((child) => (child === slot ? input : child)) : [input, ...childArray];
-
-	return (
-		<div className={clsx("ObInputAdornments-root", className)} data-size={size} data-color={color}>
-			{content}
-		</div>
-	);
-}
+import "./InputAdornments.css";
+
+import { Input, type InputProps } from "@digdir/designsystemet-react";
+import clsx from "clsx";
+import { Children, isValidElement, type ReactElement, type ReactNode, type Ref } from "react";
+
+export type InputSlotProps = {
+	/**
+	 * Extra classes for the input rendered in this slot
+	 */
+	className?: string;
+};
+
+/**
+ * Marks where the input should be rendered among the children of
+ * `InputAdornments`. Renders nothing on its own; `InputAdornments` swaps it
+ * for the actual input. When it is left out, the input is rendered before the
+ * adornments.
+ *
+ * @example
+ * ```jsx
+ * <InputAdornments value={value} onChange={handleChange}>
+ *   <SearchIcon aria-hidden />
+ *   <InputSlot />
+ *   <Button icon variant="tertiary"><XMarkIcon aria-hidden /></Button>
+ * </InputAdornments>
+ * ```
+ */
+export function InputSlot(_props: InputSlotProps) {
+	return null;
+}
+
+export type InputAdornmentsProps = Omit<InputProps, "children"> & {
+	/**
+	 * Adornments rendered next to the input, e.g. icons or buttons. Include an
+	 * `InputSlot` to control where the input itself ends up.
+	 */
+	children?: ReactNode;
+	/**
+	 * Classes for the wrapper that carries the input styling
+	 */
+	className?: string;
+	/**
+	 * Classes for the bare input element itself
+	 */
+	inputClassName?: string;
+	/**
+	 * Ref to the input element. The wrapper is an implementation detail, so the
+	 * ref points at the input rather than at the element carrying the styling.
+	 */
+	ref?: Ref<HTMLInputElement>;
+};
+
+/**
+ * Input with adornments, equivalent to a MUI `TextField` with
+ * `InputProps.startAdornment` / `endAdornment`. Designsystemet has no
+ * equivalent, so the border, background, hover and focus styling is moved from
+ * the input onto a wrapper element, making the input and its adornments read
+ * as a single control.
+ *
+ * All other props are forwarded to the Designsystemet `Input`, so `ref`,
+ * `value`, `onChange`, `data-size` and `data-color` work as usual.
+ *
+ * @example
+ * ```jsx
+ * // Input first (default), adornments after
+ * <InputAdornments aria-label="Search" value={value} onChange={handleChange}>
+ *   <Button icon variant="tertiary"><MagnifyingGlassIcon aria-hidden /></Button>
+ * </InputAdornments>
+ *
+ * // Explicit placement with InputSlot
+ * <InputAdornments aria-label="Amount" data-size="lg">
+ *   <span aria-hidden>kr</span>
+ *   <InputSlot />
+ *   <span aria-hidden>,-</span>
+ * </InputAdornments>
+ * ```
+ */
+export function InputAdornments({ children, className, inputClassName, ...props }: InputAdornmentsProps) {
+	let size = props["data-size"];
+	let color = props["data-color"];
+	let childArray = Children.toArray(children);
+	let slot = childArray.find((child) => isValidElement(child) && child.type === InputSlot) as
+		| ReactElement<InputSlotProps>
+		| undefined;
+
+	let input = (
+		<Input
+			key="ObInputAdornments-input"
+			{...props}
+			className={clsx("ObInputAdornments-field", inputClassName, slot?.props.className)}
+		/>
+	);
+
+	let content = slot ? childArray.map((child) => (child === slot ? input : child)) : [input, ...childArray];
+
+	return (
+		<div className={clsx("ObInputAdornments-root", className)} data-size={size} data-color={color}>
+			{content}
+		</div>
+	);
+}

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