@olenbetong/appframe-ds 0.7.0 → 0.9.0

package/src/autocomplete/Combobox.tsx

@@ -4,7 +4,7 @@ import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
 import { ChipRemovable } from "@digdir/designsystemet-react";
 import { ChevronDownIcon } from "@navikt/aksel-icons";
 import { getLocalizedString } from "@olenbetong/appframe-core";
-import { useId, useMemo } from "react";
+import { useEffect, useId, useMemo, useRef } from "react";
 
 import { AutocompleteFrame } from "./AutocompleteFrame.js";
 import type { AutocompleteBaseProps, AutocompleteChangeReason, AutocompleteValue } from "./types.js";
@@ -107,6 +107,7 @@ export function Combobox<Option, Multiple extends boolean | undefined = false>(p
 		disableClearable,
 		placeholder,
 		inputRef,
+		"aria-label": ariaLabel,
 		"data-size": size,
 		"data-color": color,
 	} = props;
@@ -116,7 +117,18 @@ export function Combobox<Option, Multiple extends boolean | undefined = false>(p
 
 	let emptyValue = (multiple ? [] : null) as AutocompleteValue<Option, Multiple>;
 	let [value, setValue] = useControlled(valueProp, defaultValue ?? emptyValue);
-	let [inputValue, setInputValue] = useControlled(inputValueProp, "");
+	// The input shows the selected option's label. Base UI keeps it in sync while
+	// the user interacts, but not when the selection is set from the outside.
+	let selectedLabel = multiple || value == null ? "" : getOptionLabel(value as Option);
+	let [inputValue, setInputValue] = useControlled(inputValueProp, selectedLabel);
+	let previousLabel = useRef(selectedLabel);
+
+	useEffect(() => {
+		if (previousLabel.current === selectedLabel) return;
+
+		previousLabel.current = selectedLabel;
+		setInputValue(selectedLabel);
+	}, [selectedLabel, setInputValue]);
 
 	let filteredOptions = useMemo(() => {
 		let filter = (filterOptions ?? defaultFilterOptions) as (
@@ -240,6 +252,7 @@ export function Combobox<Option, Multiple extends boolean | undefined = false>(p
 				loading={loading}
 				disableClearable={disableClearable}
 				inputRef={inputRef}
+				aria-label={ariaLabel}
 				chips={chips}
 				trigger={
 					<BaseCombobox.Trigger

package/src/autocomplete/types.ts

@@ -195,6 +195,10 @@ export interface AutocompleteBaseProps<Option, Multiple extends boolean | undefi
 	 */
 	popupClassName?: string;
 	inputRef?: Ref<HTMLInputElement>;
+	/**
+	 * Accessible name for the input. Use when the field has no visible label.
+	 */
+	"aria-label"?: string;
 	"data-size"?: AutocompleteSize;
 	"data-color"?: string;
 }

package/src/container/Container.tsx

@@ -0,0 +1,49 @@
+import { PageBlock, type PageBlockProps, type PageBlockWidth } from "../page/PageBlock.js";
+
+export const containerMaxWidths = ["xs", "sm", "md", "lg", "xl"] as const;
+
+export type ContainerMaxWidth = (typeof containerMaxWidths)[number];
+
+const maxWidthToBlockWidth: Record<ContainerMaxWidth, PageBlockWidth> = {
+	xs: "text",
+	sm: "text",
+	md: "md",
+	lg: "lg",
+	xl: "xl",
+};
+
+export type ContainerProps = Omit<PageBlockProps, "width"> & {
+	/**
+	 * Predefined max-width, using the same scale as MUI `Container`. Content is
+	 * horizontally centered.
+	 *
+	 * - `xs`/`sm`: 36rem (576px) — recommended line-length for running text
+	 * - `md`: 48rem (768px)
+	 * - `lg`: 64rem (1024px)
+	 * - `xl`: 80rem (1280px)
+	 * - `false`: no max-width
+	 *
+	 * @default "lg"
+	 */
+	maxWidth?: ContainerMaxWidth | false;
+};
+
+/**
+ * Centered, max-width content wrapper — the MUI `Container` equivalent.
+ *
+ * A thin alias over `Page.Block` with gutters enabled by default, for the very
+ * common case of "center this content and give it sensible side padding"
+ * without having to reach for the full `Page` composition.
+ *
+ * @example
+ * ```jsx
+ * <Container maxWidth="sm">
+ *   <Heading>Expenses</Heading>
+ * </Container>
+ * ```
+ */
+export function Container({ gutters = true, maxWidth = "lg", ...props }: ContainerProps) {
+	let width = maxWidth === false ? undefined : maxWidthToBlockWidth[maxWidth];
+
+	return <PageBlock gutters={gutters} width={width} {...props} />;
+}

package/src/container/index.ts

@@ -0,0 +1 @@
+export * from "./Container.js";

package/src/filter/ChipListInput.tsx

@@ -0,0 +1,79 @@
+import { ChipRemovable, Textfield } from "@digdir/designsystemet-react";
+import { getLocalizedString } from "@olenbetong/appframe-core";
+import { useState } from "react";
+
+export type ChipListInputProps = {
+	value: string[];
+	onChange: (value: string[]) => void;
+	readOnly?: boolean;
+	"aria-label": string;
+	"data-size"?: "sm" | "md" | "lg";
+	type?: "text" | "number" | "date" | "datetime-local";
+};
+
+/**
+ * Free text editor for the list operators. Values are added with Enter and
+ * rendered as removable chips.
+ */
+export function ChipListInput({
+	value,
+	onChange,
+	readOnly,
+	type = "text",
+	"aria-label": ariaLabel,
+	"data-size": size,
+}: ChipListInputProps) {
+	let [draft, setDraft] = useState("");
+
+	function commit() {
+		let trimmed = draft.trim();
+		if (!trimmed || value.includes(trimmed)) {
+			setDraft("");
+			return;
+		}
+
+		onChange([...value, trimmed]);
+		setDraft("");
+	}
+
+	function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {
+		if (event.key === "Enter") {
+			// The editor is often rendered inside a dialog; committing a value
+			// must not submit or close it.
+			event.preventDefault();
+			commit();
+		} else if (event.key === "Backspace" && draft === "" && value.length > 0) {
+			onChange(value.slice(0, -1));
+		}
+	}
+
+	return (
+		<div className="ObFilterEditor-chipList">
+			{value.map((item, index) => (
+				<ChipRemovable
+					// Values are deduplicated on add, so the value is a stable key.
+					key={item}
+					data-size={size}
+					disabled={readOnly}
+					aria-label={`${getLocalizedString("Remove")} ${item}`}
+					onClick={() => onChange(value.filter((_, i) => i !== index))}
+				>
+					{item}
+				</ChipRemovable>
+			))}
+			{!readOnly && (
+				<Textfield
+					className="ObFilterEditor-chipListInput"
+					aria-label={ariaLabel}
+					data-size={size}
+					type={type}
+					value={draft}
+					placeholder={getLocalizedString("Add value")}
+					onChange={(event) => setDraft(event.target.value)}
+					onKeyDown={handleKeyDown}
+					onBlur={commit}
+				/>
+			)}
+		</div>
+	);
+}

package/src/filter/FieldFilterPanel.css

@@ -0,0 +1,127 @@
+.ObFieldFilterPanel-root {
+	display: flex;
+	flex-direction: column;
+	gap: var(--ds-size-3, 0.75rem);
+
+	/*
+	 * The panel is sized by whatever it is put in — a popover, a dialog, a
+	 * sidebar. It fills that container and lets the distinct list take up the
+	 * slack, so the list grows and shrinks with the container instead of
+	 * carrying a height of its own.
+	 */
+	block-size: 100%;
+	min-block-size: 0;
+}
+
+.ObFieldFilterPanel-heading {
+	font-weight: var(--ds-font-weight-medium, 500);
+	color: var(--ds-color-neutral-text-default);
+}
+
+.ObFieldFilterPanel-criteria {
+	display: flex;
+	flex-direction: column;
+	flex: 0 0 auto;
+	gap: var(--ds-size-2, 0.5rem);
+}
+
+.ObFieldFilterPanel-criterion {
+	display: flex;
+	flex-direction: column;
+	gap: var(--ds-size-1, 0.25rem);
+}
+
+/*
+ * The filter editor's value cell is written for the filter builder's horizontal
+ * rows, where growing is what makes it fill the row. Stacked vertically that
+ * same `flex-grow` makes it stretch to fill the whole panel instead.
+ */
+.ObFieldFilterPanel-criterion > .ObFilterEditor-valueCell {
+	flex: 0 0 auto;
+}
+
+.ObFieldFilterPanel-distinct {
+	display: flex;
+	flex-direction: column;
+	flex: 1 1 auto;
+	gap: var(--ds-size-2, 0.5rem);
+	min-block-size: 0;
+	padding-block-start: var(--ds-size-2, 0.5rem);
+	border-block-start: var(--ds-border-width-default, 1px) solid var(--ds-color-neutral-border-subtle, #e7e7e7);
+}
+
+.ObFieldFilterPanel-distinctToolbar {
+	display: flex;
+	flex: 0 0 auto;
+	gap: var(--ds-size-1, 0.25rem);
+	align-items: center;
+}
+
+.ObFieldFilterPanel-distinctToolbar .ds-search {
+	flex: 1;
+	min-inline-size: 0;
+}
+
+/*
+ * The active sort is held down, so it is clear which of the two is in effect.
+ * Neutral tokens rather than accent ones: the accent scale is only defined
+ * inside a `data-color` scope, and the panel can be dropped anywhere.
+ */
+.ObFieldFilterPanel-distinctToolbar .ds-button[aria-pressed="true"] {
+	color: var(--ds-color-neutral-text-default, #292c30);
+	background: var(--ds-color-neutral-surface-active, #c9cacb);
+	box-shadow: inset 0 0 0 var(--ds-border-width-default, 1px) var(--ds-color-neutral-border-subtle, #e7e7e7);
+}
+
+/*
+ * Both the list and the spinner that replaces it while loading use this box, so
+ * the panel does not jump when the values arrive. It is the part that takes up
+ * whatever room the container has left, and it never collapses to nothing.
+ */
+.ObFieldFilterPanel-valuesBox {
+	flex: 1 1 auto;
+	min-block-size: 8rem;
+	border: var(--ds-border-width-default, 1px) solid var(--ds-color-neutral-border-subtle, #e7e7e7);
+	border-radius: var(--ds-border-radius-md, 0.25rem);
+	background: var(--ds-color-neutral-surface-tinted, rgb(0 0 0 / 2%));
+}
+
+.ObFieldFilterPanel-values {
+	display: flex;
+	flex-direction: column;
+	gap: var(--ds-size-1, 0.25rem);
+	margin: 0;
+	padding: var(--ds-size-1, 0.25rem);
+	overflow-y: auto;
+	list-style: none;
+}
+
+.ObFieldFilterPanel-value {
+	padding-inline: var(--ds-size-1, 0.25rem);
+}
+
+.ObFieldFilterPanel-loading {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: var(--ds-size-4, 1rem);
+}
+
+.ObFieldFilterPanel-error {
+	margin: 0;
+	color: var(--ds-color-danger-text-default);
+}
+
+.ObFieldFilterPanel-hint {
+	margin: 0;
+	flex: 0 0 auto;
+	font-size: var(--ds-font-size-1, 0.75rem);
+	color: var(--ds-color-neutral-text-subtle, #68707c);
+}
+
+.ObFieldFilterPanel-actions {
+	display: flex;
+	flex: 0 0 auto;
+	gap: var(--ds-size-2, 0.5rem);
+	justify-content: flex-end;
+}

package/src/filter/FieldFilterPanel.tsx

@@ -0,0 +1,309 @@
+import "./FieldFilterPanel.css";
+
+import { Button, Checkbox, Search, Spinner } from "@digdir/designsystemet-react";
+import { BarChartIcon, PlusIcon, SortUpIcon } from "@navikt/aksel-icons";
+import {
+	changeOperator,
+	createExpression,
+	type FieldMetadata,
+	type FilterExpression,
+	type FilterOperator,
+	type FilterTree,
+	getLocalizedString,
+	getOperatorLabel,
+	getOperatorsForField,
+	normalizeOperator,
+} from "@olenbetong/appframe-core";
+import type { DataObject } from "@olenbetong/appframe-data";
+import clsx from "clsx";
+import { type ReactNode, useMemo, useState } from "react";
+
+import { getInListValues, setInListValues } from "./fieldFilter.js";
+import { FilterValueEditor } from "./FilterValueEditor.js";
+import { supportsDistinctValues, useDistinctValues } from "./useDistinctValues.js";
+
+export type FieldFilterPanelProps = {
+	/** The field being filtered. Decides the operators and the value editor. */
+	field: FieldMetadata;
+	/** Data object the distinct value list is loaded from. */
+	dataObject: DataObject<any>;
+	/** The field's criteria. Controlled — the panel never stages edits itself. */
+	value: FilterExpression[];
+	onChange: (expressions: FilterExpression[]) => void;
+	/**
+	 * Heading above the criteria. Defaults to the field's caption; pass `null`
+	 * to leave it out, e.g. when the surrounding dialog already has a title.
+	 */
+	heading?: ReactNode;
+	/**
+	 * The filter the field lives in, used to scope the distinct value list to
+	 * the rows the other criteria leave. The field's own criteria are ignored,
+	 * so unchecking a value does not make the remaining values disappear.
+	 */
+	filter?: FilterTree | null;
+	/** Set to false to leave out the distinct value list. */
+	showDistinctValues?: boolean;
+	/** Rendered at the bottom, for actions such as Clear and Apply. */
+	children?: ReactNode;
+	className?: string;
+};
+
+type DistinctSort = "value" | "count";
+
+/**
+ * Filter criteria for a single field: a row per criterion, a button to add
+ * another, and a checkable list of the field's distinct values.
+ *
+ * The list of values is loaded straight from the data object's data handler,
+ * so the data object's own data and parameters are untouched. It is only shown
+ * for the types where it makes sense (string, number, uniqueidentifier) and
+ * only ever loads a bounded number of values — it is a picker, not a report.
+ *
+ * The checkboxes own the field's single `inlist` criterion, which is why that
+ * criterion is not also shown as a criterion row.
+ *
+ * The component is fully controlled. To let the user cancel, keep a draft in
+ * the caller and only commit it on apply — that is what `AfGrid`'s header
+ * filter panel does.
+ *
+ * @example
+ * ```jsx
+ * let [criteria, setCriteria] = useState([]);
+ *
+ * <FieldFilterPanel field={field} dataObject={dsProjects} value={criteria} onChange={setCriteria}>
+ *   <Button onClick={() => setCriteria([])}>Clear</Button>
+ * </FieldFilterPanel>
+ * ```
+ */
+export function FieldFilterPanel({
+	field,
+	dataObject,
+	value,
+	onChange,
+	heading,
+	filter = null,
+	showDistinctValues = true,
+	children,
+	className,
+}: FieldFilterPanelProps) {
+	let [search, setSearch] = useState("");
+	let [sort, setSort] = useState<DistinctSort>("value");
+
+	let showDistinct = showDistinctValues && supportsDistinctValues(field);
+	let { values, loading, error, truncated } = useDistinctValues(dataObject, field, {
+		filter,
+		search: search.trim() || undefined,
+		enabled: showDistinct,
+	});
+
+	let operators = useMemo(() => getOperatorsForField(field), [field]);
+	let criteria = value.filter((expression) => normalizeOperator(expression.operator) !== "inlist");
+	let selected = useMemo(() => new Set(getInListValues(value)), [value]);
+
+	let sortedValues = useMemo(() => {
+		let list = [...values];
+
+		if (sort === "count") {
+			list.sort((a, b) => (b.count ?? 0) - (a.count ?? 0) || a.value.localeCompare(b.value));
+		} else {
+			list.sort((a, b) => a.value.localeCompare(b.value));
+		}
+
+		return list;
+	}, [values, sort]);
+
+	let allSelected = sortedValues.length > 0 && sortedValues.every((item) => selected.has(item.value));
+
+	function setCriteria(next: FilterExpression[]) {
+		onChange([...next, ...value.filter((expression) => normalizeOperator(expression.operator) === "inlist")]);
+	}
+
+	function updateCriterion(index: number, expression: FilterExpression | null) {
+		let next = [...criteria];
+
+		if (expression === null) {
+			next.splice(index, 1);
+		} else {
+			next[index] = expression;
+		}
+
+		setCriteria(next);
+	}
+
+	function toggleValues(changed: string[], checked: boolean) {
+		let next = new Set(selected);
+
+		for (let item of changed) {
+			if (checked) {
+				next.add(item);
+			} else {
+				next.delete(item);
+			}
+		}
+
+		onChange(setInListValues(value, [...next], field));
+	}
+
+	let headingContent = heading === undefined ? (field.caption ?? field.name) : heading;
+
+	return (
+		<div className={clsx("ObFieldFilterPanel-root", className)}>
+			{headingContent != null && <div className="ObFieldFilterPanel-heading">{headingContent}</div>}
+
+			<div className="ObFieldFilterPanel-criteria">
+				{criteria.map((expression, index) => (
+					// Criteria have no stable identity and cannot be reordered here,
+					// so the index is a safe key.
+					// oxlint-disable-next-line no-array-index-key -- see above
+					<div className="ObFieldFilterPanel-criterion" key={index}>
+						<Field
+							expression={expression}
+							field={field}
+							operators={operators}
+							onChange={(next) => updateCriterion(index, next)}
+							onRemove={criteria.length > 1 ? () => updateCriterion(index, null) : undefined}
+						/>
+					</div>
+				))}
+				<Button
+					type="button"
+					variant="tertiary"
+					data-size="sm"
+					className="ObFieldFilterPanel-addCriterion"
+					onClick={() => setCriteria([...criteria, createExpression(field)])}
+				>
+					<PlusIcon aria-hidden />
+					{getLocalizedString("Criteria")}
+				</Button>
+			</div>
+
+			{showDistinct && (
+				<div className="ObFieldFilterPanel-distinct">
+					<div className="ObFieldFilterPanel-distinctToolbar">
+						<Search data-size="sm">
+							<Search.Input
+								aria-label={getLocalizedString("Search in distinct list")}
+								placeholder={getLocalizedString("Search in distinct list")}
+								value={search}
+								onChange={(event) => setSearch(event.currentTarget.value)}
+							/>
+							<Search.Clear onClick={() => setSearch("")} />
+						</Search>
+						<Button
+							type="button"
+							icon
+							variant="tertiary"
+							data-size="sm"
+							aria-pressed={sort === "value"}
+							aria-label={getLocalizedString("Sort by value")}
+							title={getLocalizedString("Sort by value")}
+							onClick={() => setSort("value")}
+						>
+							<SortUpIcon aria-hidden />
+						</Button>
+						<Button
+							type="button"
+							icon
+							variant="tertiary"
+							data-size="sm"
+							aria-pressed={sort === "count"}
+							aria-label={getLocalizedString("Sort by count")}
+							title={getLocalizedString("Sort by count")}
+							onClick={() => setSort("count")}
+						>
+							<BarChartIcon aria-hidden />
+						</Button>
+					</div>
+
+					{error && (
+						<p className="ObFieldFilterPanel-error" role="alert">
+							{error}
+						</p>
+					)}
+
+					{loading ? (
+						<div className="ObFieldFilterPanel-valuesBox ObFieldFilterPanel-loading">
+							<Spinner data-size="xs" aria-label={getLocalizedString("Loading...")} />
+						</div>
+					) : (
+						<ul className="ObFieldFilterPanel-valuesBox ObFieldFilterPanel-values">
+							<li className="ObFieldFilterPanel-value">
+								<Checkbox
+									data-size="sm"
+									label={getLocalizedString("Select all")}
+									checked={allSelected}
+									disabled={sortedValues.length === 0}
+									onChange={(event) =>
+										toggleValues(
+											sortedValues.map((item) => item.value),
+											event.currentTarget.checked,
+										)
+									}
+								/>
+							</li>
+							{sortedValues.map((item) => (
+								<li className="ObFieldFilterPanel-value" key={item.value}>
+									<Checkbox
+										data-size="sm"
+										label={item.count === null ? item.value : `${item.value} (${item.count})`}
+										checked={selected.has(item.value)}
+										onChange={(event) => toggleValues([item.value], event.currentTarget.checked)}
+									/>
+								</li>
+							))}
+						</ul>
+					)}
+
+					{truncated && (
+						<p className="ObFieldFilterPanel-hint">
+							{getLocalizedString("Only the first values are shown. Search to narrow the list.")}
+						</p>
+					)}
+				</div>
+			)}
+
+			{children}
+		</div>
+	);
+}
+
+/** One criterion: an operator picker, a value editor and an optional remove button. */
+function Field({
+	expression,
+	field,
+	operators,
+	onChange,
+	onRemove,
+}: {
+	expression: FilterExpression;
+	field: FieldMetadata;
+	operators: FilterOperator[];
+	onChange: (expression: FilterExpression) => void;
+	onRemove?: () => void;
+}) {
+	return (
+		<>
+			{/* A DS `Select` renders its own field wrapper, which would add a
+			    second row of spacing inside an already dense panel. */}
+			<select
+				className="ds-input ObFieldFilterPanel-operator"
+				data-size="sm"
+				aria-label={getLocalizedString("Operator")}
+				value={normalizeOperator(expression.operator)}
+				onChange={(event) => onChange(changeOperator(expression, event.target.value as FilterOperator, field))}
+			>
+				{operators.map((operator) => (
+					<option key={operator} value={operator}>
+						{getOperatorLabel(operator, field.type)}
+					</option>
+				))}
+			</select>
+			<FilterValueEditor expression={expression} field={field} data-size="sm" onChange={onChange} />
+			{onRemove && (
+				<Button type="button" variant="tertiary" data-size="sm" onClick={onRemove}>
+					{getLocalizedString("Remove")}
+				</Button>
+			)}
+		</>
+	);
+}