@olenbetong/appframe-ds 1.8.0 → 1.9.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @olenbetong/appframe-ds
 
+## 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.0",
   "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,7 @@
 	position: relative;
 
 	.ds-input {
-		padding-inline-end: var(--ObLookup-buttons-width, 3rem);
+		padding-inline-end: var(--ObLookup-buttons-width, var(--ds-size-12, 3rem));
 	}
 }
 
@@ -22,6 +22,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;

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,6 +72,8 @@ 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);
@@ -138,7 +141,9 @@ export function AfLookup<T extends Record<string, unknown>>({
 				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 +162,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 +173,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

@@ -79,7 +79,9 @@ export function AfLookupEdit<T extends Record<string, unknown>>({
 				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 +100,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 +114,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(",", ".")));
+				}
+			}}
+		/>
+	);
+}

package/src/binding/BoundTextField.tsx

@@ -1,49 +1,49 @@
-import { Textfield, type TextfieldProps } from "@digdir/designsystemet-react";
-import { useField } from "@olenbetong/appframe-react";
-import { forwardRef } from "react";
-
-/*
- * `TextfieldProps` is a union of the input and the textarea variant. A plain `Omit` over it keeps
- * only the props both branches share, which silently drops the textarea-only ones (`rows`,
- * `cols`) — so `multiline` was accepted but `rows` was not. Distributing the `Omit` over the union
- * keeps each branch intact.
- */
-type OmitBoundProps<T> = T extends unknown ? Omit<T, "value" | "onChange" | "onKeyDown"> : never;
-
-export type BoundTextFieldProps = OmitBoundProps<TextfieldProps> & {
-	field: string;
-};
-
-export const BoundTextField = forwardRef<HTMLInputElement & HTMLTextAreaElement, BoundTextFieldProps>(
-	function BoundTextField({ field, ...props }, ref) {
-		let { error, value, onChange, onKeyDown } = useField<any, any>(field);
-
-		let inputValue = value;
-		if (props.type === "date" && value instanceof Date) {
-			inputValue = value.toISOString().split("T")[0];
-		} else if (["datetime", "datetime-local"].includes(props.type ?? "") && value instanceof Date) {
-			inputValue = value.toISOString().replace("Z", "");
-		}
-
-		return (
-			<Textfield
-				name={field}
-				error={error ?? undefined}
-				{...(props as any)}
-				value={inputValue ?? ""}
-				onChange={(evt) => {
-					if (["datetime", "datetime-local"].includes(props.type ?? "")) {
-						onChange(
-							evt as any,
-							(evt.target as HTMLInputElement).value ? `${(evt.target as HTMLInputElement).value}Z` : null,
-						);
-					} else {
-						onChange(evt as any);
-					}
-				}}
-				onKeyDown={(evt) => onKeyDown(evt as any)}
-				ref={ref}
-			/>
-		);
-	},
-);
+import { Textfield, type TextfieldProps } from "@digdir/designsystemet-react";
+import { useField } from "@olenbetong/appframe-react";
+import { forwardRef } from "react";
+
+/*
+ * `TextfieldProps` is a union of the input and the textarea variant. A plain `Omit` over it keeps
+ * only the props both branches share, which silently drops the textarea-only ones (`rows`,
+ * `cols`) — so `multiline` was accepted but `rows` was not. Distributing the `Omit` over the union
+ * keeps each branch intact.
+ */
+type OmitBoundProps<T> = T extends unknown ? Omit<T, "value" | "onChange" | "onKeyDown"> : never;
+
+export type BoundTextFieldProps = OmitBoundProps<TextfieldProps> & {
+	field: string;
+};
+
+export const BoundTextField = forwardRef<HTMLInputElement & HTMLTextAreaElement, BoundTextFieldProps>(
+	function BoundTextField({ field, ...props }, ref) {
+		let { error, value, onChange, onKeyDown } = useField<any, any>(field);
+
+		let inputValue = value;
+		if (props.type === "date" && value instanceof Date) {
+			inputValue = value.toISOString().split("T")[0];
+		} else if (["datetime", "datetime-local"].includes(props.type ?? "") && value instanceof Date) {
+			inputValue = value.toISOString().replace("Z", "");
+		}
+
+		return (
+			<Textfield
+				name={field}
+				error={error ?? undefined}
+				{...(props as any)}
+				value={inputValue ?? ""}
+				onChange={(evt) => {
+					if (["datetime", "datetime-local"].includes(props.type ?? "")) {
+						onChange(
+							evt as any,
+							(evt.target as HTMLInputElement).value ? `${(evt.target as HTMLInputElement).value}Z` : null,
+						);
+					} else {
+						onChange(evt as any);
+					}
+				}}
+				onKeyDown={(evt) => onKeyDown(evt as any)}
+				ref={ref}
+			/>
+		);
+	},
+);