@olenbetong/appframe-ds 1.7.0 → 1.7.2

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

@@ -1,9 +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;
-}
+.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

@@ -1,212 +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");
-	});
-});
+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");
+	});
+});