@olenbetong/appframe-ds 1.8.0 → 1.9.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @olenbetong/appframe-ds
 
+## 1.9.1
+
+### Patch Changes
+
+- 0f57479: Lookups: the dialog lines up with the input instead of the label beside or above it, grows upwards when it is placed above the field, and follows the field's size mode also when opened with ArrowDown or F4. `GridEditLookup` takes `editable`, so a value can be typed into the cell.
+
+## 1.9.0
+
+### Minor Changes
+
+- 3bb1a08: Everything follows the Designsystemet size mode (`data-size` on an ancestor) instead of setting its own size. Components no longer hard-code `data-size="sm"`, and the filter components' `size` prop no longer defaults to `"sm"`: they inherit, and a caller can still pass a size. The 2026 site template sets `sm` on the app's `<main>`, so on those pages they look as before; on a page without a size mode they are now md.
+
+  `AfGrid` uses the size mode in place of MUI's density. Rows and headers are `--ds-size-10` tall (25px at xs, 31px at sm, 35px at md), the text is the size mode's body text, the toolbar, header filters, footer and slot components inherit the size, and editors and buttons in a cell fit the row. The density entries are gone from the toolbar menu, the grid renders at the standard density, and saved layouts no longer restore a density (`persistenceModel.density` is deprecated and ignored); a `rowHeight` passed to the grid still wins. The multi-column lookup grid sizes its rows the same way, the lookup popup (portaled to `<body>`) takes the size mode of its field, and the list's secondary line, the lookup grid's padding and `Autocomplete`'s padding and gap are sized from the size mode instead of fixed rem/px.
+
 ## 1.8.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olenbetong/appframe-ds",
-  "version": "1.8.0",
+  "version": "1.9.1",
   "description": "Components that bind Designsystemet components to Appframe data objects",
   "type": "module",
   "types": "./es/index.d.ts",
@@ -64,7 +64,7 @@
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "3.0.0",
     "@base-ui/react": "1.9.0",
     "@olenbetong/appframe-core": "^2.15.2",
-    "@olenbetong/appframe-data": "^1.8.5",
+    "@olenbetong/appframe-data": "^1.8.6",
     "@olenbetong/appframe-react": "^2.2.8",
     "clsx": "^2.1.1",
     "dockview-react": "8.6.1",

package/src/AfLookup/Lookup.css

@@ -2,7 +2,9 @@
 	position: relative;
 
 	.ds-input {
-		padding-inline-end: var(--ObLookup-buttons-width, 3rem);
+		padding-inline-end: var(--ObLookup-buttons-width, var(--ds-size-12, 3rem));
+		/* Set by AfLookup and AfLookupEdit; the dialog lines up with the input, not its label. */
+		anchor-name: var(--ObLookup-anchor);
 	}
 }
 
@@ -22,6 +24,14 @@
 	padding-inline-end: var(--ds-size-1, 0.25rem);
 }
 
+/*
+ * The buttons follow the inherited size mode, so in the same mode as the input they would be as
+ * tall as it. Fit them inside the input instead, with --ds-size-1 to spare above and below.
+ */
+.ObLookup-buttons > .ds-button {
+	--dsc-button-size: calc(var(--ds-size-12) - 2 * var(--ds-size-1));
+}
+
 .ObLookup-dialog {
 	border: 0;
 	margin-block-start: 0;
@@ -136,6 +146,11 @@
 		}
 	}
 
+	/* Placed above the field (see useLookup): grow upwards from it. */
+	&[data-above] {
+		transform-origin: bottom left;
+	}
+
 	&[data-anchor="manual"] {
 		inset: unset;
 		position: fixed;

package/src/AfLookup/Lookup.tsx

@@ -10,6 +10,7 @@ import { createPortal } from "react-dom";
 
 import { LookupCombobox, type LookupComboboxProps } from "./LookupCombobox.js";
 import { getLocalizedString } from "../i18n.js";
+import { copySizeMode } from "../theme/sizeMode.js";
 
 export type LabelTag = "optional" | "required";
 
@@ -24,7 +25,7 @@ function labelWithTag(label: string | undefined, labelTag: LabelTag | undefined)
 	return (
 		<>
 			{label}
-			<Tag className="ObLookup-labelTag" data-color={LABEL_TAG_COLOR[labelTag]} data-size="sm">
+			<Tag className="ObLookup-labelTag" data-color={LABEL_TAG_COLOR[labelTag]}>
 				{getLocalizedString(LABEL_TAG_TEXT[labelTag])}
 			</Tag>
 		</>
@@ -71,16 +72,44 @@ export function useLookup<T extends Record<string, unknown>>({
 	}
 
 	function handleOpenDialog(searchValue?: string) {
+		// The dialog is portaled to <body>, so it would not inherit the field's size mode.
+		copySizeMode(dialogRef.current, document.getElementById(inputId) ?? getAnchorElement?.());
 		// openDialog renders synchronously (flushSync), which includes this update, so the combobox
 		// mounts with the search value already set.
 		setInitialSearchValue(searchValue);
 		openDialog();
+		setGrowDirection();
+		// A manually anchored dialog (in a virtualized grid) is placed in the next frame.
+		requestAnimationFrame(setGrowDirection);
+	}
+
+	// When there is no room below the field, the dialog is placed above it; it then grows upwards
+	// from the field instead of down towards it. Its bottom edge tells, whatever the opening scale.
+	function setGrowDirection() {
+		let $dialog = dialogRef.current;
+		let anchor = document.getElementById(inputId) ?? getAnchorElement?.();
+		if (!$dialog || !anchor) return;
+
+		let above = $dialog.getBoundingClientRect().bottom <= anchor.getBoundingClientRect().top + 1;
+		$dialog.toggleAttribute("data-above", above);
+	}
+
+	// useLookupState opens the dialog on ArrowDown and F4 itself, which would skip the size mode and
+	// the grow direction above; every way of opening it goes through handleOpenDialog instead.
+	function handleKeyDown(event: React.KeyboardEvent<HTMLElement>) {
+		if (event.key === "ArrowDown" || event.key === "F4") {
+			event.preventDefault();
+			event.stopPropagation();
+			handleOpenDialog();
+			return;
+		}
+		onKeyDown(event);
 	}
 
 	return {
 		open,
 		openDialog: handleOpenDialog,
-		onKeyDown,
+		onKeyDown: handleKeyDown,
 		onChange: handleChange,
 		dialogRef,
 		anchorName,
@@ -132,13 +161,16 @@ export function AfLookup<T extends Record<string, unknown>>({
 	}
 
 	return (
-		<div style={{ anchorName } as React.CSSProperties}>
+		// The dialog anchors to the input itself (see Lookup.css), not to the label beside or above it.
+		<div style={{ "--ObLookup-anchor": anchorName } as React.CSSProperties}>
 			<div
 				className="ObLookup-inputWrap"
 				style={
 					{
 						display: fullWidth ? "block" : "inline-block",
-						"--ObLookup-buttons-width": hasClear ? "5.5rem" : "3rem",
+						"--ObLookup-buttons-width": hasClear
+							? "calc(2 * var(--ds-size-12) - var(--ds-size-2))"
+							: "var(--ds-size-12)",
 					} as React.CSSProperties
 				}
 			>
@@ -157,7 +189,6 @@ export function AfLookup<T extends Record<string, unknown>>({
 						<Button
 							icon
 							variant="tertiary"
-							data-size="sm"
 							aria-label={getLocalizedString("Clear")}
 							onKeyDown={(evt) => evt.stopPropagation()}
 							onClick={(evt) => {
@@ -169,13 +200,7 @@ export function AfLookup<T extends Record<string, unknown>>({
 							<XMarkIcon />
 						</Button>
 					)}
-					<Button
-						icon
-						variant="tertiary"
-						data-size="sm"
-						aria-label={getLocalizedString("Search")}
-						onClick={() => openDialog()}
-					>
+					<Button icon variant="tertiary" aria-label={getLocalizedString("Search")} onClick={() => openDialog()}>
 						<MagnifyingGlassIcon />
 					</Button>
 				</div>

package/src/AfLookup/LookupCombobox.tsx

@@ -183,15 +183,7 @@ export function LookupCombobox<T extends Record<string, unknown>>(props: LookupC
 	return (
 		// oxlint-disable-next-line jsx-a11y/click-events-have-key-events -- element is not interactive, click is used to prevent dialog close
 		// oxlint-disable-next-line jsx-a11y/no-static-element-interactions -- element is not interactive, click is used to prevent dialog close
-		// Compact on desktop, where the popup is a small dialog next to the field; the mobile
-		// bottom sheet keeps the default size for touch. The size cascades to the search field,
-		// the rows and the buttons.
-		<div
-			className="ObCombobox-root"
-			id={id}
-			data-size={isDesktop ? "sm" : "md"}
-			onClick={(evt) => evt.stopPropagation()}
-		>
+		<div className="ObCombobox-root" id={id} onClick={(evt) => evt.stopPropagation()}>
 			<Textfield
 				type="search"
 				className="ObCombobox-input"

package/src/AfLookup/LookupEdit.tsx

@@ -73,13 +73,16 @@ export function AfLookupEdit<T extends Record<string, unknown>>({
 	let hasClear = !!(nullable && value && onChange);
 
 	return (
-		<div style={{ anchorName } as React.CSSProperties}>
+		// The dialog anchors to the input itself (see Lookup.css), not to the label beside or above it.
+		<div style={{ "--ObLookup-anchor": anchorName } as React.CSSProperties}>
 			<div
 				className="ObLookup-inputWrap"
 				style={
 					{
 						display: fullWidth ? "block" : "inline-block",
-						"--ObLookup-buttons-width": hasClear ? "5.5rem" : "3rem",
+						"--ObLookup-buttons-width": hasClear
+							? "calc(2 * var(--ds-size-12) - var(--ds-size-2))"
+							: "var(--ds-size-12)",
 					} as React.CSSProperties
 				}
 			>
@@ -98,7 +101,6 @@ export function AfLookupEdit<T extends Record<string, unknown>>({
 						<Button
 							icon
 							variant="tertiary"
-							data-size="sm"
 							aria-label={getLocalizedString("Clear")}
 							onKeyDown={(evt) => evt.stopPropagation()}
 							onClick={(evt) => {
@@ -113,7 +115,6 @@ export function AfLookupEdit<T extends Record<string, unknown>>({
 					<Button
 						icon
 						variant="tertiary"
-						data-size="sm"
 						aria-label={getLocalizedString("Search")}
 						onClick={(evt) => {
 							evt.stopPropagation();

package/src/AfLookup/LookupGrid.css

@@ -16,6 +16,7 @@
  * row inside is moved sideways with a transform to follow it.
  */
 .ObLookupGrid-header {
+	/* The height is set inline from the size mode (`useDsSize`); this is the fallback. */
 	height: 40px;
 	overflow: hidden;
 	border-bottom: 1px solid var(--ds-color-neutral-border-default);
@@ -35,7 +36,7 @@
 	display: flex;
 	align-items: center;
 	height: 100%;
-	padding: 0 8px;
+	padding: 0 var(--ds-size-2, 8px);
 	overflow: hidden;
 }
 
@@ -123,7 +124,7 @@
 }
 
 .ObLookupGrid-cell {
-	padding: 0 8px;
+	padding: 0 var(--ds-size-2, 8px);
 	height: 100%;
 	display: flex;
 	align-items: center;

package/src/AfLookup/LookupGrid.tsx

@@ -7,9 +7,10 @@ import clsx from "clsx";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { List, type RowComponentProps, useListRef } from "react-window";
 import { getLocalizedString } from "../i18n.js";
+import { useDsSize } from "../theme/sizeMode.js";
 
+/** The row and header height until `--ds-size-10` is measured, which follows the size mode like AfGrid's rows. */
 const ROW_HEIGHT = 40;
-const HEADER_HEIGHT = 40;
 /** Narrowest a column can be made, and what a flexible column counts for in the minimum width */
 const MIN_COLUMN_WIDTH = 80;
 
@@ -190,6 +191,8 @@ export function LookupGrid<T extends Record<string, unknown>>({
 }: LookupGridProps<T>) {
 	let listRef = useListRef(null);
 	let headerRowRef = useRef<HTMLDivElement>(null);
+	let rootRef = useRef<HTMLDivElement>(null);
+	let rowHeight = useDsSize(rootRef, 10, ROW_HEIGHT);
 	let [resizedWidths, setResizedWidths] = useState<Partial<Record<string, number>>>({});
 	let [resizing, setResizing] = useState<{ field: string; startWidth: number } | null>(null);
 	let [listInnerWidth, setListInnerWidth] = useState<number>();
@@ -246,12 +249,13 @@ export function LookupGrid<T extends Record<string, unknown>>({
 
 	return (
 		<div
+			ref={rootRef}
 			role="grid"
 			aria-label={getLocalizedString("Search results")}
 			className="ObLookupGrid-root"
 			data-resizing={resizing ? "" : undefined}
 		>
-			<div className="ObLookupGrid-header">
+			<div className="ObLookupGrid-header" style={{ height: rowHeight }}>
 				<div
 					role="row"
 					ref={headerRowRef}
@@ -301,9 +305,9 @@ export function LookupGrid<T extends Record<string, unknown>>({
 				role="rowgroup"
 				listRef={listRef}
 				className="ObLookupGrid-list"
-				style={{ height: Math.max(0, height - HEADER_HEIGHT) }}
+				style={{ height: Math.max(0, height - rowHeight) }}
 				rowCount={data.length}
-				rowHeight={ROW_HEIGHT}
+				rowHeight={rowHeight}
 				overscanCount={5}
 				onScroll={handleScroll}
 				rowComponent={LookupGridRow}

package/src/autocomplete/Autocomplete.css

@@ -1,6 +1,6 @@
 .ObAutocomplete-root {
-	--obAutocomplete-padding: 0.25rem;
-	--obAutocomplete-gap: 0.25rem;
+	--obAutocomplete-padding: var(--ds-size-1, 0.25rem);
+	--obAutocomplete-gap: var(--ds-size-1, 0.25rem);
 
 	display: inline-grid;
 }
@@ -25,22 +25,11 @@
 
 /*
  * Font size is deliberately never set: `ds-input` inherits its font size when a
- * `data-size` attribute is present, so referencing `--ds-font-size-*` here — which
- * `data-size` rescales — would render the text smaller than a `Textfield` or
- * `Select` of the same size. Only the padding varies per size, and only for the
- * sizes Designsystemet components come in (sm, md, lg; xs and xl are typography-only).
+ * `data-size` attribute is present, so referencing `--ds-font-size-*` here - which
+ * `data-size` rescales - would render the text smaller than a `Textfield` or
+ * `Select` of the same size. The padding and gap are `--ds-size-1`, which follows
+ * the size mode on its own, so no size needs a rule of its own.
  */
-.ObAutocomplete-root[data-size="sm"] {
-	--obAutocomplete-padding: 0.25rem;
-}
-
-.ObAutocomplete-root[data-size="md"] {
-	--obAutocomplete-padding: 0.25rem;
-}
-
-.ObAutocomplete-root[data-size="lg"] {
-	--obAutocomplete-padding: 0.375rem;
-}
 
 /*
  * The control is the visual input: it owns the border, background, hover and

package/src/binding/BoundNumberInput.tsx

@@ -1,42 +1,42 @@
-import { useField } from "@olenbetong/appframe-react";
-
-import { NumberInput, type NumberInputProps } from "../input/NumberInput.js";
-
-export type BoundNumberInputProps = Omit<NumberInputProps, "value" | "onChange" | "onKeyDown"> & {
-	/**
-	 * Name of the number field in the data object from context
-	 */
-	field: string;
-	/**
-	 * Called with the new value before it is written to the data object
-	 */
-	onChange?: (value: number | null) => void;
-};
-
-/**
- * A `NumberInput` bound to a number field of the data object from `DataObjectProvider`
- * via `useField`. Escape resets the field, and a conversion error from the data object is
- * shown below the input unless an `error` is passed.
- *
- * @example
- * ```jsx
- * <BoundNumberInput field="TotHrs" label="Total hours" step={0.25} min={0} max={24} />
- * ```
- */
-export function BoundNumberInput({ field, onChange: onChangeProp, error: errorProp, ...props }: BoundNumberInputProps) {
-	let { error, value, onChange, onKeyDown } = useField<any, any>(field);
-
-	return (
-		<NumberInput
-			name={field}
-			{...props}
-			error={errorProp ?? error ?? undefined}
-			value={typeof value === "number" ? value : null}
-			onChange={(next) => {
-				onChangeProp?.(next);
-				onChange({ target: { value: next } });
-			}}
-			onKeyDown={(event) => onKeyDown(event)}
-		/>
-	);
-}
+import { useField } from "@olenbetong/appframe-react";
+
+import { NumberInput, type NumberInputProps } from "../input/NumberInput.js";
+
+export type BoundNumberInputProps = Omit<NumberInputProps, "value" | "onChange" | "onKeyDown"> & {
+	/**
+	 * Name of the number field in the data object from context
+	 */
+	field: string;
+	/**
+	 * Called with the new value before it is written to the data object
+	 */
+	onChange?: (value: number | null) => void;
+};
+
+/**
+ * A `NumberInput` bound to a number field of the data object from `DataObjectProvider`
+ * via `useField`. Escape resets the field, and a conversion error from the data object is
+ * shown below the input unless an `error` is passed.
+ *
+ * @example
+ * ```jsx
+ * <BoundNumberInput field="TotHrs" label="Total hours" step={0.25} min={0} max={24} />
+ * ```
+ */
+export function BoundNumberInput({ field, onChange: onChangeProp, error: errorProp, ...props }: BoundNumberInputProps) {
+	let { error, value, onChange, onKeyDown } = useField<any, any>(field);
+
+	return (
+		<NumberInput
+			name={field}
+			{...props}
+			error={errorProp ?? error ?? undefined}
+			value={typeof value === "number" ? value : null}
+			onChange={(next) => {
+				onChangeProp?.(next);
+				onChange({ target: { value: next } });
+			}}
+			onKeyDown={(event) => onKeyDown(event)}
+		/>
+	);
+}

package/src/binding/BoundNumericTextField.tsx

@@ -1,102 +1,102 @@
-import { Textfield, type TextfieldProps } from "@digdir/designsystemet-react";
-import { useField } from "@olenbetong/appframe-react";
-import { useEffect, useState } from "react";
-import { getLocalizedString, localize } from "../i18n.js";
-
-/**
- * A Designsystemet `Textfield` bound to an Appframe data source field via `useField`.
- *
- * Adds client-side numeric validation: rejects non-numeric characters and enforces
- * optional `precision` (total digits) and `scale` (decimal places) constraints.
- * Validation errors are reported to the parent via the `onError` callback so the
- * parent can track whether any field is in an error state (e.g., to disable Save).
- *
- * On blur the displayed value is normalized to a JS `Number` (comma decimal separators
- * are converted to dots) so the data source always stores a proper numeric value.
- */
-export type BoundNumericTextFieldProps = Omit<TextfieldProps, "onChange" | "onKeyDown" | "onError"> & {
-	field: string;
-	precision?: number;
-	scale?: number;
-	onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-	onError?: (error: string | null) => void;
-};
-
-export function BoundNumericTextField({
-	field,
-	precision,
-	scale,
-	onChange: onChangeProp,
-	onError,
-	...props
-}: BoundNumericTextFieldProps) {
-	let { value, setValue, onChange, onKeyDown } = useField<any, any>(field);
-
-	let [error, setError] = useState<string | null>(null);
-
-	function checkNumber(value: string, precision: number, scale: number) {
-		if (value[0] === "0") {
-			value = value[0].replace("0", "");
-		}
-
-		let [integer, decimal] = value.split(",");
-		if (value.includes(".")) {
-			[integer, decimal] = value.split(".");
-		}
-
-		integer = integer.replace("-", "");
-
-		if (integer.length > precision - scale) {
-			setError(localize`The amount of whole numbers is too high. Allowed limit is ${precision - scale}`);
-			return;
-		}
-
-		if (decimal && decimal.length > scale) {
-			setError(localize`The amount of decimal places is too high. Allowed limit is ${scale}`);
-			return;
-		}
-
-		setError(null);
-	}
-
-	function checkError(value: string, precision: number | undefined, scale: number | undefined) {
-		let regExp = /[a-zA-Z `!@#$%^&*()_+=[\]{};':"\\|<>/?~]/;
-
-		if (regExp.test(value)) {
-			setError(getLocalizedString("Please enter a valid number"));
-		} else if (value.substring(1).includes("-")) {
-			setError(getLocalizedString("Please enter a valid number"));
-		} else if (precision !== undefined && scale !== undefined) {
-			checkNumber(value, precision, scale);
-		} else {
-			setError(null);
-		}
-	}
-
-	useEffect(() => {
-		onError?.(error);
-	}, [error, onError]);
-
-	return (
-		<Textfield
-			name={field}
-			error={error ?? undefined}
-			{...(props as any)}
-			value={value ?? ""}
-			onChange={(event) => {
-				onChangeProp?.(event as any);
-				if (!event.defaultPrevented) {
-					checkError((event.target as HTMLInputElement).value, precision, scale);
-					onChange(event as any);
-				}
-			}}
-			onKeyDown={(evt) => onKeyDown(evt as any)}
-			onBlur={(evt) => {
-				const raw = (evt.target as HTMLInputElement).value;
-				if (raw !== "") {
-					setValue(Number(raw.replaceAll(",", ".")));
-				}
-			}}
-		/>
-	);
-}
+import { Textfield, type TextfieldProps } from "@digdir/designsystemet-react";
+import { useField } from "@olenbetong/appframe-react";
+import { useEffect, useState } from "react";
+import { getLocalizedString, localize } from "../i18n.js";
+
+/**
+ * A Designsystemet `Textfield` bound to an Appframe data source field via `useField`.
+ *
+ * Adds client-side numeric validation: rejects non-numeric characters and enforces
+ * optional `precision` (total digits) and `scale` (decimal places) constraints.
+ * Validation errors are reported to the parent via the `onError` callback so the
+ * parent can track whether any field is in an error state (e.g., to disable Save).
+ *
+ * On blur the displayed value is normalized to a JS `Number` (comma decimal separators
+ * are converted to dots) so the data source always stores a proper numeric value.
+ */
+export type BoundNumericTextFieldProps = Omit<TextfieldProps, "onChange" | "onKeyDown" | "onError"> & {
+	field: string;
+	precision?: number;
+	scale?: number;
+	onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+	onError?: (error: string | null) => void;
+};
+
+export function BoundNumericTextField({
+	field,
+	precision,
+	scale,
+	onChange: onChangeProp,
+	onError,
+	...props
+}: BoundNumericTextFieldProps) {
+	let { value, setValue, onChange, onKeyDown } = useField<any, any>(field);
+
+	let [error, setError] = useState<string | null>(null);
+
+	function checkNumber(value: string, precision: number, scale: number) {
+		if (value[0] === "0") {
+			value = value[0].replace("0", "");
+		}
+
+		let [integer, decimal] = value.split(",");
+		if (value.includes(".")) {
+			[integer, decimal] = value.split(".");
+		}
+
+		integer = integer.replace("-", "");
+
+		if (integer.length > precision - scale) {
+			setError(localize`The amount of whole numbers is too high. Allowed limit is ${precision - scale}`);
+			return;
+		}
+
+		if (decimal && decimal.length > scale) {
+			setError(localize`The amount of decimal places is too high. Allowed limit is ${scale}`);
+			return;
+		}
+
+		setError(null);
+	}
+
+	function checkError(value: string, precision: number | undefined, scale: number | undefined) {
+		let regExp = /[a-zA-Z `!@#$%^&*()_+=[\]{};':"\\|<>/?~]/;
+
+		if (regExp.test(value)) {
+			setError(getLocalizedString("Please enter a valid number"));
+		} else if (value.substring(1).includes("-")) {
+			setError(getLocalizedString("Please enter a valid number"));
+		} else if (precision !== undefined && scale !== undefined) {
+			checkNumber(value, precision, scale);
+		} else {
+			setError(null);
+		}
+	}
+
+	useEffect(() => {
+		onError?.(error);
+	}, [error, onError]);
+
+	return (
+		<Textfield
+			name={field}
+			error={error ?? undefined}
+			{...(props as any)}
+			value={value ?? ""}
+			onChange={(event) => {
+				onChangeProp?.(event as any);
+				if (!event.defaultPrevented) {
+					checkError((event.target as HTMLInputElement).value, precision, scale);
+					onChange(event as any);
+				}
+			}}
+			onKeyDown={(evt) => onKeyDown(evt as any)}
+			onBlur={(evt) => {
+				const raw = (evt.target as HTMLInputElement).value;
+				if (raw !== "") {
+					setValue(Number(raw.replaceAll(",", ".")));
+				}
+			}}
+		/>
+	);
+}