@protobase/ui 0.21.11 → 0.22.0

package/dist/forms/public-form-page.js

@@ -5,10 +5,10 @@ import { useClient } from "../data/api-provider.js";
 import { AuthLayout } from "../auth/auth-layout.js";
 import { humanize } from "../live/naming.js";
 import { Field } from "../record-view/field.js";
+import { Notice } from "../app/meta-gate.js";
 import { createBody, hasDatabaseDefault, initialDraft, isRequired } from "../app/create/create-values.js";
 import { useDocumentTitle } from "../app/document-title.js";
 import { ErrorBanner } from "../app/error-banner.js";
-import { Notice } from "../app/meta-gate.js";
 import { FieldEditor } from "../app/field-editor.js";
 import { fieldErrors, fieldMessage } from "../app/field-errors.js";
 import { useFocusFirstInvalid } from "../app/use-focus-first-invalid.js";

package/dist/index.js

@@ -18,9 +18,9 @@ import { useApiToken } from "./auth/use-api-token.js";
 import { useRecord } from "./data/use-record.js";
 import { Field } from "./record-view/field.js";
 import { Section } from "./record-view/section.js";
-import { Textarea } from "./primitives/textarea.js";
 import { useMeta } from "./data/use-meta.js";
 import { AppLink, useAppAddress } from "./app/use-app-address.js";
+import { Textarea } from "./primitives/textarea.js";
 import { useList } from "./data/use-list.js";
 import { definePlugin, defineUi } from "./app/pages/project-ui.js";
 import { ChatMessage } from "./chat/chat-message.js";

package/dist/live/field-values.js

@@ -1,5 +1,5 @@
-import { localeDecimal, parseNumberText } from "../format/number-text.js";
 import { fileDiffers, filePatchValue } from "./file-values.js";
+import { localeDecimal, parseNumberText } from "../format/number-text.js";
 //#region src/live/field-values.ts
 /** What the editor's text input holds for a stored value. */
 const toDraft = (value) => value === null || value === void 0 ? "" : typeof value === "object" ? JSON.stringify(value) : String(value);

package/dist/organizations/all-organizations.js

@@ -0,0 +1,62 @@
+import { Input } from "../primitives/input.js";
+import { useAuth } from "../auth/auth-provider.js";
+import { Button } from "../primitives/button.js";
+import { AccountSection, SectionError } from "../account/account-section.js";
+import { useAction } from "./use-action.js";
+import { reopenIn } from "./use-organizations.js";
+import { OrganizationRow } from "./organization-row.js";
+import { useAllOrganizations } from "./use-all-organizations.js";
+import { useState } from "react";
+import { Search } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/organizations/all-organizations.tsx
+/** Every organization in the app for people with a global role, who may work in any of them. */
+const AllOrganizations = ({ basePath, currentId }) => {
+	const { session } = useAuth();
+	const [query, setQuery] = useState("");
+	const { found, total, more, loading } = useAllOrganizations(session.organizations, query);
+	const { busy, error, run } = useAction();
+	return /* @__PURE__ */ jsxs(AccountSection, {
+		title: "All organizations",
+		description: "Every organization in the app. Your global roles let you work in any of them, with what those roles allow there. Opening one you are not a member of is written to the audit log.",
+		children: [
+			/* @__PURE__ */ jsx(SectionError, { message: error }),
+			/* @__PURE__ */ jsx(Input, {
+				"aria-label": "Find an organization",
+				placeholder: "Name or slug",
+				value: query,
+				onChange: (event) => setQuery(event.target.value),
+				leading: /* @__PURE__ */ jsx(Search, { className: "size-3.5" }),
+				wrapperClassName: "mb-2"
+			}),
+			/* @__PURE__ */ jsxs("p", {
+				className: "mb-3 text-xs text-muted-foreground",
+				children: [
+					found.length,
+					" of ",
+					total
+				]
+			}),
+			found.length > 0 && /* @__PURE__ */ jsx("ul", {
+				className: "divide-y rounded-md border",
+				children: found.map((organization) => /* @__PURE__ */ jsx(OrganizationRow, {
+					organization,
+					current: organization.id === currentId,
+					busy,
+					onOpen: () => void run(async () => {
+						await session.organizations.switchTo(organization.id);
+						reopenIn(basePath);
+					})
+				}, organization.id))
+			}),
+			found.length < total && /* @__PURE__ */ jsx(Button, {
+				className: "mt-3",
+				loading,
+				onClick: () => void more(),
+				children: "Show more"
+			})
+		]
+	});
+};
+//#endregion
+export { AllOrganizations };

package/dist/organizations/organization-row.js

@@ -0,0 +1,28 @@
+import { Badge } from "../primitives/badge.js";
+import { Button } from "../primitives/button.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/organizations/organization-row.tsx
+/** An organization with Open, or a Current badge when the person works in it. */
+const OrganizationRow = ({ organization, current, busy, onOpen }) => /* @__PURE__ */ jsxs("li", {
+	className: "flex items-center gap-3 px-3 py-2.5",
+	children: [/* @__PURE__ */ jsxs("span", {
+		className: "min-w-0 flex-1",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "block truncate font-medium",
+			children: organization.name
+		}), /* @__PURE__ */ jsx("span", {
+			className: "block text-xs text-muted-foreground",
+			children: organization.slug
+		})]
+	}), current ? /* @__PURE__ */ jsx(Badge, {
+		tone: "green",
+		children: "Current"
+	}) : /* @__PURE__ */ jsx(Button, {
+		size: "sm",
+		loading: busy,
+		onClick: onOpen,
+		children: "Open"
+	})]
+});
+//#endregion
+export { OrganizationRow };

package/dist/organizations/organizations-page.js

@@ -1,4 +1,3 @@
-import { Badge } from "../primitives/badge.js";
 import { Input } from "../primitives/input.js";
 import { PageHeader } from "../app-shell/page-header.js";
 import { useAuth } from "../auth/auth-provider.js";
@@ -8,33 +7,13 @@ import { roleLabel } from "./organization-paths.js";
 import { useAction } from "./use-action.js";
 import { isAdmin } from "../auth/user-to-shell.js";
 import { reopenIn } from "./use-organizations.js";
+import { OrganizationRow } from "./organization-row.js";
+import { AllOrganizations } from "./all-organizations.js";
 import { useEffect, useState } from "react";
-import { Search } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/organizations/organizations-page.tsx
 /** A slug from a name: lowercase ASCII words joined by dashes, as the server accepts them. */
 const slugOf = (name) => name.normalize("NFKD").replace(/[̀-ͯ]/g, "").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "").slice(0, 63);
-const OrganizationRow = ({ organization, current, busy, onOpen }) => /* @__PURE__ */ jsxs("li", {
-	className: "flex items-center gap-3 px-3 py-2.5",
-	children: [/* @__PURE__ */ jsxs("span", {
-		className: "min-w-0 flex-1",
-		children: [/* @__PURE__ */ jsx("span", {
-			className: "block truncate font-medium",
-			children: organization.name
-		}), /* @__PURE__ */ jsx("span", {
-			className: "block text-xs text-muted-foreground",
-			children: organization.slug
-		})]
-	}), current ? /* @__PURE__ */ jsx(Badge, {
-		tone: "green",
-		children: "Current"
-	}) : /* @__PURE__ */ jsx(Button, {
-		size: "sm",
-		loading: busy,
-		onClick: onOpen,
-		children: "Open"
-	})]
-});
 const NewOrganization = ({ basePath }) => {
 	const { session } = useAuth();
 	const [name, setName] = useState("");
@@ -82,43 +61,6 @@ const NewOrganization = ({ basePath }) => {
 		})]
 	});
 };
-const FindOrganization = ({ basePath, currentId }) => {
-	const { session } = useAuth();
-	const [query, setQuery] = useState("");
-	const [found, setFound] = useState([]);
-	const { busy, error, run } = useAction();
-	useEffect(() => {
-		const timer = setTimeout(() => void session.organizations.search(query).then(setFound, () => setFound([])), 200);
-		return () => clearTimeout(timer);
-	}, [session, query]);
-	return /* @__PURE__ */ jsxs(AccountSection, {
-		title: "Find an organization",
-		description: "Your global roles let you work in any organization, with what those roles allow there. Opening one you are not a member of is written to the audit log.",
-		children: [
-			/* @__PURE__ */ jsx(SectionError, { message: error }),
-			/* @__PURE__ */ jsx(Input, {
-				"aria-label": "Find an organization",
-				placeholder: "Name or slug",
-				value: query,
-				onChange: (event) => setQuery(event.target.value),
-				leading: /* @__PURE__ */ jsx(Search, { className: "size-3.5" }),
-				wrapperClassName: "mb-3"
-			}),
-			found.length > 0 && /* @__PURE__ */ jsx("ul", {
-				className: "divide-y rounded-md border",
-				children: found.map((organization) => /* @__PURE__ */ jsx(OrganizationRow, {
-					organization,
-					current: organization.id === currentId,
-					busy,
-					onOpen: () => void run(async () => {
-						await session.organizations.switchTo(organization.id);
-						reopenIn(basePath);
-					})
-				}, organization.id))
-			})
-		]
-	});
-};
 const YourInvitations = () => {
 	const { session, organizations } = useAuth();
 	const [invitations, setInvitations] = useState([]);
@@ -152,7 +94,7 @@ const YourInvitations = () => {
 };
 /**
 * The person's organizations: switching between them, making a new one when the app allows it, and for people with a
-* global role finding any organization. Someone in none sees their invitations here.
+* global role every organization. Someone in none sees their invitations here.
 */
 const OrganizationsPage = ({ state, basePath }) => {
 	const { session, organizations: settings, state: auth } = useAuth();
@@ -185,7 +127,7 @@ const OrganizationsPage = ({ state, basePath }) => {
 			}),
 			/* @__PURE__ */ jsx(YourInvitations, {}),
 			mayCreate && /* @__PURE__ */ jsx(NewOrganization, { basePath }),
-			(state.current?.globalRoles.length ?? 0) > 0 && /* @__PURE__ */ jsx(FindOrganization, {
+			(state.current?.globalRoles.length ?? 0) > 0 && /* @__PURE__ */ jsx(AllOrganizations, {
 				basePath,
 				currentId
 			})

package/dist/organizations/use-all-organizations.js

@@ -0,0 +1,49 @@
+import { useEffect, useRef, useState } from "react";
+//#region src/organizations/use-all-organizations.ts
+/**
+* Every organization, 20 at a time, narrowed by `query` (searched 200 ms after the text stops changing). `more` adds the
+* next page. A page that arrives after the text changed is dropped, so it never adds rows of the old filter.
+*/
+const useAllOrganizations = (client, query) => {
+	const [found, setFound] = useState([]);
+	const [total, setTotal] = useState(0);
+	const [loading, setLoading] = useState(false);
+	const latest = useRef(query);
+	latest.current = query;
+	useEffect(() => {
+		const timer = setTimeout(() => {
+			setLoading(true);
+			client.search(query).then((page) => {
+				if (latest.current !== query) return;
+				setFound(page.organizations);
+				setTotal(page.total);
+				setLoading(false);
+			}, () => {
+				if (latest.current !== query) return;
+				setFound([]);
+				setTotal(0);
+				setLoading(false);
+			});
+		}, 200);
+		return () => clearTimeout(timer);
+	}, [client, query]);
+	const more = async () => {
+		const asked = query;
+		setLoading(true);
+		const page = await client.search(asked, found.length).catch(() => void 0);
+		if (latest.current !== asked) return;
+		if (page) {
+			setFound((shown) => [...shown, ...page.organizations]);
+			setTotal(page.total);
+		}
+		setLoading(false);
+	};
+	return {
+		found,
+		total,
+		more,
+		loading
+	};
+};
+//#endregion
+export { useAllOrganizations };

package/dist/package.js

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

package/dist/record-view/group-section.js

@@ -0,0 +1,35 @@
+import { cn } from "../lib/cn.js";
+import { AppLink } from "../app/use-app-address.js";
+import { useId } from "react";
+import { ChevronRight } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/record-view/group-section.tsx
+const headingClass = "text-[16px] font-semibold text-foreground";
+/**
+* A heading over sections of the record page. With `toggle`, the address that opens or closes it, the heading is a
+* link, so a copied link opens the page with the group open; the items show only while `open`. Without it the group
+* is always open.
+*/
+const GroupSection = ({ title, open, toggle, children }) => {
+	const id = useId();
+	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h2", {
+		className: cn("py-8", open && "pb-0"),
+		children: toggle ? /* @__PURE__ */ jsxs(AppLink, {
+			to: toggle,
+			replace: true,
+			"aria-expanded": open,
+			"aria-controls": id,
+			className: cn("inline-flex items-center gap-1.5", headingClass),
+			children: [/* @__PURE__ */ jsx(ChevronRight, { className: cn("size-4 transition-transform", open && "rotate-90") }), title]
+		}) : /* @__PURE__ */ jsx("span", {
+			className: headingClass,
+			children: title
+		})
+	}), open && /* @__PURE__ */ jsx("div", {
+		id,
+		className: "divide-y divide-border",
+		children
+	})] });
+};
+//#endregion
+export { GroupSection };