@olenbetong/appframe-ds 1.6.0 → 1.7.0

package/src/filter/FieldFilterPanel.tsx

@@ -1,309 +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,
-	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";
-import { getLocalizedString } from "../i18n.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>
-			)}
-		</>
-	);
-}
+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,
+	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";
+import { getLocalizedString } from "../i18n.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>
+			)}
+		</>
+	);
+}