@olenbetong/appframe-ds 1.0.3 → 1.2.0

package/src/filter/FilterValueEditor.tsx

@@ -1,220 +1,220 @@
-import { Select, Textfield } from "@digdir/designsystemet-react";
-import { PencilIcon } from "@navikt/aksel-icons";
-import {
-	type DynamicValue,
-	type FieldMetadata,
-	type FilterExpression,
-	type FilterOperator,
-	getDynamicValueLabel,
-	getDynamicValuesForField,
-	getLocalizedString,
-	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";
-
-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);
-}
-
-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 });
-	}
-
-	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);
+}
+
+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 });
+	}
+
+	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>
+	);
+}

package/src/filter/SavedFilterTree.css

@@ -1,107 +1,107 @@
-/*
- * Colours use the contextual `--ds-color-*` aliases so the tree follows the
- * active colour scheme. Never add hex fallbacks — they only encode the light
- * theme and silently mask misspelled tokens.
- */
-
-.ObSavedFilterTree-root,
-.ObSavedFilterTree-children {
-	list-style: none;
-	margin: 0;
-	padding: 0;
-}
-
-.ObSavedFilterTree-children {
-	/*
-	 * A branch is chevron + icon, a child only an icon, so matching the branch
-	 * indent would put a child's icon under its parent's icon and make the two
-	 * levels look like one. Indent past the branch icon instead, so a child's
-	 * icon starts where its parent's label does.
-	 */
-	margin-inline-start: calc(var(--ds-size-6) + var(--ds-size-1) + var(--ds-size-6));
-}
-
-.ObSavedFilterTree-item {
-	display: flex;
-	align-items: center;
-	gap: var(--ds-size-1);
-}
-
-.ObSavedFilterTree-node {
-	display: flex;
-	align-items: center;
-	gap: var(--ds-size-1);
-	flex: 1;
-	min-inline-size: 0;
-	padding: var(--ds-size-1) var(--ds-size-2);
-	border: none;
-	border-radius: var(--ds-border-radius-sm);
-	background: none;
-	color: var(--ds-color-neutral-text-default);
-	font: inherit;
-	text-align: start;
-	cursor: pointer;
-}
-
-.ObSavedFilterTree-node:hover {
-	background: var(--ds-color-neutral-surface-hover);
-}
-
-.ObSavedFilterTree-node:focus-visible {
-	outline: var(--ds-border-width-focus) solid var(--ds-color-focus-outer);
-	outline-offset: var(--ds-border-width-focus);
-}
-
-.ObSavedFilterTree-selected {
-	background: var(--ds-color-neutral-surface-active);
-}
-
-.ObSavedFilterTree-dirty .ObSavedFilterTree-label {
-	font-weight: var(--ds-font-weight-semibold);
-}
-
-.ObSavedFilterTree-chevron,
-.ObSavedFilterTree-icon {
-	display: inline-flex;
-	flex: none;
-	align-items: center;
-	justify-content: center;
-	inline-size: var(--ds-size-6);
-	block-size: var(--ds-size-6);
-	color: var(--ds-color-neutral-text-subtle);
-}
-
-.ObSavedFilterTree-chevron > *,
-.ObSavedFilterTree-icon > * {
-	inline-size: 100%;
-	block-size: 100%;
-}
-
-.ObSavedFilterTree-label {
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-.ObSavedFilterTree-empty {
-	/* Lines up with the child labels, past their icon. */
-	padding: var(--ds-size-1) var(--ds-size-2) var(--ds-size-1)
-		calc(var(--ds-size-2) + var(--ds-size-6) + var(--ds-size-1));
-	color: var(--ds-color-neutral-text-subtle);
-	font-style: italic;
-}
-
-/*
- * The menu button only appears on hover/focus on pointer devices; on touch it is
- * always visible because there is no hover to reveal it.
- */
-@media (hover: hover) {
-	.ObSavedFilterTree-menuButton {
-		visibility: hidden;
-	}
-
-	.ObSavedFilterTree-item:hover .ObSavedFilterTree-menuButton,
-	.ObSavedFilterTree-item:focus-within .ObSavedFilterTree-menuButton {
-		visibility: visible;
-	}
-}
+/*
+ * Colours use the contextual `--ds-color-*` aliases so the tree follows the
+ * active colour scheme. Never add hex fallbacks — they only encode the light
+ * theme and silently mask misspelled tokens.
+ */
+
+.ObSavedFilterTree-root,
+.ObSavedFilterTree-children {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+
+.ObSavedFilterTree-children {
+	/*
+	 * A branch is chevron + icon, a child only an icon, so matching the branch
+	 * indent would put a child's icon under its parent's icon and make the two
+	 * levels look like one. Indent past the branch icon instead, so a child's
+	 * icon starts where its parent's label does.
+	 */
+	margin-inline-start: calc(var(--ds-size-6) + var(--ds-size-1) + var(--ds-size-6));
+}
+
+.ObSavedFilterTree-item {
+	display: flex;
+	align-items: center;
+	gap: var(--ds-size-1);
+}
+
+.ObSavedFilterTree-node {
+	display: flex;
+	align-items: center;
+	gap: var(--ds-size-1);
+	flex: 1;
+	min-inline-size: 0;
+	padding: var(--ds-size-1) var(--ds-size-2);
+	border: none;
+	border-radius: var(--ds-border-radius-sm);
+	background: none;
+	color: var(--ds-color-neutral-text-default);
+	font: inherit;
+	text-align: start;
+	cursor: pointer;
+}
+
+.ObSavedFilterTree-node:hover {
+	background: var(--ds-color-neutral-surface-hover);
+}
+
+.ObSavedFilterTree-node:focus-visible {
+	outline: var(--ds-border-width-focus) solid var(--ds-color-focus-outer);
+	outline-offset: var(--ds-border-width-focus);
+}
+
+.ObSavedFilterTree-selected {
+	background: var(--ds-color-neutral-surface-active);
+}
+
+.ObSavedFilterTree-dirty .ObSavedFilterTree-label {
+	font-weight: var(--ds-font-weight-semibold);
+}
+
+.ObSavedFilterTree-chevron,
+.ObSavedFilterTree-icon {
+	display: inline-flex;
+	flex: none;
+	align-items: center;
+	justify-content: center;
+	inline-size: var(--ds-size-6);
+	block-size: var(--ds-size-6);
+	color: var(--ds-color-neutral-text-subtle);
+}
+
+.ObSavedFilterTree-chevron > *,
+.ObSavedFilterTree-icon > * {
+	inline-size: 100%;
+	block-size: 100%;
+}
+
+.ObSavedFilterTree-label {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.ObSavedFilterTree-empty {
+	/* Lines up with the child labels, past their icon. */
+	padding: var(--ds-size-1) var(--ds-size-2) var(--ds-size-1)
+		calc(var(--ds-size-2) + var(--ds-size-6) + var(--ds-size-1));
+	color: var(--ds-color-neutral-text-subtle);
+	font-style: italic;
+}
+
+/*
+ * The menu button only appears on hover/focus on pointer devices; on touch it is
+ * always visible because there is no hover to reveal it.
+ */
+@media (hover: hover) {
+	.ObSavedFilterTree-menuButton {
+		visibility: hidden;
+	}
+
+	.ObSavedFilterTree-item:hover .ObSavedFilterTree-menuButton,
+	.ObSavedFilterTree-item:focus-within .ObSavedFilterTree-menuButton {
+		visibility: visible;
+	}
+}