@olenbetong/appframe-ds 1.0.3 → 1.2.0

package/src/filter/FilterEditor.tsx

@@ -1,74 +1,75 @@
-import "./FilterEditor.css";
-
-import { type FilterTree, getLocalizedString, toFilterTree } from "@olenbetong/appframe-core";
-import clsx from "clsx";
-import { useMemo, useState } from "react";
-
-import { FilterGroupEditor } from "./FilterGroupEditor.js";
-import { FilterStringField } from "./FilterStringField.js";
-import type { FilterEditorProps } from "./types.js";
-
-/**
- * The criteria tree of the filter builder. Groups can be nested and each group
- * combines its items with either `and` or `or`, matching the advanced filter
- * editor in the Windows client.
- *
- * Works both controlled (`value` + `onChange`) and uncontrolled
- * (`defaultValue`). Saving and sharing filters is handled by `FilterBuilder`,
- * which composes this component.
- *
- * @example
- * ```jsx
- * <FilterEditor fields={fields} value={filter} onChange={setFilter} showFilterString />
- * ```
- */
-export function FilterEditor({
-	fields,
-	value,
-	defaultValue,
-	onChange,
-	readOnly,
-	showFilterString,
-	viewName,
-	getFieldOptions,
-	className,
-	"data-size": size = "sm",
-}: FilterEditorProps) {
-	let [uncontrolled, setUncontrolled] = useState<FilterTree>(() => toFilterTree(defaultValue));
-	let isControlled = value !== undefined;
-	// Normalizing on every render would create a new tree each time, which
-	// retriggers the filter string conversion.
-	let controlled = useMemo(() => toFilterTree(value), [value]);
-	let filter = isControlled ? controlled : uncontrolled;
-
-	let visibleFields = useMemo(() => fields.filter((field) => !field.excludeFromFilter), [fields]);
-
-	function update(next: FilterTree) {
-		if (!isControlled) setUncontrolled(next);
-		onChange?.(next);
-	}
-
-	return (
-		<div className={clsx("ObFilterEditor-root", className)} data-size={size}>
-			<div className="ObFilterEditor-body">
-				<p className="ObFilterEditor-intro">
-					{filter.mode === "and"
-						? getLocalizedString("Find rows that match all of these criteria:")
-						: getLocalizedString("Find rows that match one or more of these criteria:")}
-				</p>
-				<FilterGroupEditor
-					filter={filter}
-					path={[]}
-					fields={visibleFields}
-					getFieldOptions={getFieldOptions}
-					readOnly={readOnly}
-					data-size={size}
-					onChange={update}
-				/>
-			</div>
-			{showFilterString && (
-				<FilterStringField filter={filter} viewName={viewName} readOnly={readOnly} data-size={size} onChange={update} />
-			)}
-		</div>
-	);
-}
+import "./FilterEditor.css";
+
+import { type FilterTree, toFilterTree } from "@olenbetong/appframe-core";
+import clsx from "clsx";
+import { useMemo, useState } from "react";
+
+import { FilterGroupEditor } from "./FilterGroupEditor.js";
+import { FilterStringField } from "./FilterStringField.js";
+import type { FilterEditorProps } from "./types.js";
+import { getLocalizedString } from "../i18n.js";
+
+/**
+ * The criteria tree of the filter builder. Groups can be nested and each group
+ * combines its items with either `and` or `or`, matching the advanced filter
+ * editor in the Windows client.
+ *
+ * Works both controlled (`value` + `onChange`) and uncontrolled
+ * (`defaultValue`). Saving and sharing filters is handled by `FilterBuilder`,
+ * which composes this component.
+ *
+ * @example
+ * ```jsx
+ * <FilterEditor fields={fields} value={filter} onChange={setFilter} showFilterString />
+ * ```
+ */
+export function FilterEditor({
+	fields,
+	value,
+	defaultValue,
+	onChange,
+	readOnly,
+	showFilterString,
+	viewName,
+	getFieldOptions,
+	className,
+	"data-size": size = "sm",
+}: FilterEditorProps) {
+	let [uncontrolled, setUncontrolled] = useState<FilterTree>(() => toFilterTree(defaultValue));
+	let isControlled = value !== undefined;
+	// Normalizing on every render would create a new tree each time, which
+	// retriggers the filter string conversion.
+	let controlled = useMemo(() => toFilterTree(value), [value]);
+	let filter = isControlled ? controlled : uncontrolled;
+
+	let visibleFields = useMemo(() => fields.filter((field) => !field.excludeFromFilter), [fields]);
+
+	function update(next: FilterTree) {
+		if (!isControlled) setUncontrolled(next);
+		onChange?.(next);
+	}
+
+	return (
+		<div className={clsx("ObFilterEditor-root", className)} data-size={size}>
+			<div className="ObFilterEditor-body">
+				<p className="ObFilterEditor-intro">
+					{filter.mode === "and"
+						? getLocalizedString("Find rows that match all of these criteria:")
+						: getLocalizedString("Find rows that match one or more of these criteria:")}
+				</p>
+				<FilterGroupEditor
+					filter={filter}
+					path={[]}
+					fields={visibleFields}
+					getFieldOptions={getFieldOptions}
+					readOnly={readOnly}
+					data-size={size}
+					onChange={update}
+				/>
+			</div>
+			{showFilterString && (
+				<FilterStringField filter={filter} viewName={viewName} readOnly={readOnly} data-size={size} onChange={update} />
+			)}
+		</div>
+	);
+}

package/src/filter/FilterGroupEditor.tsx

@@ -1,160 +1,160 @@
-import { Button, Select } from "@digdir/designsystemet-react";
-import { FolderPlusIcon, TrashIcon } from "@navikt/aksel-icons";
-import {
-	addGroupAtPath,
-	createExpression,
-	type FieldMetadata,
-	type FilterExpression,
-	type FilterGroup,
-	type FilterNode,
-	type FilterPath,
-	type FilterTree,
-	getLocalizedString,
-	getNodeAtPath,
-	insertNodeAtPath,
-	isExpression,
-	isGroup,
-	removeNodeAtPath,
-	setGroupMode,
-	updateNodeAtPath,
-} from "@olenbetong/appframe-core";
-import { Combobox } from "../autocomplete/index.js";
-
-import { FilterRow, getFieldLabel } from "./FilterRow.js";
-import type { FilterEditorSize, GetFieldOptions } from "./types.js";
-
-export type FilterGroupEditorProps = {
-	/** The whole tree. Groups edit it through their own `path`. */
-	filter: FilterTree;
-	/** Path to the group this editor renders. The root group is the empty path. */
-	path: FilterPath;
-	fields: FieldMetadata[];
-	onChange: (filter: FilterTree) => void;
-	getFieldOptions?: GetFieldOptions;
-	readOnly?: boolean;
-	"data-size"?: FilterEditorSize;
-};
-
-/**
- * One group of the filter tree. Groups can be nested and each one combines its
- * items with either `and` or `or`, matching the advanced (DevExpress) filter
- * editor in the Windows client.
- *
- * A blank row is always rendered at the end; picking a field in it appends a
- * real condition to the group.
- */
-export function FilterGroupEditor({
-	filter,
-	path,
-	fields,
-	onChange,
-	getFieldOptions,
-	readOnly,
-	"data-size": size = "sm",
-}: FilterGroupEditorProps) {
-	let node = getNodeAtPath(filter, path);
-	if (!node || !isGroup(node)) return null;
-
-	let group: FilterGroup = node;
-	let isRoot = path.length === 0;
-
-	return (
-		<div className="ObFilterEditor-group" data-root={isRoot ? "" : undefined}>
-			<div className="ObFilterEditor-groupHeader">
-				<Select
-					className="ObFilterEditor-groupMode"
-					data-size={size}
-					disabled={readOnly}
-					aria-label={getLocalizedString("Group operator")}
-					value={group.mode}
-					onChange={(event) => onChange(setGroupMode(filter, path, event.target.value as FilterGroup["mode"]))}
-				>
-					<Select.Option value="and">{getLocalizedString("And")}</Select.Option>
-					<Select.Option value="or">{getLocalizedString("Or")}</Select.Option>
-				</Select>
-				{!readOnly && (
-					<>
-						<Button
-							type="button"
-							variant="tertiary"
-							data-size={size}
-							className="ObFilterEditor-groupButton"
-							aria-label={getLocalizedString("Add group")}
-							onClick={() => onChange(addGroupAtPath(filter, path))}
-						>
-							<FolderPlusIcon aria-hidden />
-							<span className="ObFilterEditor-groupButtonLabel">{getLocalizedString("Add group")}</span>
-						</Button>
-						{!isRoot && (
-							<Button
-								type="button"
-								variant="tertiary"
-								data-color="danger"
-								data-size={size}
-								className="ObFilterEditor-groupButton"
-								aria-label={getLocalizedString("Remove group")}
-								onClick={() => onChange(removeNodeAtPath(filter, path))}
-							>
-								<TrashIcon aria-hidden />
-								<span className="ObFilterEditor-groupButtonLabel">{getLocalizedString("Remove group")}</span>
-							</Button>
-						)}
-					</>
-				)}
-			</div>
-			<div className="ObFilterEditor-groupItems">
-				{group.items.map((item, index) =>
-					isExpression(item) ? (
-						<FilterRow
-							// Rows have no stable identity, and reordering is not supported,
-							// so the index is the only key available.
-							// oxlint-disable-next-line no-array-index-key -- see above
-							key={index}
-							expression={item}
-							fields={fields}
-							getFieldOptions={getFieldOptions}
-							readOnly={readOnly}
-							data-size={size}
-							onChange={(next) => onChange(replaceNode(filter, [...path, index], next))}
-							onRemove={() => onChange(removeNodeAtPath(filter, [...path, index]))}
-						/>
-					) : (
-						<FilterGroupEditor
-							// oxlint-disable-next-line no-array-index-key -- see above
-							key={index}
-							filter={filter}
-							path={[...path, index]}
-							fields={fields}
-							getFieldOptions={getFieldOptions}
-							readOnly={readOnly}
-							data-size={size}
-							onChange={onChange}
-						/>
-					),
-				)}
-				{!readOnly && (
-					<div className="ObFilterEditor-row ObFilterEditor-draftRow">
-						<Combobox
-							className="ObFilterEditor-field"
-							data-size={size}
-							aria-label={getLocalizedString("Add condition")}
-							placeholder={getLocalizedString("Add condition")}
-							options={fields}
-							getOptionLabel={getFieldLabel}
-							getOptionKey={(option) => option.name}
-							isOptionEqualToValue={(a, b) => a.name === b.name}
-							value={null}
-							onChange={(_event, field) => {
-								if (field) onChange(insertNodeAtPath(filter, path, createExpression(field)));
-							}}
-						/>
-					</div>
-				)}
-			</div>
-		</div>
-	);
-}
-
-function replaceNode(filter: FilterTree, path: FilterPath, node: FilterExpression): FilterTree {
-	return updateNodeAtPath<FilterNode>(filter, path, () => node) as FilterTree;
-}
+import { Button, Select } from "@digdir/designsystemet-react";
+import { FolderPlusIcon, TrashIcon } from "@navikt/aksel-icons";
+import {
+	addGroupAtPath,
+	createExpression,
+	type FieldMetadata,
+	type FilterExpression,
+	type FilterGroup,
+	type FilterNode,
+	type FilterPath,
+	type FilterTree,
+	getNodeAtPath,
+	insertNodeAtPath,
+	isExpression,
+	isGroup,
+	removeNodeAtPath,
+	setGroupMode,
+	updateNodeAtPath,
+} from "@olenbetong/appframe-core";
+import { Combobox } from "../autocomplete/index.js";
+
+import { FilterRow, getFieldLabel } from "./FilterRow.js";
+import type { FilterEditorSize, GetFieldOptions } from "./types.js";
+import { getLocalizedString } from "../i18n.js";
+
+export type FilterGroupEditorProps = {
+	/** The whole tree. Groups edit it through their own `path`. */
+	filter: FilterTree;
+	/** Path to the group this editor renders. The root group is the empty path. */
+	path: FilterPath;
+	fields: FieldMetadata[];
+	onChange: (filter: FilterTree) => void;
+	getFieldOptions?: GetFieldOptions;
+	readOnly?: boolean;
+	"data-size"?: FilterEditorSize;
+};
+
+/**
+ * One group of the filter tree. Groups can be nested and each one combines its
+ * items with either `and` or `or`, matching the advanced (DevExpress) filter
+ * editor in the Windows client.
+ *
+ * A blank row is always rendered at the end; picking a field in it appends a
+ * real condition to the group.
+ */
+export function FilterGroupEditor({
+	filter,
+	path,
+	fields,
+	onChange,
+	getFieldOptions,
+	readOnly,
+	"data-size": size = "sm",
+}: FilterGroupEditorProps) {
+	let node = getNodeAtPath(filter, path);
+	if (!node || !isGroup(node)) return null;
+
+	let group: FilterGroup = node;
+	let isRoot = path.length === 0;
+
+	return (
+		<div className="ObFilterEditor-group" data-root={isRoot ? "" : undefined}>
+			<div className="ObFilterEditor-groupHeader">
+				<Select
+					className="ObFilterEditor-groupMode"
+					data-size={size}
+					disabled={readOnly}
+					aria-label={getLocalizedString("Group operator")}
+					value={group.mode}
+					onChange={(event) => onChange(setGroupMode(filter, path, event.target.value as FilterGroup["mode"]))}
+				>
+					<Select.Option value="and">{getLocalizedString("And")}</Select.Option>
+					<Select.Option value="or">{getLocalizedString("Or")}</Select.Option>
+				</Select>
+				{!readOnly && (
+					<>
+						<Button
+							type="button"
+							variant="tertiary"
+							data-size={size}
+							className="ObFilterEditor-groupButton"
+							aria-label={getLocalizedString("Add group")}
+							onClick={() => onChange(addGroupAtPath(filter, path))}
+						>
+							<FolderPlusIcon aria-hidden />
+							<span className="ObFilterEditor-groupButtonLabel">{getLocalizedString("Add group")}</span>
+						</Button>
+						{!isRoot && (
+							<Button
+								type="button"
+								variant="tertiary"
+								data-color="danger"
+								data-size={size}
+								className="ObFilterEditor-groupButton"
+								aria-label={getLocalizedString("Remove group")}
+								onClick={() => onChange(removeNodeAtPath(filter, path))}
+							>
+								<TrashIcon aria-hidden />
+								<span className="ObFilterEditor-groupButtonLabel">{getLocalizedString("Remove group")}</span>
+							</Button>
+						)}
+					</>
+				)}
+			</div>
+			<div className="ObFilterEditor-groupItems">
+				{group.items.map((item, index) =>
+					isExpression(item) ? (
+						<FilterRow
+							// Rows have no stable identity, and reordering is not supported,
+							// so the index is the only key available.
+							// oxlint-disable-next-line no-array-index-key -- see above
+							key={index}
+							expression={item}
+							fields={fields}
+							getFieldOptions={getFieldOptions}
+							readOnly={readOnly}
+							data-size={size}
+							onChange={(next) => onChange(replaceNode(filter, [...path, index], next))}
+							onRemove={() => onChange(removeNodeAtPath(filter, [...path, index]))}
+						/>
+					) : (
+						<FilterGroupEditor
+							// oxlint-disable-next-line no-array-index-key -- see above
+							key={index}
+							filter={filter}
+							path={[...path, index]}
+							fields={fields}
+							getFieldOptions={getFieldOptions}
+							readOnly={readOnly}
+							data-size={size}
+							onChange={onChange}
+						/>
+					),
+				)}
+				{!readOnly && (
+					<div className="ObFilterEditor-row ObFilterEditor-draftRow">
+						<Combobox
+							className="ObFilterEditor-field"
+							data-size={size}
+							aria-label={getLocalizedString("Add condition")}
+							placeholder={getLocalizedString("Add condition")}
+							options={fields}
+							getOptionLabel={getFieldLabel}
+							getOptionKey={(option) => option.name}
+							isOptionEqualToValue={(a, b) => a.name === b.name}
+							value={null}
+							onChange={(_event, field) => {
+								if (field) onChange(insertNodeAtPath(filter, path, createExpression(field)));
+							}}
+						/>
+					</div>
+				)}
+			</div>
+		</div>
+	);
+}
+
+function replaceNode(filter: FilterTree, path: FilterPath, node: FilterExpression): FilterTree {
+	return updateNodeAtPath<FilterNode>(filter, path, () => node) as FilterTree;
+}

package/src/filter/FilterNameDialog.css

@@ -1,22 +1,22 @@
-/*
- * Colours use the contextual `--ds-color-*` aliases so the dialog follows the
- * active colour scheme. Never add hex fallbacks.
- */
-
-/*
- * Designsystemet drops the dialog's own padding when its children are blocks,
- * but the rule only looks at direct children, and the blocks here are wrapped
- * in the form. Without this the blocks are inset and their dividers stop short
- * of the dialog's edges.
- */
-.ObFilterNameDialog-root {
-	inline-size: min(28rem, 100%);
-	padding: 0;
-}
-
-.ObFilterNameDialog-actions {
-	display: flex;
-	flex-direction: row;
-	justify-content: flex-end;
-	gap: var(--ds-size-2);
-}
+/*
+ * Colours use the contextual `--ds-color-*` aliases so the dialog follows the
+ * active colour scheme. Never add hex fallbacks.
+ */
+
+/*
+ * Designsystemet drops the dialog's own padding when its children are blocks,
+ * but the rule only looks at direct children, and the blocks here are wrapped
+ * in the form. Without this the blocks are inset and their dividers stop short
+ * of the dialog's edges.
+ */
+.ObFilterNameDialog-root {
+	inline-size: min(28rem, 100%);
+	padding: 0;
+}
+
+.ObFilterNameDialog-actions {
+	display: flex;
+	flex-direction: row;
+	justify-content: flex-end;
+	gap: var(--ds-size-2);
+}