@protobase/ui 0.12.21 → 0.13.0

package/dist/data-grid/use-virtual-rows.js

@@ -0,0 +1,31 @@
+import { rowsInView } from "./geometry.js";
+import { useGridScroll } from "./use-grid-scroll.js";
+//#region src/data-grid/use-virtual-rows.ts
+const overscan = 6;
+/**
+* Rows of a fixed height over a proxy scroller, so any number of rows scrolls at native speed: `ref` and `onScroll` go
+* on the scrolling element, and each drawn row sits at `offset` from the top of the viewport's rows, below `inset`.
+* `first` and `last` are the indexes of the drawn rows, overscan included.
+*/
+const useVirtualRows = ({ total, rowHeight, initialIndex, inset = 0, settle }) => {
+	const scroll = useGridScroll(total, rowHeight, initialIndex);
+	const { ref, onScroll, viewport, geometry, scrollTo } = scroll;
+	const top = settle ? settle(scroll.top) : scroll.top;
+	const { first, last } = rowsInView(total, top, rowHeight, Math.max(0, viewport - inset), overscan);
+	return {
+		ref,
+		onScroll,
+		viewport,
+		top,
+		geometry,
+		scrollTo,
+		rows: Array.from({ length: last - first + 1 }, (_, offset) => ({
+			index: first + offset,
+			offset: (first + offset) * rowHeight - top
+		})),
+		first,
+		last
+	};
+};
+//#endregion
+export { useVirtualRows };

package/dist/live/columns-from-model.js

@@ -61,9 +61,11 @@ const kindOf = (field, view, index) => {
 	}
 };
 const currencyCents = (value) => Math.round(Number.parseFloat(String(value)) * 100);
-/** Grid columns for a view's list: kinds follow the field types and the view's format hints. */
-const columnsFromModel = (resource, view, highlight = []) => {
-	return (view?.list?.columns ?? Object.keys(resource.fields).slice(0, 6)).flatMap((name, index) => {
+/** The fields a view's list shows as columns: its list columns, else the resource's first six fields. */
+const listColumnNames = (resource, view) => view?.list?.columns ?? Object.keys(resource.fields).slice(0, 6);
+/** Grid columns for `names`, by default the view's list: kinds follow the field types and the view's format hints. */
+const columnsFromModel = (resource, view, highlight = [], names = listColumnNames(resource, view)) => {
+	return names.flatMap((name, index) => {
 		const field = resource.fields[name];
 		if (!field) return [];
 		const viewField = view?.fields[name];
@@ -97,4 +99,4 @@ const columnsFromModel = (resource, view, highlight = []) => {
 	});
 };
 //#endregion
-export { columnsFromModel, headerWidth, toneFor };
+export { columnsFromModel, headerWidth, listColumnNames, toneFor };

package/dist/live/grid-loader.js

@@ -4,11 +4,12 @@ import { withLabels } from "./relation-labels.js";
 //#region src/live/grid-loader.ts
 const exactBelow = 5e3;
 /**
-* Loads fixed-size pages by number. Sequential scrolling follows `next_page_token`; a jump asks `:seek` for the
-* page at that row position. Every page is cached by TanStack Query.
+* Loads fixed-size pages by number. The page after a cached or loading one follows that page's `next_page_token`; a
+* jump to a page whose predecessor is neither asks `:seek` for the page at that row position, so the pages of one jump
+* are read on from a single seek. Every page is cached by TanStack Query.
 */
 const createGridLoader = ({ queryClient, client, resources, views, model, columns, filter, orderBy }) => {
-	const tokens = /* @__PURE__ */ new Map();
+	const pageKey = (number) => keys.page(model.name, filter, orderBy, 40, number);
 	/** The server's total is a planner estimate, off by a lot for small results; settle those exactly. */
 	const firstPageTotal = async (result) => {
 		if (result.nextPageToken === "") return result.items.length;
@@ -20,36 +21,51 @@ const createGridLoader = ({ queryClient, client, resources, views, model, column
 			count: "exact"
 		})).totalSize ?? result.totalSizeEstimate;
 	};
+	/** The token that continues after the page before `number`, or undefined when that page is neither cached nor loading. */
+	const tokenBefore = async (number) => {
+		if (number === 0) return "";
+		const key = pageKey(number - 1);
+		const cached = queryClient.getQueryData(key);
+		if (cached) return cached.nextPageToken;
+		if (queryClient.getQueryState(key)?.fetchStatus !== "fetching") return void 0;
+		return (await page(number - 1)).nextPageToken;
+	};
 	const fetchPage = async (page) => {
-		const token = tokens.get(page);
+		const token = await tokenBefore(page);
+		if (page > 0 && token === "") return {
+			rows: [],
+			total: 0,
+			nextPageToken: ""
+		};
 		const params = {
 			filter,
 			orderBy,
 			pageSize: 40
 		};
-		const result = page === 0 || token !== void 0 ? await client.list(model.name, {
+		const result = token !== void 0 ? await client.list(model.name, {
 			...params,
-			pageToken: token ?? ""
+			pageToken: token
 		}) : await client.seek(model.name, {
 			...params,
 			position: page * 40
 		});
 		if (result.items.length === 0 && page > 0) return {
 			rows: [],
-			total: 0
+			total: 0,
+			nextPageToken: ""
 		};
-		tokens.set(page + 1, result.nextPageToken);
 		const ids = result.items.map((record) => recordId(model, record));
 		return {
 			rows: (await withLabels(queryClient, client, resources, views, model, columns, result.items)).map((record, index) => ({
 				...record,
 				id: ids[index]
 			})),
-			total: page === 0 ? await firstPageTotal(result) : result.totalSizeEstimate
+			total: page === 0 ? await firstPageTotal(result) : result.totalSizeEstimate,
+			nextPageToken: result.nextPageToken
 		};
 	};
 	const page = (number) => queryClient.fetchQuery({
-		queryKey: keys.page(model.name, filter, orderBy, 40, number),
+		queryKey: pageKey(number),
 		staleTime: 6e4,
 		queryFn: () => fetchPage(number)
 	});

package/dist/package.js

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

package/dist/record-view/section.js

@@ -1,21 +1,28 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/record-view/section.tsx
-const Section = ({ title, help, children }) => /* @__PURE__ */ jsxs("section", {
-	className: "py-8 first:pt-8",
-	children: [
-		/* @__PURE__ */ jsx("h2", {
-			className: "text-[15px] font-semibold text-foreground",
-			children: title
-		}),
-		help && /* @__PURE__ */ jsx("p", {
-			className: "mt-1 max-w-xl text-[13px] leading-relaxed text-muted-foreground",
-			children: help
-		}),
-		/* @__PURE__ */ jsx("div", {
-			className: "mt-5",
-			children
-		})
-	]
-});
+/** A titled part of the record page; `actions` sit at the end of the title's line. */
+const Section = ({ title, help, actions, children }) => {
+	const heading = /* @__PURE__ */ jsx("h2", {
+		className: "text-[15px] font-semibold text-foreground",
+		children: title
+	});
+	return /* @__PURE__ */ jsxs("section", {
+		className: "py-8 first:pt-8",
+		children: [
+			actions ? /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-center justify-between gap-x-4 gap-y-2",
+				children: [heading, actions]
+			}) : heading,
+			help && /* @__PURE__ */ jsx("p", {
+				className: "mt-1 max-w-xl text-[13px] leading-relaxed text-muted-foreground",
+				children: help
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "mt-5",
+				children
+			})
+		]
+	});
+};
 //#endregion
 export { Section };