@protobase/ui 0.19.16 → 0.20.0

package/dist/app/relation-picker.js

@@ -1,63 +1,142 @@
+import { cn } from "../lib/cn.js";
 import { Input } from "../primitives/input.js";
-import { useClient } from "../data/api-provider.js";
 import { labelFieldOf } from "../live/model-helpers.js";
-import { useState } from "react";
+import { humanize } from "../live/naming.js";
+import { useList } from "../data/use-list.js";
+import { relationOptionsQuery, titleMatches } from "./relation-options.js";
+import { useCallback, useEffect, useId, useRef, useState } from "react";
+import { ApiError } from "@protobase/client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useQuery } from "@tanstack/react-query";
-import { createWhere, printFilter } from "@protobase/schema";
 //#region src/app/relation-picker.tsx
-const where$1 = createWhere();
-/** Picks a record of another resource: type to search (when the target has search fields), choose from the first matches. */
+/** Loads the next page while `sentinel` is in view of the list; it re-arms after each page, in case it still is. */
+const useLoadMoreInView = (list, sentinel, loaded, loadMore) => {
+	useEffect(() => {
+		if (!list || !sentinel) return;
+		const observer = new IntersectionObserver((entries) => entries.some((entry) => entry.isIntersecting) && loadMore(), { root: list });
+		observer.observe(sentinel);
+		return () => observer.disconnect();
+	}, [
+		list,
+		sentinel,
+		loaded,
+		loadMore
+	]);
+};
+/**
+* Picks a record of another resource: type to narrow the records by their search fields or title, scroll for more, and
+* choose with the mouse or with the arrow keys and Enter; Escape closes the list.
+*/
 const RelationPicker = ({ target, view, value, label, invalid, onChange }) => {
-	const client = useClient();
 	const [text, setText] = useState("");
 	const [open, setOpen] = useState(false);
+	const [active, setActive] = useState(-1);
+	const [list, setList] = useState(null);
+	const [sentinel, setSentinel] = useState(null);
+	const listId = useId();
 	const keyField = target.primaryKey[0];
 	const labelField = labelFieldOf(target, view);
-	const options = useQuery({
-		queryKey: [
-			"relation-options",
-			target.name,
-			text
-		],
-		enabled: open,
-		queryFn: () => client.list(target.name, {
-			filter: text && target.search?.length ? printFilter(where$1.search(text)) : void 0,
-			fields: [keyField, labelField],
-			pageSize: 8
-		})
+	const [refused, setRefused] = useState(false);
+	const query = relationOptionsQuery(target, labelField, text, refused);
+	const rows = useList(target.name, {
+		filter: query.filter,
+		fields: [keyField, labelField],
+		enabled: open
+	});
+	const expensive = query.filter !== void 0 && rows.error instanceof ApiError && rows.error.slug === "expensive-query";
+	useEffect(() => {
+		if (expensive) setRefused(true);
+	}, [expensive]);
+	const items = query.local ? rows.items.filter((item) => titleMatches(item[labelField], text)) : rows.items;
+	const more = Boolean(rows.hasNextPage);
+	const loading = rows.isPending || rows.isFetchingNextPage;
+	const { fetchNextPage } = rows;
+	useLoadMoreInView(list, sentinel, rows.items.length, useCallback(() => fetchNextPage({ cancelRefetch: false }), [fetchNextPage]));
+	const optionId = (index) => `${listId}-${index}`;
+	const input = useRef(null);
+	useEffect(() => {
+		if (!open && document.activeElement === input.current) input.current?.select();
+	}, [open]);
+	useEffect(() => {
+		if (open && active >= 0) document.getElementById(optionId(active))?.scrollIntoView({ block: "nearest" });
 	});
+	const close = () => {
+		setText("");
+		setActive(-1);
+		setOpen(false);
+	};
+	const choose = (item) => {
+		onChange(String(item[keyField]), String(item[labelField]));
+		close();
+	};
+	const onKeyDown = (event) => {
+		if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+			event.preventDefault();
+			if (!open) return setOpen(true);
+			const step = event.key === "ArrowDown" ? 1 : -1;
+			setActive((current) => Math.min(Math.max(current + step, 0), items.length - 1));
+			return;
+		}
+		if (event.key === "Enter" && open && items[active]) {
+			event.preventDefault();
+			choose(items[active]);
+			return;
+		}
+		if (event.key === "Escape" && open) {
+			event.preventDefault();
+			event.stopPropagation();
+			close();
+		}
+	};
 	return /* @__PURE__ */ jsxs("div", {
 		className: "relative",
 		children: [/* @__PURE__ */ jsx(Input, {
+			ref: input,
+			role: "combobox",
+			"aria-autocomplete": "list",
+			"aria-expanded": open,
+			"aria-controls": listId,
+			"aria-activedescendant": open && items[active] ? optionId(active) : void 0,
 			invalid,
-			placeholder: `Search ${target.name}`,
+			placeholder: `Search ${(view?.names?.plural ?? humanize(target.name)).toLowerCase()}`,
 			value: open ? text : label ?? value,
 			onFocus: () => setOpen(true),
-			onBlur: () => setTimeout(() => setOpen(false), 120),
-			onChange: (event) => setText(event.target.value)
+			onBlur: close,
+			onKeyDown,
+			onChange: (event) => {
+				setText(event.target.value);
+				setActive(event.target.value.trim() ? 0 : -1);
+				setOpen(true);
+			}
 		}), open && /* @__PURE__ */ jsxs("ul", {
+			ref: setList,
+			id: listId,
 			role: "listbox",
 			className: "absolute z-30 mt-1 max-h-60 w-full overflow-y-auto rounded-md border bg-background py-1 shadow-pop",
+			onMouseDown: (event) => event.preventDefault(),
 			children: [
-				options.data?.items.map((item) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("button", {
-					type: "button",
+				items.map((item, index) => /* @__PURE__ */ jsx("li", {
+					id: optionId(index),
 					role: "option",
-					"aria-selected": String(item[keyField]) === value,
-					className: "block w-full truncate px-3 py-1.5 text-left hover:bg-muted",
-					onMouseDown: (event) => event.preventDefault(),
-					onClick: () => {
-						onChange(String(item[keyField]), String(item[labelField]));
-						setText("");
-						setOpen(false);
-					},
+					"aria-selected": index === active,
+					className: cn("cursor-pointer truncate px-3 py-1.5", index === active && "bg-muted", String(item[keyField]) === value && "font-medium"),
+					onMouseMove: () => index !== active && setActive(index),
+					onClick: () => choose(item),
 					children: String(item[labelField])
-				}) }, String(item[keyField]))),
-				options.data && options.data.items.length === 0 && /* @__PURE__ */ jsx("li", {
+				}, String(item[keyField]))),
+				more && /* @__PURE__ */ jsx("li", {
+					ref: setSentinel,
+					"aria-hidden": true,
+					className: "h-px"
+				}),
+				rows.error && !expensive && /* @__PURE__ */ jsx("li", {
+					className: "px-3 py-1.5 text-muted-foreground",
+					children: "Could not load the options"
+				}),
+				!more && !loading && !rows.error && items.length === 0 && /* @__PURE__ */ jsx("li", {
 					className: "px-3 py-1.5 text-muted-foreground",
 					children: "No matches"
 				}),
-				options.isPending && /* @__PURE__ */ jsx("li", {
+				loading && /* @__PURE__ */ jsx("li", {
 					className: "px-3 py-1.5 text-muted-foreground",
 					children: "Loading"
 				})

package/dist/data/api-provider.d.ts

@@ -22,6 +22,7 @@ export declare const useClient: () => {
     limit?: number;
     label?: string;
   }) => Promise<import("@protobase/client").Facet[]>;
+  aggregate: (resource: import("@protobase/client").ResourceRef, params: import("@protobase/client").AggregateParams) => Promise<import("@protobase/client").Aggregate>;
   series: (resource: import("@protobase/client").ResourceRef, params: import("@protobase/client").SeriesParams & {
     filter?: import("@protobase/client").FilterInput;
   }) => Promise<import("@protobase/client").Series>;
@@ -62,6 +63,7 @@ export declare const useResourceClient: (resource: string) => {
     limit?: number;
     label?: string;
   }) => Promise<import("@protobase/client").Facet[]>;
+  aggregate: (resource: import("@protobase/client").ResourceRef, params: import("@protobase/client").AggregateParams) => Promise<import("@protobase/client").Aggregate>;
   series: (resource: import("@protobase/client").ResourceRef, params: import("@protobase/client").SeriesParams & {
     filter?: import("@protobase/client").FilterInput;
   }) => Promise<import("@protobase/client").Series>;

package/dist/data/query-keys.js

@@ -72,6 +72,11 @@ const keys = {
 		granularity,
 		filter
 	],
+	aggregate: (resource, params) => [
+		"aggregate",
+		resource,
+		params
+	],
 	histogram: (resource, field, buckets, filter) => [
 		"histogram",
 		resource,

package/dist/data/use-aggregates.js

@@ -39,5 +39,18 @@ const useHistogram = (resource, field, filter, buckets = 20, enabled = true) =>
 		})
 	});
 };
+/** Totals per value or date bucket of a field (`:aggregate`), refetched whenever the resource is written. */
+const useAggregate = (resource, params, enabled = true) => {
+	const client = useClient();
+	const wire = {
+		...params,
+		filter: filterText(params.filter) ?? ""
+	};
+	return useQuery({
+		queryKey: keys.aggregate(resource, JSON.stringify(wire)),
+		enabled,
+		queryFn: () => client.aggregate(resource, wire)
+	});
+};
 //#endregion
-export { useFacets, useHistogram, useSeries };
+export { useAggregate, useFacets, useHistogram, useSeries };

package/dist/index.js

@@ -37,14 +37,14 @@ import { Field } from "./record-view/field.js";
 import { Section } from "./record-view/section.js";
 import { Textarea } from "./primitives/textarea.js";
 import { AppLink, useAppAddress } from "./app/use-app-address.js";
+import { useList } from "./data/use-list.js";
 import { ActionInputError } from "./app/pages/action-inputs/input-errors.js";
 import { useLayoutRecord } from "./app/pages/record-scope.js";
+import { useFacets, useHistogram, useSeries } from "./data/use-aggregates.js";
 import { SignInPrompt } from "./auth/sign-in-prompt.js";
 import { useListDisplay } from "./app/displays/display-context.js";
 import { MenuSelect } from "./primitives/menu-select.js";
 import { Form } from "./app/create/form.js";
-import { useFacets, useHistogram, useSeries } from "./data/use-aggregates.js";
-import { useList } from "./data/use-list.js";
 import { isConflict, useUpdateRecord } from "./data/use-update-record.js";
 import { App } from "./app/app.js";
 import { RecordLink } from "./app/displays/record-link.js";

package/dist/package.js

@@ -1,5 +1,5 @@
 //#region package.json
-var version = "0.19.16";
+var version = "0.20.0";
 var protobase = { "pluginApi": 1 };
 //#endregion
 export { protobase, version };