@olenbetong/appframe-ds 1.8.0 → 1.9.1

package/src/filter/useDistinctValues.ts

@@ -1,230 +1,230 @@
-import type { FieldMetadata, FilterExpression, FilterTree } from "@olenbetong/appframe-core";
-import { getValueType } from "@olenbetong/appframe-core";
-import type { DataObject, Filter } from "@olenbetong/appframe-data";
-import { useEffect, useMemo, useState } from "react";
-
-import { getFieldExpressions } from "./fieldFilter.js";
-
-export type DistinctValue = {
-	/** The raw value, as sent back in an `inlist` filter. */
-	value: string;
-	/** How many rows have this value, or null when counts are unavailable. */
-	count: number | null;
-};
-
-export type UseDistinctValuesResult = {
-	values: DistinctValue[];
-	loading: boolean;
-	error: string | null;
-	/** True when the list was truncated at `maxRecords`. */
-	truncated: boolean;
-};
-
-/** How many distinct values to load. The list is a picker, not a report. */
-const MAX_DISTINCT_VALUES = 200;
-
-/**
- * Builds the retrieve payload for the distinct value list of a field.
- *
- * `groupBy` plus a `COUNT` aggregate gives values and counts in one round trip.
- * The counted field must be a different field than the grouped one — asking for
- * `COUNT` of the grouped field collapses into a single column server side.
- *
- * The list respects every other active filter but ignores the field's own
- * criteria, so unchecking a value does not make the remaining values disappear.
- */
-export function buildDistinctParameters({
-	field,
-	countField,
-	filter,
-	search,
-	withCounts,
-}: {
-	field: FieldMetadata;
-	countField: string | null;
-	filter: FilterTree | null;
-	search?: string;
-	withCounts: boolean;
-}) {
-	let filterObject = withoutField(filter, field.name);
-
-	if (search) {
-		let searchExpression: FilterExpression = {
-			type: "expression",
-			column: field.name,
-			operator: "contains",
-			value: search,
-			valueType: getValueType(field, "contains"),
-		};
-
-		filterObject = filterObject
-			? { type: "group", mode: "and", items: [filterObject, searchExpression] }
-			: { type: "group", mode: "and", items: [searchExpression] };
-	}
-
-	let fields =
-		withCounts && countField
-			? [{ name: field.name }, { name: countField, aggregate: "COUNT" }]
-			: [{ name: field.name }];
-
-	return {
-		fields,
-		...(withCounts && countField ? { groupBy: [field.name] } : { distinctRows: true }),
-		filterObject,
-		maxRecords: MAX_DISTINCT_VALUES,
-		sortOrder: [{ [field.name]: "asc" }],
-	};
-}
-
-/**
- * Returns a copy of the filter with the field's own top level criteria removed,
- * and null when nothing is left.
- */
-function withoutField(filter: FilterTree | null, field: string): Filter {
-	if (!filter) return null;
-
-	let own = new Set<unknown>(getFieldExpressions(filter, field));
-	let items = filter.items.filter((item) => !own.has(item));
-
-	if (items.length === 0) return null;
-
-	return { type: "group", mode: filter.mode, items };
-}
-
-/** Whether a distinct value list makes sense for this field's type. */
-export function supportsDistinctValues(field: FieldMetadata | undefined): boolean {
-	return field?.type === "string" || field?.type === "number" || field?.type === "uniqueidentifier";
-}
-
-/**
- * Loads the distinct values of a field, with a row count per value.
- *
- * The query goes straight to the data object's data handler rather than through
- * the data object, so the grid's own data and parameters are untouched.
- *
- * @param dataObject The grid's data object
- * @param field The field to list values for
- * @param options Current filter, search text, and whether to load at all
- */
-export function useDistinctValues(
-	dataObject: DataObject<any>,
-	field: FieldMetadata | undefined,
-	{ filter, search, enabled = true }: { filter: FilterTree | null; search?: string; enabled?: boolean },
-): UseDistinctValuesResult {
-	let [result, setResult] = useState<UseDistinctValuesResult>({
-		values: [],
-		loading: false,
-		error: null,
-		truncated: false,
-	});
-
-	// The count column has to be a field other than the grouped one.
-	let countField = useMemo(() => {
-		if (!field) return null;
-
-		let lowerField = field.name.toLowerCase();
-		let names = dataObject
-			.getFields()
-			.map((definition) => definition.name)
-			.filter((name) => !!name && name.toLowerCase() !== lowerField);
-
-		return names.find((name) => name.toLowerCase() === "primkey") ?? names[0] ?? null;
-	}, [dataObject, field]);
-
-	// The filter is only used to scope the list, so re-running on every keystroke
-	// in an unrelated criterion is avoided by keying on its serialized form.
-	let filterKey = useMemo(() => JSON.stringify(filter ?? null), [filter]);
-
-	useEffect(() => {
-		if (!enabled || !field || !supportsDistinctValues(field)) {
-			return;
-		}
-
-		let controller = new AbortController();
-		let cancelled = false;
-
-		setResult((current) => ({ ...current, loading: true, error: null }));
-
-		async function load() {
-			if (!field) return;
-
-			let parsedFilter: FilterTree | null = JSON.parse(filterKey);
-
-			async function run(withCounts: boolean) {
-				let parameters = buildDistinctParameters({
-					field: field as FieldMetadata,
-					countField,
-					filter: parsedFilter,
-					search,
-					withCounts,
-				});
-
-				return (await dataObject.dataHandler.retrieve(parameters as any, {
-					signal: controller.signal,
-				})) as any[];
-			}
-
-			try {
-				let withCounts = !!countField;
-				let rows: any[];
-
-				try {
-					rows = await run(withCounts);
-				} catch (cause) {
-					if (controller.signal.aborted || !withCounts) throw cause;
-
-					// Counts are best effort: some views cannot be grouped, so fall
-					// back to a plain distinct list rather than showing an error.
-					withCounts = false;
-					rows = await run(false);
-				}
-
-				if (cancelled) return;
-
-				let values = rows
-					.map((row) => toDistinctValue(row, field as FieldMetadata, countField, withCounts))
-					.filter((value): value is DistinctValue => value !== null);
-
-				setResult({
-					values,
-					loading: false,
-					error: null,
-					truncated: values.length >= MAX_DISTINCT_VALUES,
-				});
-			} catch (cause) {
-				if (cancelled || controller.signal.aborted) return;
-
-				setResult({
-					values: [],
-					loading: false,
-					error: String((cause as Error)?.message ?? cause),
-					truncated: false,
-				});
-			}
-		}
-
-		void load();
-
-		return () => {
-			cancelled = true;
-			controller.abort();
-		};
-	}, [dataObject, field, countField, filterKey, search, enabled]);
-
-	return result;
-}
-
-function toDistinctValue(
-	row: Record<string, unknown>,
-	field: FieldMetadata,
-	countField: string | null,
-	withCounts: boolean,
-): DistinctValue | null {
-	let raw = row[field.name];
-
-	if (raw === null || raw === undefined || raw === "") return null;
-
-	let count = withCounts && countField ? Number(row[countField]) : null;
-
-	return { value: String(raw), count: Number.isFinite(count as number) ? (count as number) : null };
-}
+import type { FieldMetadata, FilterExpression, FilterTree } from "@olenbetong/appframe-core";
+import { getValueType } from "@olenbetong/appframe-core";
+import type { DataObject, Filter } from "@olenbetong/appframe-data";
+import { useEffect, useMemo, useState } from "react";
+
+import { getFieldExpressions } from "./fieldFilter.js";
+
+export type DistinctValue = {
+	/** The raw value, as sent back in an `inlist` filter. */
+	value: string;
+	/** How many rows have this value, or null when counts are unavailable. */
+	count: number | null;
+};
+
+export type UseDistinctValuesResult = {
+	values: DistinctValue[];
+	loading: boolean;
+	error: string | null;
+	/** True when the list was truncated at `maxRecords`. */
+	truncated: boolean;
+};
+
+/** How many distinct values to load. The list is a picker, not a report. */
+const MAX_DISTINCT_VALUES = 200;
+
+/**
+ * Builds the retrieve payload for the distinct value list of a field.
+ *
+ * `groupBy` plus a `COUNT` aggregate gives values and counts in one round trip.
+ * The counted field must be a different field than the grouped one — asking for
+ * `COUNT` of the grouped field collapses into a single column server side.
+ *
+ * The list respects every other active filter but ignores the field's own
+ * criteria, so unchecking a value does not make the remaining values disappear.
+ */
+export function buildDistinctParameters({
+	field,
+	countField,
+	filter,
+	search,
+	withCounts,
+}: {
+	field: FieldMetadata;
+	countField: string | null;
+	filter: FilterTree | null;
+	search?: string;
+	withCounts: boolean;
+}) {
+	let filterObject = withoutField(filter, field.name);
+
+	if (search) {
+		let searchExpression: FilterExpression = {
+			type: "expression",
+			column: field.name,
+			operator: "contains",
+			value: search,
+			valueType: getValueType(field, "contains"),
+		};
+
+		filterObject = filterObject
+			? { type: "group", mode: "and", items: [filterObject, searchExpression] }
+			: { type: "group", mode: "and", items: [searchExpression] };
+	}
+
+	let fields =
+		withCounts && countField
+			? [{ name: field.name }, { name: countField, aggregate: "COUNT" }]
+			: [{ name: field.name }];
+
+	return {
+		fields,
+		...(withCounts && countField ? { groupBy: [field.name] } : { distinctRows: true }),
+		filterObject,
+		maxRecords: MAX_DISTINCT_VALUES,
+		sortOrder: [{ [field.name]: "asc" }],
+	};
+}
+
+/**
+ * Returns a copy of the filter with the field's own top level criteria removed,
+ * and null when nothing is left.
+ */
+function withoutField(filter: FilterTree | null, field: string): Filter {
+	if (!filter) return null;
+
+	let own = new Set<unknown>(getFieldExpressions(filter, field));
+	let items = filter.items.filter((item) => !own.has(item));
+
+	if (items.length === 0) return null;
+
+	return { type: "group", mode: filter.mode, items };
+}
+
+/** Whether a distinct value list makes sense for this field's type. */
+export function supportsDistinctValues(field: FieldMetadata | undefined): boolean {
+	return field?.type === "string" || field?.type === "number" || field?.type === "uniqueidentifier";
+}
+
+/**
+ * Loads the distinct values of a field, with a row count per value.
+ *
+ * The query goes straight to the data object's data handler rather than through
+ * the data object, so the grid's own data and parameters are untouched.
+ *
+ * @param dataObject The grid's data object
+ * @param field The field to list values for
+ * @param options Current filter, search text, and whether to load at all
+ */
+export function useDistinctValues(
+	dataObject: DataObject<any>,
+	field: FieldMetadata | undefined,
+	{ filter, search, enabled = true }: { filter: FilterTree | null; search?: string; enabled?: boolean },
+): UseDistinctValuesResult {
+	let [result, setResult] = useState<UseDistinctValuesResult>({
+		values: [],
+		loading: false,
+		error: null,
+		truncated: false,
+	});
+
+	// The count column has to be a field other than the grouped one.
+	let countField = useMemo(() => {
+		if (!field) return null;
+
+		let lowerField = field.name.toLowerCase();
+		let names = dataObject
+			.getFields()
+			.map((definition) => definition.name)
+			.filter((name) => !!name && name.toLowerCase() !== lowerField);
+
+		return names.find((name) => name.toLowerCase() === "primkey") ?? names[0] ?? null;
+	}, [dataObject, field]);
+
+	// The filter is only used to scope the list, so re-running on every keystroke
+	// in an unrelated criterion is avoided by keying on its serialized form.
+	let filterKey = useMemo(() => JSON.stringify(filter ?? null), [filter]);
+
+	useEffect(() => {
+		if (!enabled || !field || !supportsDistinctValues(field)) {
+			return;
+		}
+
+		let controller = new AbortController();
+		let cancelled = false;
+
+		setResult((current) => ({ ...current, loading: true, error: null }));
+
+		async function load() {
+			if (!field) return;
+
+			let parsedFilter: FilterTree | null = JSON.parse(filterKey);
+
+			async function run(withCounts: boolean) {
+				let parameters = buildDistinctParameters({
+					field: field as FieldMetadata,
+					countField,
+					filter: parsedFilter,
+					search,
+					withCounts,
+				});
+
+				return (await dataObject.dataHandler.retrieve(parameters as any, {
+					signal: controller.signal,
+				})) as any[];
+			}
+
+			try {
+				let withCounts = !!countField;
+				let rows: any[];
+
+				try {
+					rows = await run(withCounts);
+				} catch (cause) {
+					if (controller.signal.aborted || !withCounts) throw cause;
+
+					// Counts are best effort: some views cannot be grouped, so fall
+					// back to a plain distinct list rather than showing an error.
+					withCounts = false;
+					rows = await run(false);
+				}
+
+				if (cancelled) return;
+
+				let values = rows
+					.map((row) => toDistinctValue(row, field as FieldMetadata, countField, withCounts))
+					.filter((value): value is DistinctValue => value !== null);
+
+				setResult({
+					values,
+					loading: false,
+					error: null,
+					truncated: values.length >= MAX_DISTINCT_VALUES,
+				});
+			} catch (cause) {
+				if (cancelled || controller.signal.aborted) return;
+
+				setResult({
+					values: [],
+					loading: false,
+					error: String((cause as Error)?.message ?? cause),
+					truncated: false,
+				});
+			}
+		}
+
+		void load();
+
+		return () => {
+			cancelled = true;
+			controller.abort();
+		};
+	}, [dataObject, field, countField, filterKey, search, enabled]);
+
+	return result;
+}
+
+function toDistinctValue(
+	row: Record<string, unknown>,
+	field: FieldMetadata,
+	countField: string | null,
+	withCounts: boolean,
+): DistinctValue | null {
+	let raw = row[field.name];
+
+	if (raw === null || raw === undefined || raw === "") return null;
+
+	let count = withCounts && countField ? Number(row[countField]) : null;
+
+	return { value: String(raw), count: Number.isFinite(count as number) ? (count as number) : null };
+}

package/src/global.d.ts

@@ -1,11 +1,11 @@
-/// <reference path="@olenbetong/appframe-core" />
-/// <reference path="@olenbetong/appframe-data" />
-
-declare module "*.css" {}
-
-/**
- * The MUI X license key, replaced at build time by the `appframe()` Vite plugin.
- * Declared as possibly undefined, because consumers are free to bundle this
- * package without the define.
- */
-declare const __MUI_X_LICENSE_KEY__: string | undefined;
+/// <reference path="@olenbetong/appframe-core" />
+/// <reference path="@olenbetong/appframe-data" />
+
+declare module "*.css" {}
+
+/**
+ * The MUI X license key, replaced at build time by the `appframe()` Vite plugin.
+ * Declared as possibly undefined, because consumers are free to bundle this
+ * package without the define.
+ */
+declare const __MUI_X_LICENSE_KEY__: string | undefined;

package/src/grid/AfGridColumnsPanel.tsx

@@ -74,7 +74,7 @@ export function AfGridColumnsPanel({ open, onClose }: AfGridColumnsPanelProps) {
 				</Heading>
 			</Dialog.Block>
 			<Dialog.Block className="AfGrid-columnsPanelSearch">
-				<Search data-size="sm">
+				<Search>
 					<Search.Input
 						aria-label={getLocalizedString("Search")}
 						value={search}
@@ -93,7 +93,6 @@ export function AfGridColumnsPanel({ open, onClose }: AfGridColumnsPanelProps) {
 							onDrop={() => handleDrop(column.field)}
 						>
 							<Checkbox
-								data-size="sm"
 								label={column.headerName ?? column.field}
 								checked={visibilityModel[column.field] !== false}
 								onChange={(event) => apiRef.current?.setColumnVisibility(column.field, event.currentTarget.checked)}
@@ -103,15 +102,13 @@ export function AfGridColumnsPanel({ open, onClose }: AfGridColumnsPanelProps) {
 				</ul>
 			</Dialog.Block>
 			<Dialog.Block className="AfGrid-columnsPanelActions">
-				<Button variant="tertiary" data-size="sm" onClick={() => setAll(false)}>
+				<Button variant="tertiary" onClick={() => setAll(false)}>
 					{getLocalizedString("Hide all")}
 				</Button>
-				<Button variant="tertiary" data-size="sm" onClick={() => setAll(true)}>
+				<Button variant="tertiary" onClick={() => setAll(true)}>
 					{getLocalizedString("Show all")}
 				</Button>
-				<Button data-size="sm" onClick={onClose}>
-					{getLocalizedString("Close")}
-				</Button>
+				<Button onClick={onClose}>{getLocalizedString("Close")}</Button>
 			</Dialog.Block>
 		</Dialog>
 	);

package/src/grid/AfGridError.tsx

@@ -34,9 +34,9 @@ export function AfGridError({ apiRef, dataObject }: AfGridErrorProps) {
 
 	return createPortal(
 		<div className="AfGrid-errorOverlay">
-			<Alert data-color="danger" data-size="sm" className="AfGrid-errorAlert">
+			<Alert data-color="danger" className="AfGrid-errorAlert">
 				<span>{loadError}</span>
-				<Button variant="tertiary" data-size="sm" data-color="danger" onClick={() => setErrorDismissed(true)}>
+				<Button variant="tertiary" data-color="danger" onClick={() => setErrorDismissed(true)}>
 					{getLocalizedString("Dismiss")}
 				</Button>
 			</Alert>

package/src/grid/AfHeaderFilterCell.tsx

@@ -94,7 +94,6 @@ export function AfHeaderFilterCell({ colDef, hasFocus, inputRef, dataObject }: A
 		<Popover.TriggerContext>
 			<InputAdornments
 				className="AfGrid-headerFilterInput"
-				data-size="sm"
 				aria-label={getLocalizedString("Filter by {0}").replace("{0}", caption)}
 				ref={inputRef as React.Ref<HTMLInputElement>}
 				tabIndex={hasFocus ? 0 : -1}
@@ -108,7 +107,6 @@ export function AfHeaderFilterCell({ colDef, hasFocus, inputRef, dataObject }: A
 						type="button"
 						icon
 						variant="tertiary"
-						data-size="sm"
 						tabIndex={-1}
 						aria-label={getLocalizedString("Clear filter")}
 						title={getLocalizedString("Clear filter")}
@@ -121,7 +119,6 @@ export function AfHeaderFilterCell({ colDef, hasFocus, inputRef, dataObject }: A
 					type="button"
 					icon
 					variant="tertiary"
-					data-size="sm"
 					tabIndex={-1}
 					className="AfGrid-headerFilterButton"
 					data-active={hasFilter || undefined}

package/src/grid/AfHeaderFilterPanel.tsx

@@ -69,7 +69,6 @@ export function AfHeaderFilterPanel({
 			open={open}
 			placement="bottom-start"
 			className="AfGrid-headerFilterPanel"
-			data-size="sm"
 			onOpen={onOpen}
 			onClose={onClose}
 		>
@@ -87,12 +86,11 @@ export function AfHeaderFilterPanel({
 					onChange={setDraft}
 				>
 					<div className="ObFieldFilterPanel-actions">
-						<Button type="button" variant="tertiary" data-size="sm" onClick={() => setDraft([createExpression(field)])}>
+						<Button type="button" variant="tertiary" onClick={() => setDraft([createExpression(field)])}>
 							{getLocalizedString("Clear")}
 						</Button>
 						<Button
 							type="button"
-							data-size="sm"
 							onClick={() => {
 								// A criterion the user never finished typing would be
 								// dropped by `pruneFilter` anyway, and keeping it would

package/src/grid/GridEditLookup.tsx

@@ -22,7 +22,8 @@ export type GridEditLookupProps<
 
 /**
  * A lookup as a grid cell editor: a read-only input with a search button that opens the
- * lookup dialog anchored to the cell, and a clear button when the field is nullable. Give it
+ * lookup dialog anchored to the cell, and a clear button when the field is nullable. With
+ * `editable` the value can be typed into the cell as well, such as a username. Give it
  * to a column's `renderEditCell`. Equivalent of `GridEditLookup` in `@olenbetong/appframe-mui`.
  */
 export function GridEditLookup<
@@ -77,7 +78,7 @@ export function GridEditLookup<
 				slotProps={{
 					root: {
 						// @ts-expect-error: typed as HTMLElement, but it is the input
-						readOnly: true,
+						readOnly: !props.editable,
 					},
 				}}
 				onKeyDown={onKeyDown}
@@ -88,7 +89,6 @@ export function GridEditLookup<
 							<Button
 								type="button"
 								variant="tertiary"
-								data-size="sm"
 								icon
 								title={getLocalizedString("Clear")}
 								onKeyDown={(evt) => evt.stopPropagation()}
@@ -104,7 +104,6 @@ export function GridEditLookup<
 						<Button
 							type="button"
 							variant="tertiary"
-							data-size="sm"
 							icon
 							title={getLocalizedString("Search")}
 							onClick={() => openDialog()}