@olenbetong/appframe-ds 1.8.0 → 1.9.0

package/src/filter/FilterValueEditor.tsx

@@ -1,239 +1,239 @@
-import { Select, Textfield } from "@digdir/designsystemet-react";
-import { PencilIcon } from "@navikt/aksel-icons";
-import {
-	type DynamicValue,
-	type FieldMetadata,
-	type FilterExpression,
-	type FilterOperator,
-	getDynamicValueLabel,
-	getDynamicValuesForField,
-	getOperatorArity,
-	getValueType,
-	normalizeOperator,
-} from "@olenbetong/appframe-core";
-import { Combobox } from "../autocomplete/index.js";
-
-import { ChipListInput } from "./ChipListInput.js";
-import type { FilterEditorSize, FilterValueOption } from "./types.js";
-import { getLocalizedString } from "../i18n.js";
-
-export type FilterValueEditorProps = {
-	expression: FilterExpression;
-	field?: FieldMetadata;
-	options?: FilterValueOption[];
-	onChange: (expression: FilterExpression) => void;
-	readOnly?: boolean;
-	"data-size"?: FilterEditorSize;
-};
-
-/** The `input` type used for a field's scalar editor. */
-function getInputType(field: FieldMetadata | undefined): "text" | "number" | "date" | "datetime-local" {
-	switch (field?.type) {
-		case "number":
-			return "number";
-		case "date":
-			return "date";
-		case "datetime":
-			return "datetime-local";
-		default:
-			return "text";
-	}
-}
-
-function toStringValue(value: FilterExpression["value"]): string {
-	if (value === null || value === undefined) return "";
-	if (value instanceof Date) return value.toISOString();
-
-	return String(value);
-}
-
-/**
- * A `datetime-local` input reports `2026-09-25T00:00`, leaving out the seconds
- * when they are zero. The value reaches SQL Server as a string, and SQL Server
- * only accepts the ISO 8601 form with a `T` when the seconds are present, so
- * the filter fails with "Conversion failed when converting date and/or time
- * from character string" unless they are added.
- */
-function withSeconds(value: string): string {
-	return /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}$/.test(value) ? `${value}:00` : value;
-}
-
-function toFilterValue(value: FilterExpression["value"], inputType: string): FilterExpression["value"] {
-	if (inputType !== "datetime-local") return value;
-	if (typeof value === "string") return withSeconds(value);
-	if (Array.isArray(value)) return value.map((item) => (typeof item === "string" ? withSeconds(item) : item));
-
-	return value;
-}
-
-function toArrayValue(value: FilterExpression["value"], length?: number): string[] {
-	let array = Array.isArray(value) ? value.map(toStringValue) : [];
-	if (length === undefined) return array;
-
-	// Pair editors always render two inputs, even before both are filled in.
-	return Array.from({ length }, (_, index) => array[index] ?? "");
-}
-
-/**
- * The value part of a filter row. Which editor is rendered depends on the
- * operator's arity, the field's type, and whether the value is a dynamic
- * ("special") value such as `Today` or `CurrentUser`.
- */
-export function FilterValueEditor({
-	expression,
-	field,
-	options,
-	onChange,
-	readOnly,
-	"data-size": size = "sm",
-}: FilterValueEditorProps) {
-	let operator = normalizeOperator(expression.operator);
-	let arity = getOperatorArity(operator);
-	let isDynamic = expression.valueType === "special";
-	let dynamicValues = field ? getDynamicValuesForField(field) : [];
-	let inputType = getInputType(field);
-
-	function setValue(value: FilterExpression["value"]) {
-		onChange({ ...expression, value: isDynamic ? value : toFilterValue(value, inputType) });
-	}
-
-	function setDynamic(enabled: boolean) {
-		if (enabled) {
-			onChange({ ...expression, value: dynamicValues[0] ?? null, valueType: "special" });
-		} else {
-			onChange({
-				...expression,
-				value: arity === "pair" ? ["", ""] : arity === "list" ? [] : "",
-				valueType: field ? getValueType(field, operator as FilterOperator) : "string",
-			});
-		}
-	}
-
-	if (arity === "none") return null;
-
-	let editor: React.ReactNode;
-
-	if (isDynamic) {
-		editor = (
-			<Select
-				className="ObFilterEditor-value"
-				aria-label={getLocalizedString("Value")}
-				data-size={size}
-				disabled={readOnly}
-				value={toStringValue(expression.value)}
-				onChange={(event) => setValue(event.target.value)}
-			>
-				{dynamicValues.map((dynamicValue) => (
-					<Select.Option key={dynamicValue} value={dynamicValue}>
-						{getDynamicValueLabel(dynamicValue as DynamicValue)}
-					</Select.Option>
-				))}
-			</Select>
-		);
-	} else if (arity === "list") {
-		editor = options ? (
-			<Combobox
-				className="ObFilterEditor-value"
-				multiple
-				data-size={size}
-				readOnly={readOnly}
-				placeholder={getLocalizedString("Select values")}
-				aria-label={getLocalizedString("Value")}
-				options={options}
-				getOptionLabel={(option) => option.label ?? option.value}
-				isOptionEqualToValue={(a, b) => a.value === b.value}
-				value={toArrayValue(expression.value).map(
-					(item) => options.find((option) => option.value === item) ?? { value: item },
-				)}
-				onChange={(_event, selected) => setValue(selected.map((option) => option.value))}
-			/>
-		) : (
-			<ChipListInput
-				aria-label={getLocalizedString("Value")}
-				data-size={size}
-				readOnly={readOnly}
-				type={inputType}
-				value={toArrayValue(expression.value)}
-				onChange={setValue}
-			/>
-		);
-	} else if (arity === "pair") {
-		let [from, to] = toArrayValue(expression.value, 2);
-
-		editor = (
-			<div className="ObFilterEditor-pair">
-				<Textfield
-					className="ObFilterEditor-value"
-					aria-label={getLocalizedString("From")}
-					data-size={size}
-					readOnly={readOnly}
-					type={inputType}
-					value={from}
-					onChange={(event) => setValue([event.target.value, to])}
-				/>
-				<span className="ObFilterEditor-pairSeparator">{getLocalizedString("and")}</span>
-				<Textfield
-					className="ObFilterEditor-value"
-					aria-label={getLocalizedString("To")}
-					data-size={size}
-					readOnly={readOnly}
-					type={inputType}
-					value={to}
-					onChange={(event) => setValue([from, event.target.value])}
-				/>
-			</div>
-		);
-	} else if (options) {
-		let current = toStringValue(expression.value);
-
-		editor = (
-			<Combobox
-				className="ObFilterEditor-value"
-				data-size={size}
-				readOnly={readOnly}
-				placeholder={getLocalizedString("Select value")}
-				aria-label={getLocalizedString("Value")}
-				options={options}
-				getOptionLabel={(option) => option.label ?? option.value}
-				isOptionEqualToValue={(a, b) => a.value === b.value}
-				value={current ? (options.find((option) => option.value === current) ?? { value: current }) : null}
-				onChange={(_event, selected) => setValue(selected?.value ?? "")}
-			/>
-		);
-	} else {
-		editor = (
-			<Textfield
-				className="ObFilterEditor-value"
-				aria-label={getLocalizedString("Value")}
-				data-size={size}
-				readOnly={readOnly}
-				type={inputType}
-				value={toStringValue(expression.value)}
-				onChange={(event) => setValue(event.target.value)}
-			/>
-		);
-	}
-
-	// Dynamic values are resolved server side, so they can only replace the whole
-	// value. Pairs would need one toggle per side, which the Windows editor does
-	// not offer either.
-	let canToggleDynamic = !readOnly && dynamicValues.length > 0 && arity === "single";
-
-	return (
-		<div className="ObFilterEditor-valueCell">
-			{editor}
-			{canToggleDynamic && (
-				<button
-					type="button"
-					className="ObFilterEditor-iconButton"
-					aria-pressed={isDynamic}
-					title={getLocalizedString("Use a relative value")}
-					aria-label={getLocalizedString("Use a relative value")}
-					onClick={() => setDynamic(!isDynamic)}
-				>
-					<PencilIcon aria-hidden />
-				</button>
-			)}
-		</div>
-	);
-}
+import { Select, Textfield } from "@digdir/designsystemet-react";
+import { PencilIcon } from "@navikt/aksel-icons";
+import {
+	type DynamicValue,
+	type FieldMetadata,
+	type FilterExpression,
+	type FilterOperator,
+	getDynamicValueLabel,
+	getDynamicValuesForField,
+	getOperatorArity,
+	getValueType,
+	normalizeOperator,
+} from "@olenbetong/appframe-core";
+import { Combobox } from "../autocomplete/index.js";
+
+import { ChipListInput } from "./ChipListInput.js";
+import type { FilterEditorSize, FilterValueOption } from "./types.js";
+import { getLocalizedString } from "../i18n.js";
+
+export type FilterValueEditorProps = {
+	expression: FilterExpression;
+	field?: FieldMetadata;
+	options?: FilterValueOption[];
+	onChange: (expression: FilterExpression) => void;
+	readOnly?: boolean;
+	"data-size"?: FilterEditorSize;
+};
+
+/** The `input` type used for a field's scalar editor. */
+function getInputType(field: FieldMetadata | undefined): "text" | "number" | "date" | "datetime-local" {
+	switch (field?.type) {
+		case "number":
+			return "number";
+		case "date":
+			return "date";
+		case "datetime":
+			return "datetime-local";
+		default:
+			return "text";
+	}
+}
+
+function toStringValue(value: FilterExpression["value"]): string {
+	if (value === null || value === undefined) return "";
+	if (value instanceof Date) return value.toISOString();
+
+	return String(value);
+}
+
+/**
+ * A `datetime-local` input reports `2026-09-25T00:00`, leaving out the seconds
+ * when they are zero. The value reaches SQL Server as a string, and SQL Server
+ * only accepts the ISO 8601 form with a `T` when the seconds are present, so
+ * the filter fails with "Conversion failed when converting date and/or time
+ * from character string" unless they are added.
+ */
+function withSeconds(value: string): string {
+	return /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}$/.test(value) ? `${value}:00` : value;
+}
+
+function toFilterValue(value: FilterExpression["value"], inputType: string): FilterExpression["value"] {
+	if (inputType !== "datetime-local") return value;
+	if (typeof value === "string") return withSeconds(value);
+	if (Array.isArray(value)) return value.map((item) => (typeof item === "string" ? withSeconds(item) : item));
+
+	return value;
+}
+
+function toArrayValue(value: FilterExpression["value"], length?: number): string[] {
+	let array = Array.isArray(value) ? value.map(toStringValue) : [];
+	if (length === undefined) return array;
+
+	// Pair editors always render two inputs, even before both are filled in.
+	return Array.from({ length }, (_, index) => array[index] ?? "");
+}
+
+/**
+ * The value part of a filter row. Which editor is rendered depends on the
+ * operator's arity, the field's type, and whether the value is a dynamic
+ * ("special") value such as `Today` or `CurrentUser`.
+ */
+export function FilterValueEditor({
+	expression,
+	field,
+	options,
+	onChange,
+	readOnly,
+	"data-size": size,
+}: FilterValueEditorProps) {
+	let operator = normalizeOperator(expression.operator);
+	let arity = getOperatorArity(operator);
+	let isDynamic = expression.valueType === "special";
+	let dynamicValues = field ? getDynamicValuesForField(field) : [];
+	let inputType = getInputType(field);
+
+	function setValue(value: FilterExpression["value"]) {
+		onChange({ ...expression, value: isDynamic ? value : toFilterValue(value, inputType) });
+	}
+
+	function setDynamic(enabled: boolean) {
+		if (enabled) {
+			onChange({ ...expression, value: dynamicValues[0] ?? null, valueType: "special" });
+		} else {
+			onChange({
+				...expression,
+				value: arity === "pair" ? ["", ""] : arity === "list" ? [] : "",
+				valueType: field ? getValueType(field, operator as FilterOperator) : "string",
+			});
+		}
+	}
+
+	if (arity === "none") return null;
+
+	let editor: React.ReactNode;
+
+	if (isDynamic) {
+		editor = (
+			<Select
+				className="ObFilterEditor-value"
+				aria-label={getLocalizedString("Value")}
+				data-size={size}
+				disabled={readOnly}
+				value={toStringValue(expression.value)}
+				onChange={(event) => setValue(event.target.value)}
+			>
+				{dynamicValues.map((dynamicValue) => (
+					<Select.Option key={dynamicValue} value={dynamicValue}>
+						{getDynamicValueLabel(dynamicValue as DynamicValue)}
+					</Select.Option>
+				))}
+			</Select>
+		);
+	} else if (arity === "list") {
+		editor = options ? (
+			<Combobox
+				className="ObFilterEditor-value"
+				multiple
+				data-size={size}
+				readOnly={readOnly}
+				placeholder={getLocalizedString("Select values")}
+				aria-label={getLocalizedString("Value")}
+				options={options}
+				getOptionLabel={(option) => option.label ?? option.value}
+				isOptionEqualToValue={(a, b) => a.value === b.value}
+				value={toArrayValue(expression.value).map(
+					(item) => options.find((option) => option.value === item) ?? { value: item },
+				)}
+				onChange={(_event, selected) => setValue(selected.map((option) => option.value))}
+			/>
+		) : (
+			<ChipListInput
+				aria-label={getLocalizedString("Value")}
+				data-size={size}
+				readOnly={readOnly}
+				type={inputType}
+				value={toArrayValue(expression.value)}
+				onChange={setValue}
+			/>
+		);
+	} else if (arity === "pair") {
+		let [from, to] = toArrayValue(expression.value, 2);
+
+		editor = (
+			<div className="ObFilterEditor-pair">
+				<Textfield
+					className="ObFilterEditor-value"
+					aria-label={getLocalizedString("From")}
+					data-size={size}
+					readOnly={readOnly}
+					type={inputType}
+					value={from}
+					onChange={(event) => setValue([event.target.value, to])}
+				/>
+				<span className="ObFilterEditor-pairSeparator">{getLocalizedString("and")}</span>
+				<Textfield
+					className="ObFilterEditor-value"
+					aria-label={getLocalizedString("To")}
+					data-size={size}
+					readOnly={readOnly}
+					type={inputType}
+					value={to}
+					onChange={(event) => setValue([from, event.target.value])}
+				/>
+			</div>
+		);
+	} else if (options) {
+		let current = toStringValue(expression.value);
+
+		editor = (
+			<Combobox
+				className="ObFilterEditor-value"
+				data-size={size}
+				readOnly={readOnly}
+				placeholder={getLocalizedString("Select value")}
+				aria-label={getLocalizedString("Value")}
+				options={options}
+				getOptionLabel={(option) => option.label ?? option.value}
+				isOptionEqualToValue={(a, b) => a.value === b.value}
+				value={current ? (options.find((option) => option.value === current) ?? { value: current }) : null}
+				onChange={(_event, selected) => setValue(selected?.value ?? "")}
+			/>
+		);
+	} else {
+		editor = (
+			<Textfield
+				className="ObFilterEditor-value"
+				aria-label={getLocalizedString("Value")}
+				data-size={size}
+				readOnly={readOnly}
+				type={inputType}
+				value={toStringValue(expression.value)}
+				onChange={(event) => setValue(event.target.value)}
+			/>
+		);
+	}
+
+	// Dynamic values are resolved server side, so they can only replace the whole
+	// value. Pairs would need one toggle per side, which the Windows editor does
+	// not offer either.
+	let canToggleDynamic = !readOnly && dynamicValues.length > 0 && arity === "single";
+
+	return (
+		<div className="ObFilterEditor-valueCell">
+			{editor}
+			{canToggleDynamic && (
+				<button
+					type="button"
+					className="ObFilterEditor-iconButton"
+					aria-pressed={isDynamic}
+					title={getLocalizedString("Use a relative value")}
+					aria-label={getLocalizedString("Use a relative value")}
+					onClick={() => setDynamic(!isDynamic)}
+				>
+					<PencilIcon aria-hidden />
+				</button>
+			)}
+		</div>
+	);
+}