@olenbetong/appframe-ds 1.6.0 → 1.7.0

package/src/input/NumberInput.tsx

@@ -1,268 +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>
-	);
-}
+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,3 +1,3 @@
-export * from "./InputAdornments.js";
-export * from "./NumberInput.js";
-export { formatNumber, getDefaultCulture, parseNumber, type FormatNumberOptions } from "./numberFormat.js";
+export * from "./InputAdornments.js";
+export * from "./NumberInput.js";
+export { formatNumber, getDefaultCulture, parseNumber, type FormatNumberOptions } from "./numberFormat.js";