@protobase/ui 0.54.6 → 0.55.0

package/dist/app/app.js

@@ -11,6 +11,7 @@ import { text } from "./messages.js";
 import { Router, useRouter } from "./router.js";
 import { useAppAddress } from "./use-app-address.js";
 import { ProjectUiContext, useProjectUi } from "./pages/project-ui.js";
+import { isAdmin, userToShell } from "../auth/user-to-shell.js";
 import { startErrorReporting } from "./error-reporting.js";
 import { slotted } from "../locale/slotted.js";
 import { CustomBoundary } from "./pages/custom-boundary.js";
@@ -25,7 +26,6 @@ import { ConnectRoute } from "../connect/connect-route.js";
 import { SignInPolicyPage } from "../account/sign-in-policy-page.js";
 import { PluginSourceProvider } from "../plugins/plugin-source.js";
 import { AuthGate } from "../auth/auth-gate.js";
-import { isAdmin, userToShell } from "../auth/user-to-shell.js";
 import { AuthLocale } from "../auth/auth-locale.js";
 import { useLiveUpdates } from "../data/use-live-updates.js";
 import { useOpenedRecord } from "../data/use-record.js";

package/dist/app/create/create-values.js

@@ -1,19 +1,19 @@
-import { isEditable, toPatchValue } from "../../live/field-values.js";
+import { isEditable, toDraft, toPatchValue } from "../../live/field-values.js";
 import { whenShown } from "../record-mode/record-mode.js";
 import { text } from "./messages.js";
 import { layoutItems } from "@protobase/schema/internal";
 import { isRecordCondition } from "@protobase/schema";
 //#region src/app/create/create-values.ts
 const isChosen = (value) => typeof value === "object" && value !== null && "key" in value;
-/** Fields the user can set on a new record: not read-only, not the tenant, and not structured data. */
-const isCreatable = (model, field) => field.name !== model.tenant && !field.readOnly && (field.type === "relation" || isEditable(field));
+/** Fields the user can set on a new record: not read-only, not the tenant, and no JSON but through a field type (`isEditable`). */
+const isCreatable = (model, field, hints) => field.name !== model.tenant && !field.readOnly && (field.type === "relation" || isEditable(field, hints));
 /**
 * The view's sections limited to creatable fields, plus a section for any creatable field the layout leaves out. The
 * create form is a form, so sections and fields meant only for reading the record stay out of their sections, and a
 * creatable field among them lands in that last section. A write-only field is on the form only where a section names it.
 */
 const createSections = (model, view) => {
-	const creatable = Object.values(model.fields).filter((field) => isCreatable(model, field)).map((field) => field.name);
+	const creatable = Object.values(model.fields).filter((field) => isCreatable(model, field, view?.fields[field.name])).map((field) => field.name);
 	const placed = /* @__PURE__ */ new Set();
 	const sections = layoutItems(view?.layout ?? []).flatMap((item) => {
 		if (item.kind !== "section" || isRecordCondition(item.when) || !whenShown(item.when, true)) return [];
@@ -83,7 +83,7 @@ const initialDraft = (model, sections, given = {}) => Object.fromEntries(section
 	const fallback = field.default;
 	if (numberDefault(field) !== void 0) return [];
 	if (!fallback || !("value" in fallback) || fallback.value === null || fallback.value === void 0) return [];
-	return [[name, typeof fallback.value === "boolean" ? fallback.value : String(fallback.value)]];
+	return [[name, typeof fallback.value === "boolean" ? fallback.value : toDraft(fallback.value)]];
 })));
 const hasDatabaseDefault = (field) => Boolean(field.default && "db" in field.default);
 //#endregion

package/dist/app/field-editor.js

@@ -156,7 +156,7 @@ const ChosenEditor = (props) => {
 	const shown = useShownWidget(field, hints);
 	const builtIn = /* @__PURE__ */ jsx(BuiltInEditor, { ...props });
 	if (!shown) return builtIn;
-	if (locked || !isEditable(field)) return /* @__PURE__ */ jsx(WidgetPart, {
+	if (locked || !isEditable(field, hints)) return /* @__PURE__ */ jsx(WidgetPart, {
 		shown,
 		part: "display",
 		field,

package/dist/app/field-types/built-in-fields.js

@@ -0,0 +1,6 @@
+import { membersField } from "./members/members-field.js";
+//#region src/app/field-types/built-in-fields.ts
+/** The field types Protobase brings, which a view chooses by name like a plugin's; a plugin's of the same name wins. */
+const builtInFields = { members: membersField };
+//#endregion
+export { builtInFields };

package/dist/app/field-types/members/member-chip.js

@@ -0,0 +1,20 @@
+import { Avatar } from "../../../primitives/avatar.js";
+import { hueOf, initialsOf } from "../../../auth/user-to-shell.js";
+import { text } from "./messages.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/field-types/members/member-chip.tsx
+/** A member by avatar and name, as chat messages and comments draw their authors; a name of `undefined` is someone unknown. */
+const MemberChip = ({ id, name }) => /* @__PURE__ */ jsxs("span", {
+	className: "inline-flex min-w-0 items-center gap-1.5",
+	children: [/* @__PURE__ */ jsx(Avatar, {
+		initials: name && initialsOf(name) || "?",
+		hue: hueOf(id),
+		size: "xs",
+		className: "ring-0"
+	}), /* @__PURE__ */ jsx("span", {
+		className: name === void 0 ? "truncate text-muted-foreground" : "truncate",
+		children: name ?? text("unknownMember")
+	})]
+});
+//#endregion
+export { MemberChip };

package/dist/app/field-types/members/member-ids.js

@@ -0,0 +1,13 @@
+import { titleMatches } from "../../relation-options.js";
+//#region src/app/field-types/members/member-ids.ts
+/** The user ids a `members` field holds: the strings of its array, nothing for a value that is none. */
+const memberIdsOf = (value) => Array.isArray(value) ? value.filter((id) => typeof id === "string") : [];
+/** The ids with `id` added, or taken off when they hold it already. */
+const toggledId = (ids, id) => ids.includes(id) ? ids.filter((held) => held !== id) : [...ids, id];
+/** The members whose name holds every word of `search`, as the picker's options keyed by user id. */
+const memberOptions = (people, search) => people.filter((person) => titleMatches(person.name, search)).map((person) => ({
+	key: person.id,
+	label: person.name
+}));
+//#endregion
+export { memberIdsOf, memberOptions, toggledId };

package/dist/app/field-types/members/members-display.js

@@ -0,0 +1,44 @@
+import { cn } from "../../../lib/cn.js";
+import { Skeleton } from "../../../primitives/skeleton.js";
+import { text } from "./messages.js";
+import { MemberChip } from "./member-chip.js";
+import { memberIdsOf } from "./member-ids.js";
+import { useMembersField } from "./use-members-field.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/app/field-types/members/members-display.tsx
+const Members = ({ value, line }) => {
+	const members = useMembersField();
+	const ids = memberIdsOf(value);
+	if (ids.length === 0) return /* @__PURE__ */ jsx("span", {
+		className: "text-muted-foreground",
+		children: "—"
+	});
+	if (members.needsOrganizations) return /* @__PURE__ */ jsx("span", {
+		className: "text-muted-foreground",
+		children: text("needsOrganizations")
+	});
+	if (members.failed) return /* @__PURE__ */ jsx("span", {
+		className: "text-muted-foreground",
+		children: text("couldNotLoadMembers")
+	});
+	if (members.isLoading) return /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" });
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("flex min-w-0 items-center gap-x-3 gap-y-1", line ? "overflow-hidden" : "flex-wrap"),
+		children: ids.map((id) => /* @__PURE__ */ jsx(MemberChip, {
+			id,
+			name: members.member(id)?.name
+		}, id))
+	});
+};
+/** The members a field holds by avatar and name, on record pages, cards and page blocks; one no longer a member as unknown. */
+const MembersDisplay = (props) => /* @__PURE__ */ jsx(Members, {
+	...props,
+	line: false
+});
+/** The members a field holds on one line, in a list's table. */
+const MembersCell = (props) => /* @__PURE__ */ jsx(Members, {
+	...props,
+	line: true
+});
+//#endregion
+export { MembersCell, MembersDisplay };

package/dist/app/field-types/members/members-editor.js

@@ -0,0 +1,44 @@
+import { PickerCombobox, usePickerSearch } from "../../picker/picker-combobox.js";
+import { text } from "./messages.js";
+import { memberIdsOf, memberOptions, toggledId } from "./member-ids.js";
+import { useMembersField } from "./use-members-field.js";
+import { Token } from "../../../primitives/token.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/field-types/members/members-editor.tsx
+/**
+* Picks the organization's members into the field's array of user ids, as `RecordPicker multiple` picks records: type
+* to narrow them by name, each choice a token that takes it off again, and choosing a chosen member takes them off.
+*/
+const MembersEditor = ({ value, invalid, onChange }) => {
+	const search = usePickerSearch();
+	const members = useMembersField();
+	const ids = memberIdsOf(value);
+	if (members.needsOrganizations) return /* @__PURE__ */ jsx("p", {
+		className: "py-1.5 text-muted-foreground",
+		children: text("needsOrganizations")
+	});
+	const labelOf = (id) => members.member(id)?.name ?? text("unknownMember");
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-2",
+		children: [/* @__PURE__ */ jsx(PickerCombobox, {
+			search,
+			options: memberOptions(members.data ?? [], search.text),
+			chosen: ids,
+			several: true,
+			closedText: "",
+			placeholder: text("searchMembers"),
+			invalid,
+			loading: members.isLoading,
+			failed: members.failed,
+			onChoose: (option) => onChange(toggledId(ids, option.key))
+		}), ids.length > 0 && /* @__PURE__ */ jsx("div", {
+			className: "flex flex-wrap gap-1",
+			children: ids.map((id) => /* @__PURE__ */ jsx(Token, {
+				label: labelOf(id),
+				onRemove: () => onChange(ids.filter((held) => held !== id))
+			}, id))
+		})]
+	});
+};
+//#endregion
+export { MembersEditor };

package/dist/app/field-types/members/members-field.js

@@ -0,0 +1,16 @@
+import { MembersCell, MembersDisplay } from "./members-display.js";
+import { MembersEditor } from "./members-editor.js";
+import { builtInFieldTypes } from "@protobase/schema/internal";
+//#region src/app/field-types/members/members-field.ts
+/**
+* The built-in `members` field type, for a JSON array of the user ids of members of the organization the session works
+* in: `r.member_ids.widget('members')`. See the field types reference.
+*/
+const membersField = {
+	of: [...builtInFieldTypes.members],
+	display: MembersDisplay,
+	editor: MembersEditor,
+	cell: MembersCell
+};
+//#endregion
+export { membersField };

package/dist/app/field-types/members/messages.js

@@ -0,0 +1,18 @@
+import { defineMessages } from "../../../locale/messages.js";
+//#region src/app/field-types/members/messages.ts
+const text = defineMessages({
+	en: {
+		needsOrganizations: "Choosing members needs organizations: turn them on in the auth config.",
+		couldNotLoadMembers: "Could not load the members.",
+		unknownMember: "Unknown member",
+		searchMembers: "Search members"
+	},
+	nl: {
+		needsOrganizations: "Leden kiezen vraagt om organisaties: zet ze aan in de auth-configuratie.",
+		couldNotLoadMembers: "De leden konden niet worden geladen.",
+		unknownMember: "Onbekend lid",
+		searchMembers: "Leden zoeken"
+	}
+});
+//#endregion
+export { text };

package/dist/app/field-types/members/use-members-field.js

@@ -0,0 +1,18 @@
+import { useOptionalAuth } from "../../../auth/auth-provider.js";
+import { useMembers } from "../../../people/use-members.js";
+//#region src/app/field-types/members/use-members-field.ts
+/**
+* The organization's members for a `members` field, and what keeps it from showing them: `needsOrganizations` in an
+* app without them, where `useMembers` would fail, and `failed` when they could not be read.
+*/
+const useMembersField = () => {
+	const auth = useOptionalAuth();
+	const members = useMembers();
+	return {
+		...members,
+		needsOrganizations: !auth?.organizations,
+		failed: members.isError
+	};
+};
+//#endregion
+export { useMembersField };

package/dist/app/field-types/shown-widget.js

@@ -1,15 +1,20 @@
 import { useProjectUi } from "../pages/project-ui.js";
+import { builtInFields } from "./built-in-fields.js";
 //#region src/app/field-types/shown-widget.ts
+const named = (fields, name) => {
+	if (fields && Object.hasOwn(fields, name)) return fields[name];
+	if (Object.hasOwn(builtInFields, name)) return builtInFields[name];
+};
 /**
-* The field type the view's `hints` choose for `field`, when one of `fields` has that name and shows the field's
-* storage type; otherwise undefined, and the field shows as it would without one. A sensitive field never comes with
-* its value, so it keeps its own.
+* The field type the view's `hints` choose for `field`, when one of `fields` or a built-in one (`builtInFields`) has
+* that name and shows the field's storage type; otherwise undefined, and the field shows as it would without one. A
+* sensitive field never comes with its value, so it keeps its own.
 */
 const shownWidget = (fields, field, hints) => {
 	const chosen = hints?.widget;
-	if (!chosen || field.sensitive || !fields || !Object.hasOwn(fields, chosen.name)) return void 0;
-	const widget = fields[chosen.name];
-	return widget.of.includes(field.type) ? {
+	if (!chosen || field.sensitive) return void 0;
+	const widget = named(fields, chosen.name);
+	return widget?.of.includes(field.type) ? {
 		name: chosen.name,
 		widget,
 		props: chosen.props ?? {}

package/dist/app/picker/picker-combobox.js

@@ -0,0 +1,140 @@
+import { cn } from "../../lib/cn.js";
+import { Input } from "../../primitives/input.js";
+import { text } from "../messages.js";
+import { useEffect, useId, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/picker/picker-combobox.tsx
+const usePickerSearch = () => {
+	const [text, setText] = useState("");
+	const [open, setOpen] = useState(false);
+	return {
+		text,
+		setText,
+		open,
+		setOpen
+	};
+};
+/** 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 || !loadMore) return;
+		const observer = new IntersectionObserver((entries) => entries.some((entry) => entry.isIntersecting) && loadMore(), { root: list });
+		observer.observe(sentinel);
+		return () => observer.disconnect();
+	}, [
+		list,
+		sentinel,
+		loaded,
+		loadMore
+	]);
+};
+/**
+* A box to type in that lists the options its owner reads for the text: choose with the mouse or with the arrow keys
+* and Enter; Escape closes the list. The pickers of records and of members draw their lists with it.
+*/
+const PickerCombobox = ({ search, options, chosen, several, closedText, placeholder, invalid, paging, loading, failed, onChoose }) => {
+	const { text: text$1, setText, open, setOpen } = search;
+	const [active, setActive] = useState(-1);
+	const [list, setList] = useState(null);
+	const [sentinel, setSentinel] = useState(null);
+	const listId = useId();
+	const more = paging?.more ?? false;
+	useLoadMoreInView(list, sentinel, paging?.loaded ?? 0, paging?.loadMore);
+	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 = (option) => {
+		onChoose(option);
+		if (!several) return close();
+		setText("");
+		setActive(-1);
+	};
+	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), options.length - 1));
+			return;
+		}
+		if (event.key === "Enter" && open && options[active]) {
+			event.preventDefault();
+			choose(options[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 && options[active] ? optionId(active) : void 0,
+			invalid,
+			placeholder,
+			value: open ? text$1 : closedText,
+			onFocus: () => setOpen(true),
+			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",
+			"aria-multiselectable": several || void 0,
+			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.map((option, index) => /* @__PURE__ */ jsx("li", {
+					id: optionId(index),
+					role: "option",
+					"aria-selected": index === active,
+					className: cn("cursor-pointer truncate px-3 py-1.5", index === active && "bg-muted", chosen.includes(option.key) && "font-medium"),
+					onMouseMove: () => index !== active && setActive(index),
+					onClick: () => choose(option),
+					children: option.label
+				}, option.key)),
+				more && /* @__PURE__ */ jsx("li", {
+					ref: setSentinel,
+					"aria-hidden": true,
+					className: "h-px"
+				}),
+				failed && /* @__PURE__ */ jsx("li", {
+					className: "px-3 py-1.5 text-muted-foreground",
+					children: text("couldNotLoadOptions")
+				}),
+				!more && !loading && !failed && options.length === 0 && /* @__PURE__ */ jsx("li", {
+					className: "px-3 py-1.5 text-muted-foreground",
+					children: text("noMatches")
+				}),
+				loading && /* @__PURE__ */ jsx("li", {
+					className: "px-3 py-1.5 text-muted-foreground",
+					children: text("loading")
+				})
+			]
+		})]
+	});
+};
+//#endregion
+export { PickerCombobox, usePickerSearch };

package/dist/app/relation-picker.js

@@ -1,151 +1,54 @@
-import { cn } from "../lib/cn.js";
-import { Input } from "../primitives/input.js";
 import { humanize } from "../live/naming.js";
 import { labelFieldOf } from "../live/model-helpers.js";
 import { text } from "./messages.js";
 import { useList } from "../data/use-list.js";
+import { PickerCombobox, usePickerSearch } from "./picker/picker-combobox.js";
 import { relationOptionsQuery, titleMatches } from "./relation-options.js";
-import { useCallback, useEffect, useId, useRef, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { ApiError } from "@protobase/client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 //#region src/app/relation-picker.tsx
-/** 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, chosen = [value], several = false, invalid, onChange }) => {
-	const [text$1, 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 search = usePickerSearch();
 	const keyField = target.primaryKey[0];
 	const labelField = labelFieldOf(target, view);
 	const [refused, setRefused] = useState(false);
-	const query = relationOptionsQuery(target, labelField, text$1, refused);
+	const query = relationOptionsQuery(target, labelField, search.text, refused);
 	const rows = useList(target.name, {
 		filter: query.filter,
 		fields: [keyField, labelField],
-		enabled: open
+		enabled: search.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$1)) : rows.items;
-	const more = Boolean(rows.hasNextPage);
-	const loading = rows.isPending || rows.isFetchingNextPage;
+	const items = query.local ? rows.items.filter((item) => titleMatches(item[labelField], search.text)) : rows.items;
 	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]));
-		if (!several) return close();
-		setText("");
-		setActive(-1);
-	};
-	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: text("searchPlural", (view?.names?.plural ?? humanize(target.name)).toLowerCase()),
-			value: open ? text$1 : label ?? value,
-			onFocus: () => setOpen(true),
-			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",
-			"aria-multiselectable": several || void 0,
-			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: [
-				items.map((item, index) => /* @__PURE__ */ jsx("li", {
-					id: optionId(index),
-					role: "option",
-					"aria-selected": index === active,
-					className: cn("cursor-pointer truncate px-3 py-1.5", index === active && "bg-muted", chosen.includes(String(item[keyField])) && "font-medium"),
-					onMouseMove: () => index !== active && setActive(index),
-					onClick: () => choose(item),
-					children: String(item[labelField])
-				}, 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: text("couldNotLoadOptions")
-				}),
-				!more && !loading && !rows.error && items.length === 0 && /* @__PURE__ */ jsx("li", {
-					className: "px-3 py-1.5 text-muted-foreground",
-					children: text("noMatches")
-				}),
-				loading && /* @__PURE__ */ jsx("li", {
-					className: "px-3 py-1.5 text-muted-foreground",
-					children: text("loading")
-				})
-			]
-		})]
+	const loadMore = useCallback(() => fetchNextPage({ cancelRefetch: false }), [fetchNextPage]);
+	return /* @__PURE__ */ jsx(PickerCombobox, {
+		search,
+		options: items.map((item) => ({
+			key: String(item[keyField]),
+			label: String(item[labelField])
+		})),
+		chosen,
+		several,
+		closedText: label ?? value,
+		placeholder: text("searchPlural", (view?.names?.plural ?? humanize(target.name)).toLowerCase()),
+		invalid,
+		paging: {
+			more: Boolean(rows.hasNextPage),
+			loaded: rows.items.length,
+			loadMore
+		},
+		loading: rows.isPending || rows.isFetchingNextPage,
+		failed: Boolean(rows.error) && !expensive,
+		onChoose: (option) => onChange(option.key, option.label)
 	});
 };
 //#endregion

package/dist/filter-panel/facet-combobox.js

@@ -1,7 +1,7 @@
 import { cn } from "../lib/cn.js";
 import { formatInt } from "../format/number.js";
-import { text } from "./messages.js";
 import { Token } from "../primitives/token.js";
+import { text } from "./messages.js";
 import { facetLabel } from "./filter-state.js";
 import { comboboxOptions, moveActive } from "./combobox-options.js";
 import { useEffect, useId, useRef, useState } from "react";

package/dist/index.js

@@ -14,11 +14,11 @@ import { Textarea } from "./primitives/textarea.js";
 import { useList } from "./data/use-list.js";
 import { OtpInput } from "./primitives/otp-input.js";
 import { definePlugin, defineUi } from "./app/pages/project-ui.js";
+import { useMembers } from "./people/use-members.js";
 import { Markdown } from "./markdown/markdown.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 { useMembers } from "./people/use-members.js";
 import { LogoMark } from "./app-shell/logo.js";
 import { SignInPrompt } from "./auth/sign-in-prompt.js";
 import { useListDisplay } from "./app/displays/display-context.js";