@olenbetong/appframe-ds 1.6.0 → 1.7.0

package/src/autocomplete/utils.ts

@@ -1,183 +1,183 @@
-import { useCallback, useRef, useState } from "react";
-
-import type {
-	AutocompleteChangeReason,
-	AutocompleteFilterOptionsState,
-	AutocompleteInputChangeReason,
-} from "./types.js";
-
-/**
- * Default label resolver: uses `label`, then `name`, then the value itself.
- */
-export function defaultGetOptionLabel(option: unknown): string {
-	if (option == null) return "";
-	if (typeof option === "string") return option;
-	if (typeof option === "object") {
-		let record = option as Record<string, unknown>;
-		if (typeof record.label === "string") return record.label;
-		if (typeof record.name === "string") return record.name;
-	}
-
-	return String(option);
-}
-
-export interface CreateFilterOptionsConfig<Option> {
-	/**
-	 * Removes diacritics before matching.
-	 * @default true
-	 */
-	ignoreAccents?: boolean;
-	/**
-	 * Matches case insensitively.
-	 * @default true
-	 */
-	ignoreCase?: boolean;
-	/**
-	 * Where in the option label the query has to match.
-	 * @default "any"
-	 */
-	matchFrom?: "any" | "start";
-	/**
-	 * The maximum number of options returned.
-	 */
-	limit?: number;
-	/**
-	 * Trims the query before matching.
-	 * @default false
-	 */
-	trim?: boolean;
-	/**
-	 * Returns the string the query is matched against.
-	 */
-	stringify?: (option: Option) => string;
-}
-
-/**
- * Creates a filter function for the `filterOptions` prop, equivalent to MUI's
- * `createFilterOptions`.
- *
- * @example
- * ```jsx
- * let filterOptions = createFilterOptions({ matchFrom: "start", limit: 20 });
- * <Combobox options={options} filterOptions={filterOptions} />
- * ```
- */
-export function createFilterOptions<Option>(config: CreateFilterOptionsConfig<Option> = {}) {
-	let { ignoreAccents = true, ignoreCase = true, limit, matchFrom = "any", stringify, trim = false } = config;
-
-	return (options: readonly Option[], state: AutocompleteFilterOptionsState<Option>) => {
-		let input = trim ? state.inputValue.trim() : state.inputValue;
-		if (ignoreCase) input = input.toLowerCase();
-		if (ignoreAccents) input = stripDiacritics(input);
-
-		let filtered = input
-			? options.filter((option) => {
-					let candidate = (stringify ?? state.getOptionLabel)(option);
-					if (ignoreCase) candidate = candidate.toLowerCase();
-					if (ignoreAccents) candidate = stripDiacritics(candidate);
-
-					return matchFrom === "start" ? candidate.startsWith(input) : candidate.includes(input);
-				})
-			: [...options];
-
-		return typeof limit === "number" ? filtered.slice(0, limit) : filtered;
-	};
-}
-
-function stripDiacritics(value: string) {
-	return value.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
-}
-
-export const defaultFilterOptions = createFilterOptions<unknown>();
-
-export interface OptionGroup<Option> {
-	/**
-	 * Group header text. Named `value` because Base UI uses it as the group key.
-	 */
-	value: string;
-	items: Option[];
-	[key: string]: unknown;
-}
-
-/**
- * Splits an already sorted list of options into consecutive groups, the same
- * way MUI's `groupBy` works.
- */
-export function groupOptions<Option>(options: readonly Option[], groupBy: (option: Option) => string) {
-	let groups: OptionGroup<Option>[] = [];
-
-	for (let option of options) {
-		let group = groupBy(option);
-		let last = groups[groups.length - 1];
-
-		if (last && last.value === group) {
-			last.items.push(option);
-		} else {
-			groups.push({ value: group, items: [option] });
-		}
-	}
-
-	return groups;
-}
-
-/**
- * State that is controlled when `controlled` is not `undefined`, and
- * uncontrolled otherwise.
- */
-export function useControlled<T>(controlled: T | undefined, defaultValue: T) {
-	let [uncontrolled, setUncontrolled] = useState(defaultValue);
-	let isControlled = useRef(controlled !== undefined).current;
-	let value = isControlled ? (controlled as T) : uncontrolled;
-
-	let setValue = useCallback(
-		(next: T) => {
-			if (!isControlled) setUncontrolled(next);
-		},
-		[isControlled],
-	);
-
-	return [value, setValue] as const;
-}
-
-/**
- * Compares two options, falling back to reference equality like MUI does.
- */
-export function areOptionsEqual<Option>(
-	a: Option,
-	b: Option,
-	isOptionEqualToValue?: (option: Option, value: Option) => boolean,
-) {
-	return isOptionEqualToValue ? isOptionEqualToValue(a, b) : Object.is(a, b);
-}
-
-/**
- * Maps a Base UI change reason to the MUI-style reason.
- */
-export function mapChangeReason(reason: string, next: unknown): AutocompleteChangeReason {
-	if (reason === "clear-press" || reason === "input-clear") return "clear";
-	if (reason === "chip-remove-press") return "removeOption";
-	if (next == null || (Array.isArray(next) && next.length === 0)) return "clear";
-
-	return "selectOption";
-}
-
-function mapInputChangeReason(reason: string): AutocompleteInputChangeReason {
-	if (reason === "input-change") return "input";
-	if (reason === "input-clear" || reason === "clear-press") return "clear";
-
-	return "reset";
-}
-
-/**
- * Keeps the input value state in sync and forwards the change to
- * `onInputChange` with a MUI-style reason.
- */
-export function handleInputValueChange(
-	next: string,
-	details: { event?: Event; reason: string },
-	setInputValue: (value: string) => void,
-	onInputChange?: (event: Event | undefined, value: string, reason: AutocompleteInputChangeReason) => void,
-) {
-	setInputValue(next);
-	onInputChange?.(details.event, next, mapInputChangeReason(details.reason));
-}
+import { useCallback, useRef, useState } from "react";
+
+import type {
+	AutocompleteChangeReason,
+	AutocompleteFilterOptionsState,
+	AutocompleteInputChangeReason,
+} from "./types.js";
+
+/**
+ * Default label resolver: uses `label`, then `name`, then the value itself.
+ */
+export function defaultGetOptionLabel(option: unknown): string {
+	if (option == null) return "";
+	if (typeof option === "string") return option;
+	if (typeof option === "object") {
+		let record = option as Record<string, unknown>;
+		if (typeof record.label === "string") return record.label;
+		if (typeof record.name === "string") return record.name;
+	}
+
+	return String(option);
+}
+
+export interface CreateFilterOptionsConfig<Option> {
+	/**
+	 * Removes diacritics before matching.
+	 * @default true
+	 */
+	ignoreAccents?: boolean;
+	/**
+	 * Matches case insensitively.
+	 * @default true
+	 */
+	ignoreCase?: boolean;
+	/**
+	 * Where in the option label the query has to match.
+	 * @default "any"
+	 */
+	matchFrom?: "any" | "start";
+	/**
+	 * The maximum number of options returned.
+	 */
+	limit?: number;
+	/**
+	 * Trims the query before matching.
+	 * @default false
+	 */
+	trim?: boolean;
+	/**
+	 * Returns the string the query is matched against.
+	 */
+	stringify?: (option: Option) => string;
+}
+
+/**
+ * Creates a filter function for the `filterOptions` prop, equivalent to MUI's
+ * `createFilterOptions`.
+ *
+ * @example
+ * ```jsx
+ * let filterOptions = createFilterOptions({ matchFrom: "start", limit: 20 });
+ * <Combobox options={options} filterOptions={filterOptions} />
+ * ```
+ */
+export function createFilterOptions<Option>(config: CreateFilterOptionsConfig<Option> = {}) {
+	let { ignoreAccents = true, ignoreCase = true, limit, matchFrom = "any", stringify, trim = false } = config;
+
+	return (options: readonly Option[], state: AutocompleteFilterOptionsState<Option>) => {
+		let input = trim ? state.inputValue.trim() : state.inputValue;
+		if (ignoreCase) input = input.toLowerCase();
+		if (ignoreAccents) input = stripDiacritics(input);
+
+		let filtered = input
+			? options.filter((option) => {
+					let candidate = (stringify ?? state.getOptionLabel)(option);
+					if (ignoreCase) candidate = candidate.toLowerCase();
+					if (ignoreAccents) candidate = stripDiacritics(candidate);
+
+					return matchFrom === "start" ? candidate.startsWith(input) : candidate.includes(input);
+				})
+			: [...options];
+
+		return typeof limit === "number" ? filtered.slice(0, limit) : filtered;
+	};
+}
+
+function stripDiacritics(value: string) {
+	return value.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
+}
+
+export const defaultFilterOptions = createFilterOptions<unknown>();
+
+export interface OptionGroup<Option> {
+	/**
+	 * Group header text. Named `value` because Base UI uses it as the group key.
+	 */
+	value: string;
+	items: Option[];
+	[key: string]: unknown;
+}
+
+/**
+ * Splits an already sorted list of options into consecutive groups, the same
+ * way MUI's `groupBy` works.
+ */
+export function groupOptions<Option>(options: readonly Option[], groupBy: (option: Option) => string) {
+	let groups: OptionGroup<Option>[] = [];
+
+	for (let option of options) {
+		let group = groupBy(option);
+		let last = groups[groups.length - 1];
+
+		if (last && last.value === group) {
+			last.items.push(option);
+		} else {
+			groups.push({ value: group, items: [option] });
+		}
+	}
+
+	return groups;
+}
+
+/**
+ * State that is controlled when `controlled` is not `undefined`, and
+ * uncontrolled otherwise.
+ */
+export function useControlled<T>(controlled: T | undefined, defaultValue: T) {
+	let [uncontrolled, setUncontrolled] = useState(defaultValue);
+	let isControlled = useRef(controlled !== undefined).current;
+	let value = isControlled ? (controlled as T) : uncontrolled;
+
+	let setValue = useCallback(
+		(next: T) => {
+			if (!isControlled) setUncontrolled(next);
+		},
+		[isControlled],
+	);
+
+	return [value, setValue] as const;
+}
+
+/**
+ * Compares two options, falling back to reference equality like MUI does.
+ */
+export function areOptionsEqual<Option>(
+	a: Option,
+	b: Option,
+	isOptionEqualToValue?: (option: Option, value: Option) => boolean,
+) {
+	return isOptionEqualToValue ? isOptionEqualToValue(a, b) : Object.is(a, b);
+}
+
+/**
+ * Maps a Base UI change reason to the MUI-style reason.
+ */
+export function mapChangeReason(reason: string, next: unknown): AutocompleteChangeReason {
+	if (reason === "clear-press" || reason === "input-clear") return "clear";
+	if (reason === "chip-remove-press") return "removeOption";
+	if (next == null || (Array.isArray(next) && next.length === 0)) return "clear";
+
+	return "selectOption";
+}
+
+function mapInputChangeReason(reason: string): AutocompleteInputChangeReason {
+	if (reason === "input-change") return "input";
+	if (reason === "input-clear" || reason === "clear-press") return "clear";
+
+	return "reset";
+}
+
+/**
+ * Keeps the input value state in sync and forwards the change to
+ * `onInputChange` with a MUI-style reason.
+ */
+export function handleInputValueChange(
+	next: string,
+	details: { event?: Event; reason: string },
+	setInputValue: (value: string) => void,
+	onInputChange?: (event: Event | undefined, value: string, reason: AutocompleteInputChangeReason) => void,
+) {
+	setInputValue(next);
+	onInputChange?.(details.event, next, mapInputChangeReason(details.reason));
+}

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(",", ".")));
+				}
+			}}
+		/>
+	);
+}