@questpie/admin 1.1.1 → 2.0.0

package/dist/client/components/fields/relation-picker.mjs

@@ -0,0 +1,301 @@
+import { useResolveText, useTranslation } from "../../i18n/hooks.mjs";
+import { selectClient, useAdminStore } from "../../runtime/provider.mjs";
+import { resolveIconElement } from "../component-renderer.mjs";
+import { Button } from "../ui/button.mjs";
+import { getAutoColumns } from "./field-utils.mjs";
+import { useAdminConfig } from "../../hooks/use-admin-config.mjs";
+import { SelectSingle } from "../primitives/select-single.mjs";
+import { ResourceSheet } from "../sheets/resource-sheet.mjs";
+import { LocaleBadge } from "./locale-badge.mjs";
+import { RelationItemsDisplay } from "./relation/relation-items-display.mjs";
+import { Icon } from "@iconify/react";
+import { createQuestpieQueryOptions } from "@questpie/tanstack-query";
+import { useQueryClient } from "@tanstack/react-query";
+import * as React$1 from "react";
+import { toast } from "sonner";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/components/fields/relation-picker.tsx
+/**
+* RelationPicker Component
+*
+* Multiple relation field (one-to-many, many-to-many) with:
+* - Searchable select to add existing items
+* - Plus button to create new related item (opens side sheet)
+* - Edit button on each selected item (opens side sheet)
+* - Remove button on each selected item
+* - Optional drag-and-drop reordering
+* - Multiple display modes (list, chips, table, cards, grid)
+* - Responsive: Popover on desktop, Drawer on mobile
+*/
+function RelationPicker({ name, value = [], onChange, targetCollection, label, filter, required, disabled, readOnly, placeholder, error, localized, locale: localeProp, orderable = false, maxItems, display = "list", columns, fields, gridColumns, renderItem, renderOption }) {
+	const { t } = useTranslation();
+	const resolveText = useResolveText();
+	const resolvedLabel = label ? resolveText(label) : void 0;
+	const resolvedPlaceholder = placeholder ? resolveText(placeholder) : void 0;
+	const labelText = resolvedLabel || targetCollection;
+	const addLabel = t("relation.addItem", { name: labelText });
+	const noResultsLabel = t("relation.noResults", { name: labelText });
+	const emptyLabel = t("relation.noneSelected", { name: labelText });
+	const createLabel = t("relation.createNew", { name: labelText });
+	const locale = localeProp;
+	const [isSheetOpen, setIsSheetOpen] = React$1.useState(false);
+	const [editingItemId, setEditingItemId] = React$1.useState();
+	const { data: serverConfig } = useAdminConfig();
+	const targetConfig = serverConfig?.collections?.[targetCollection];
+	const collectionIconRef = targetConfig?.icon;
+	const displayColumns = React$1.useMemo(() => {
+		if (columns && columns.length > 0) return columns;
+		if (display === "table" && targetConfig) return getAutoColumns(targetConfig);
+		return ["_title"];
+	}, [
+		columns,
+		display,
+		targetConfig
+	]);
+	const selectedIds = React$1.useMemo(() => {
+		if (!value) return [];
+		if (Array.isArray(value)) return value;
+		return [value];
+	}, [value]);
+	const client = useAdminStore(selectClient);
+	const [fetchedItems, setFetchedItems] = React$1.useState(() => /* @__PURE__ */ new Map());
+	const [isLoadingItems, setIsLoadingItems] = React$1.useState(false);
+	const loadOptions = React$1.useCallback(async (search) => {
+		if (!client) return [];
+		try {
+			const options = { limit: 50 };
+			if (search) options.search = search;
+			if (filter) options.where = filter({});
+			const docs = (await client.collections[targetCollection].find(options))?.docs || [];
+			setFetchedItems((prev) => new Map([...prev, ...docs.map((doc) => [doc.id, doc])]));
+			return docs.filter((opt) => !selectedIds.includes(opt.id)).map((item) => ({
+				value: item.id,
+				label: renderOption ? String(renderOption(item)) : item._title || item.id || "",
+				icon: resolveIconElement(collectionIconRef, { className: "size-3.5 text-muted-foreground" })
+			}));
+		} catch (error$1) {
+			console.error("Failed to load relation options:", error$1);
+			toast.error("Failed to load options");
+			return [];
+		}
+	}, [
+		client,
+		targetCollection,
+		filter,
+		selectedIds,
+		renderOption,
+		collectionIconRef
+	]);
+	const queryClient = useQueryClient();
+	const queryOpts = React$1.useMemo(() => createQuestpieQueryOptions(client ?? {}, { keyPrefix: ["questpie", "collections"] }), [client]);
+	const refetch = React$1.useCallback(async () => {
+		setFetchedItems(/* @__PURE__ */ new Map());
+		queryClient.invalidateQueries({ queryKey: queryOpts.key([
+			"collections",
+			targetCollection,
+			"find"
+		]) });
+		selectedIds.forEach((id) => {
+			queryClient.invalidateQueries({ queryKey: queryOpts.key([
+				"collections",
+				targetCollection,
+				"findOne",
+				{ where: { id } }
+			]) });
+		});
+	}, [
+		queryClient,
+		queryOpts,
+		selectedIds,
+		targetCollection
+	]);
+	React$1.useEffect(() => {
+		if (!client || !selectedIds.length) {
+			setIsLoadingItems(false);
+			return;
+		}
+		const missingIds = selectedIds.filter((id) => !fetchedItems.has(id));
+		if (missingIds.length === 0) {
+			setIsLoadingItems(false);
+			return;
+		}
+		setIsLoadingItems(true);
+		let cancelled = false;
+		(async () => {
+			try {
+				for (const id of missingIds) {
+					if (cancelled) return;
+					const response = await client.collections[targetCollection].findOne({ where: { id } });
+					if (!cancelled && response) setFetchedItems((prev) => new Map([...prev, [id, response]]));
+				}
+			} catch (error$1) {
+				console.error("Failed to fetch selected items:", error$1);
+				toast.error("Failed to load selected items");
+			} finally {
+				if (!cancelled) setIsLoadingItems(false);
+			}
+		})();
+		return () => {
+			cancelled = true;
+		};
+	}, [
+		client,
+		targetCollection,
+		selectedIds,
+		fetchedItems
+	]);
+	const selectedItems = React$1.useMemo(() => {
+		return selectedIds.map((id) => fetchedItems.get(id)).filter(Boolean);
+	}, [selectedIds, fetchedItems]);
+	const handleAdd = React$1.useCallback((itemId) => {
+		if (!itemId) return;
+		if (selectedIds.includes(itemId)) return;
+		if (maxItems && selectedIds.length >= maxItems) return;
+		onChange([...selectedIds, itemId]);
+	}, [
+		selectedIds,
+		maxItems,
+		onChange
+	]);
+	const handleRemove = React$1.useCallback((itemId) => {
+		onChange(selectedIds.filter((id) => id !== itemId));
+	}, [selectedIds, onChange]);
+	const handleOpenCreate = React$1.useCallback(() => {
+		setEditingItemId(void 0);
+		setIsSheetOpen(true);
+	}, []);
+	const handleOpenEdit = React$1.useCallback((itemId) => {
+		setEditingItemId(itemId);
+		setIsSheetOpen(true);
+	}, []);
+	const handleSheetSave = React$1.useCallback(async (result) => {
+		if (!editingItemId && result?.id) onChange([...selectedIds, result.id]);
+		await refetch();
+	}, [
+		editingItemId,
+		selectedIds,
+		onChange,
+		refetch
+	]);
+	const canAddMore = !maxItems || selectedIds.length < maxItems;
+	const displayActions = React$1.useMemo(() => ({
+		onEdit: !readOnly ? (item) => handleOpenEdit(item.id) : void 0,
+		onRemove: !readOnly && (!required || selectedIds.length > 1) ? (item) => handleRemove(item.id) : void 0
+	}), [
+		readOnly,
+		required,
+		selectedIds.length,
+		handleOpenEdit,
+		handleRemove
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-2",
+		children: [
+			label && /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsxs("label", {
+					htmlFor: name,
+					className: "text-sm font-medium flex items-center gap-1.5",
+					children: [
+						resolveIconElement(collectionIconRef, { className: "size-3.5 text-muted-foreground" }),
+						resolvedLabel,
+						required && /* @__PURE__ */ jsx("span", {
+							className: "text-destructive",
+							children: "*"
+						}),
+						maxItems && /* @__PURE__ */ jsxs("span", {
+							className: "ml-2 text-xs text-muted-foreground",
+							children: [
+								"(",
+								selectedIds.length,
+								"/",
+								maxItems,
+								")"
+							]
+						})
+					]
+				}), localized && /* @__PURE__ */ jsx(LocaleBadge, { locale: locale || "i18n" })]
+			}),
+			(selectedItems.length > 0 || isLoadingItems) && /* @__PURE__ */ jsx(RelationItemsDisplay, {
+				display,
+				items: selectedItems,
+				collection: targetCollection,
+				collectionIcon: collectionIconRef,
+				editable: !readOnly && !disabled,
+				orderable: orderable && !readOnly && !disabled,
+				columns: displayColumns,
+				fields,
+				gridColumns,
+				renderItem,
+				actions: displayActions,
+				collectionConfig: targetConfig,
+				isLoading: isLoadingItems,
+				loadingCount: selectedIds.length || 3
+			}),
+			!readOnly && canAddMore && /* @__PURE__ */ jsxs("div", {
+				className: "flex gap-2",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "flex-1",
+					children: /* @__PURE__ */ jsx(SelectSingle, {
+						value: null,
+						onChange: handleAdd,
+						loadOptions,
+						queryKey: (search) => queryOpts.key([
+							"collections",
+							targetCollection,
+							"find",
+							{
+								limit: 50,
+								search,
+								where: filter ? filter({}) : void 0,
+								selectedIds
+							}
+						]),
+						prefetchOnMount: true,
+						placeholder: resolvedPlaceholder || `${addLabel}...`,
+						disabled,
+						clearable: false,
+						emptyMessage: noResultsLabel,
+						drawerTitle: addLabel
+					})
+				}), /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "outline",
+					size: "icon",
+					onClick: handleOpenCreate,
+					disabled,
+					title: createLabel,
+					"aria-label": createLabel,
+					children: /* @__PURE__ */ jsx(Icon, {
+						icon: "ph:plus",
+						className: "h-4 w-4"
+					})
+				})]
+			}),
+			selectedIds.length === 0 && !isLoadingItems && /* @__PURE__ */ jsx("div", {
+				className: "rounded-lg border border-dashed p-4 text-center",
+				children: /* @__PURE__ */ jsx("p", {
+					className: "text-sm text-muted-foreground",
+					children: resolvedPlaceholder || emptyLabel
+				})
+			}),
+			error && /* @__PURE__ */ jsx("p", {
+				className: "text-sm text-destructive",
+				children: error
+			}),
+			/* @__PURE__ */ jsx(ResourceSheet, {
+				type: "collection",
+				collection: targetCollection,
+				itemId: editingItemId,
+				open: isSheetOpen,
+				onOpenChange: setIsSheetOpen,
+				onSave: handleSheetSave
+			})
+		]
+	});
+}
+
+//#endregion
+export { RelationPicker };
+//# sourceMappingURL=relation-picker.mjs.map

package/dist/client/components/fields/relation-picker.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"relation-picker.mjs","names":["React","options: any","error"],"sources":["../../../../src/client/components/fields/relation-picker.tsx"],"sourcesContent":["/**\n * RelationPicker Component\n *\n * Multiple relation field (one-to-many, many-to-many) with:\n * - Searchable select to add existing items\n * - Plus button to create new related item (opens side sheet)\n * - Edit button on each selected item (opens side sheet)\n * - Remove button on each selected item\n * - Optional drag-and-drop reordering\n * - Multiple display modes (list, chips, table, cards, grid)\n * - Responsive: Popover on desktop, Drawer on mobile\n */\n\nimport { Icon } from \"@iconify/react\";\nimport { createQuestpieQueryOptions } from \"@questpie/tanstack-query\";\nimport { useQueryClient } from \"@tanstack/react-query\";\nimport type { Questpie } from \"questpie\";\nimport * as React from \"react\";\nimport { toast } from \"sonner\";\nimport { useAdminConfig } from \"../../hooks/use-admin-config\";\nimport { useResolveText, useTranslation } from \"../../i18n/hooks\";\nimport { selectClient, useAdminStore } from \"../../runtime\";\nimport { resolveIconElement } from \"../component-renderer\";\nimport { SelectSingle } from \"../primitives/select-single\";\nimport type { SelectOption } from \"../primitives/types\";\nimport { ResourceSheet } from \"../sheets/resource-sheet\";\nimport { Button } from \"../ui/button\";\nimport { getAutoColumns } from \"./field-utils\";\nimport { LocaleBadge } from \"./locale-badge\";\nimport {\n\ttype RelationDisplayFields,\n\ttype RelationDisplayMode,\n\tRelationItemsDisplay,\n} from \"./relation\";\n\nexport interface RelationPickerProps<_T extends Questpie<any>> {\n\t/**\n\t * Field name\n\t */\n\tname: string;\n\n\t/**\n\t * Current value (array of IDs of related items)\n\t */\n\tvalue?: string[] | null;\n\n\t/**\n\t * Change handler\n\t */\n\tonChange: (value: string[]) => void;\n\n\t/**\n\t * Target collection name\n\t */\n\ttargetCollection: string;\n\n\t/**\n\t * Label for the field\n\t */\n\tlabel?: string;\n\n\t/**\n\t * Localized field\n\t */\n\tlocalized?: boolean;\n\n\t/**\n\t * Active locale\n\t */\n\tlocale?: string;\n\n\t/**\n\t * Filter options based on form values\n\t */\n\tfilter?: (formValues: any) => any;\n\n\t/**\n\t * Is the field required\n\t */\n\trequired?: boolean;\n\n\t/**\n\t * Is the field disabled\n\t */\n\tdisabled?: boolean;\n\n\t/**\n\t * Is the field readonly\n\t */\n\treadOnly?: boolean;\n\n\t/**\n\t * Placeholder text\n\t */\n\tplaceholder?: string;\n\n\t/**\n\t * Error message\n\t */\n\terror?: string;\n\n\t/**\n\t * Enable drag-and-drop reordering\n\t */\n\torderable?: boolean;\n\n\t/**\n\t * Maximum number of items\n\t */\n\tmaxItems?: number;\n\n\t/**\n\t * Display mode for selected items\n\t * @default \"list\"\n\t */\n\tdisplay?: RelationDisplayMode;\n\n\t/**\n\t * Columns to show in table display mode\n\t */\n\tcolumns?: string[];\n\n\t/**\n\t * Field mapping for cards/grid display modes\n\t */\n\tfields?: RelationDisplayFields;\n\n\t/**\n\t * Number of columns for grid/cards layout\n\t */\n\tgridColumns?: 1 | 2 | 3 | 4;\n\n\t/**\n\t * Custom render function for selected items (only used in list mode)\n\t */\n\trenderItem?: (item: any, index: number) => React.ReactNode;\n\n\t/**\n\t * Custom render function for dropdown options\n\t */\n\trenderOption?: (item: any) => React.ReactNode;\n}\n\nexport function RelationPicker<T extends Questpie<any>>({\n\tname,\n\tvalue = [],\n\tonChange,\n\ttargetCollection,\n\tlabel,\n\tfilter,\n\trequired,\n\tdisabled,\n\treadOnly,\n\tplaceholder,\n\terror,\n\tlocalized,\n\tlocale: localeProp,\n\torderable = false,\n\tmaxItems,\n\tdisplay = \"list\",\n\tcolumns,\n\tfields,\n\tgridColumns,\n\trenderItem,\n\trenderOption,\n}: RelationPickerProps<T>) {\n\tconst { t } = useTranslation();\n\tconst resolveText = useResolveText();\n\tconst resolvedLabel = label ? resolveText(label) : undefined;\n\tconst resolvedPlaceholder = placeholder\n\t\t? resolveText(placeholder)\n\t\t: undefined;\n\tconst labelText = resolvedLabel || targetCollection;\n\tconst addLabel = t(\"relation.addItem\", { name: labelText });\n\tconst noResultsLabel = t(\"relation.noResults\", { name: labelText });\n\tconst emptyLabel = t(\"relation.noneSelected\", { name: labelText });\n\tconst createLabel = t(\"relation.createNew\", { name: labelText });\n\tconst locale = localeProp;\n\tconst [isSheetOpen, setIsSheetOpen] = React.useState(false);\n\tconst [editingItemId, setEditingItemId] = React.useState<\n\t\tstring | undefined\n\t>();\n\n\t// Get admin config for target collection from server\n\tconst { data: serverConfig } = useAdminConfig();\n\tconst targetConfig = serverConfig?.collections?.[targetCollection];\n\tconst collectionIconRef = (targetConfig as any)?.icon;\n\tconst displayColumns = React.useMemo(() => {\n\t\tif (columns && columns.length > 0) return columns;\n\t\tif (display === \"table\" && targetConfig) {\n\t\t\treturn getAutoColumns(targetConfig);\n\t\t}\n\t\treturn [\"_title\"];\n\t}, [columns, display, targetConfig]);\n\n\t// Normalize value to array (handles prefill with single string ID)\n\tconst selectedIds = React.useMemo(() => {\n\t\tif (!value) return [];\n\t\tif (Array.isArray(value)) return value;\n\t\t// Single string ID (from prefill) - convert to array\n\t\treturn [value];\n\t}, [value]);\n\tconst client = useAdminStore(selectClient);\n\n\t// Keep track of fetched items for display\n\t// Using lazy init to avoid creating new Map on every render\n\tconst [fetchedItems, setFetchedItems] = React.useState<Map<string, any>>(\n\t\t() => new Map(),\n\t);\n\n\t// Track loading state for items\n\tconst [isLoadingItems, setIsLoadingItems] = React.useState(false);\n\n\t// Load options from server with search\n\tconst loadOptions = React.useCallback(\n\t\tasync (search: string): Promise<SelectOption<string>[]> => {\n\t\t\tif (!client) return [];\n\n\t\t\ttry {\n\t\t\t\tconst options: any = {\n\t\t\t\t\tlimit: 50,\n\t\t\t\t};\n\n\t\t\t\t// Add search filter for _title\n\t\t\t\tif (search) {\n\t\t\t\t\toptions.search = search;\n\t\t\t\t}\n\n\t\t\t\t// Add custom filter if provided\n\t\t\t\tif (filter) {\n\t\t\t\t\toptions.where = filter({});\n\t\t\t\t}\n\n\t\t\t\tconst response = await (client as any).collections[\n\t\t\t\t\ttargetCollection\n\t\t\t\t].find(options);\n\t\t\t\tconst docs = response?.docs || [];\n\n\t\t\t\t// Immutable update - create new Map with spread to avoid mutations\n\t\t\t\tsetFetchedItems(\n\t\t\t\t\t(prev) =>\n\t\t\t\t\t\tnew Map([\n\t\t\t\t\t\t\t...prev,\n\t\t\t\t\t\t\t...docs.map((doc: any) => [doc.id, doc] as const),\n\t\t\t\t\t\t]),\n\t\t\t\t);\n\n\t\t\t\t// Filter out already selected items and transform to SelectOption format\n\t\t\t\treturn docs\n\t\t\t\t\t.filter((opt: any) => !selectedIds.includes(opt.id))\n\t\t\t\t\t.map((item: any) => ({\n\t\t\t\t\t\tvalue: item.id,\n\t\t\t\t\t\tlabel: renderOption\n\t\t\t\t\t\t\t? String(renderOption(item))\n\t\t\t\t\t\t\t: item._title || item.id || \"\",\n\t\t\t\t\t\ticon: resolveIconElement(collectionIconRef, {\n\t\t\t\t\t\t\tclassName: \"size-3.5 text-muted-foreground\",\n\t\t\t\t\t\t}),\n\t\t\t\t\t}));\n\t\t\t} catch (error) {\n\t\t\t\tconsole.error(\"Failed to load relation options:\", error);\n\t\t\t\ttoast.error(\"Failed to load options\");\n\t\t\t\treturn [];\n\t\t\t}\n\t\t},\n\t\t[\n\t\t\tclient,\n\t\t\ttargetCollection,\n\t\t\tfilter,\n\t\t\tselectedIds,\n\t\t\trenderOption,\n\t\t\tcollectionIconRef,\n\t\t],\n\t);\n\n\t// Refetch for mutations (after create/update)\n\tconst queryClient = useQueryClient();\n\tconst queryOpts = React.useMemo(\n\t\t() =>\n\t\t\tcreateQuestpieQueryOptions(\n\t\t\t\t(client ?? {}) as any,\n\t\t\t\t{\n\t\t\t\t\tkeyPrefix: [\"questpie\", \"collections\"],\n\t\t\t\t} as any,\n\t\t\t),\n\t\t[client],\n\t);\n\n\tconst refetch = React.useCallback(async () => {\n\t\t// Clear cached items to force refresh\n\t\tsetFetchedItems(new Map());\n\t\tqueryClient.invalidateQueries({\n\t\t\tqueryKey: queryOpts.key([\"collections\", targetCollection, \"find\"]),\n\t\t});\n\t\tselectedIds.forEach((id) => {\n\t\t\tqueryClient.invalidateQueries({\n\t\t\t\tqueryKey: queryOpts.key([\n\t\t\t\t\t\"collections\",\n\t\t\t\t\ttargetCollection,\n\t\t\t\t\t\"findOne\",\n\t\t\t\t\t{ where: { id } },\n\t\t\t\t]),\n\t\t\t});\n\t\t});\n\t}, [queryClient, queryOpts, selectedIds, targetCollection]);\n\n\t// Fetch selected items on mount for display\n\tReact.useEffect(() => {\n\t\tif (!client || !selectedIds.length) {\n\t\t\tsetIsLoadingItems(false);\n\t\t\treturn;\n\t\t}\n\n\t\t// Fetch any selected items that we don't have in cache\n\t\tconst missingIds = selectedIds.filter((id) => !fetchedItems.has(id));\n\t\tif (missingIds.length === 0) {\n\t\t\tsetIsLoadingItems(false);\n\t\t\treturn;\n\t\t}\n\n\t\tsetIsLoadingItems(true);\n\n\t\tlet cancelled = false;\n\n\t\t(async () => {\n\t\t\ttry {\n\t\t\t\tfor (const id of missingIds) {\n\t\t\t\t\tif (cancelled) return;\n\t\t\t\t\tconst response = await (client as any).collections[\n\t\t\t\t\t\ttargetCollection\n\t\t\t\t\t].findOne({ where: { id } });\n\t\t\t\t\tif (!cancelled && response) {\n\t\t\t\t\t\t// Immutable update - spread prev and add new entry\n\t\t\t\t\t\tsetFetchedItems((prev) => new Map([...prev, [id, response]]));\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} catch (error) {\n\t\t\t\tconsole.error(\"Failed to fetch selected items:\", error);\n\t\t\t\ttoast.error(\"Failed to load selected items\");\n\t\t\t} finally {\n\t\t\t\tif (!cancelled) {\n\t\t\t\t\tsetIsLoadingItems(false);\n\t\t\t\t}\n\t\t\t}\n\t\t})();\n\n\t\treturn () => {\n\t\t\tcancelled = true;\n\t\t};\n\t}, [client, targetCollection, selectedIds, fetchedItems]);\n\n\t// Get selected items from cache\n\tconst selectedItems = React.useMemo(() => {\n\t\treturn selectedIds\n\t\t\t.map((id: string) => fetchedItems.get(id))\n\t\t\t.filter(Boolean);\n\t}, [selectedIds, fetchedItems]);\n\n\tconst handleAdd = React.useCallback(\n\t\t(itemId: string | null) => {\n\t\t\tif (!itemId) return;\n\t\t\tif (selectedIds.includes(itemId)) return;\n\t\t\tif (maxItems && selectedIds.length >= maxItems) return;\n\t\t\tonChange([...selectedIds, itemId]);\n\t\t},\n\t\t[selectedIds, maxItems, onChange],\n\t);\n\n\tconst handleRemove = React.useCallback(\n\t\t(itemId: string) => {\n\t\t\tonChange(selectedIds.filter((id) => id !== itemId));\n\t\t},\n\t\t[selectedIds, onChange],\n\t);\n\n\tconst handleOpenCreate = React.useCallback(() => {\n\t\tsetEditingItemId(undefined);\n\t\tsetIsSheetOpen(true);\n\t}, []);\n\n\tconst handleOpenEdit = React.useCallback((itemId: string) => {\n\t\tsetEditingItemId(itemId);\n\t\tsetIsSheetOpen(true);\n\t}, []);\n\n\t// Handle save from ResourceSheet\n\tconst handleSheetSave = React.useCallback(\n\t\tasync (result: any) => {\n\t\t\t// Add newly created item to selection (create mode = no editingItemId)\n\t\t\tif (!editingItemId && result?.id) {\n\t\t\t\tonChange([...selectedIds, result.id]);\n\t\t\t}\n\t\t\tawait refetch();\n\t\t},\n\t\t[editingItemId, selectedIds, onChange, refetch],\n\t);\n\n\tconst canAddMore = !maxItems || selectedIds.length < maxItems;\n\n\t// Memoize actions to prevent infinite re-renders\n\tconst displayActions = React.useMemo(\n\t\t() => ({\n\t\t\tonEdit: !readOnly ? (item: any) => handleOpenEdit(item.id) : undefined,\n\t\t\tonRemove:\n\t\t\t\t!readOnly && (!required || selectedIds.length > 1)\n\t\t\t\t\t? (item: any) => handleRemove(item.id)\n\t\t\t\t\t: undefined,\n\t\t}),\n\t\t[readOnly, required, selectedIds.length, handleOpenEdit, handleRemove],\n\t);\n\n\treturn (\n\t\t<div className=\"space-y-2\">\n\t\t\t{label && (\n\t\t\t\t<div className=\"flex items-center gap-2\">\n\t\t\t\t\t<label\n\t\t\t\t\t\thtmlFor={name}\n\t\t\t\t\t\tclassName=\"text-sm font-medium flex items-center gap-1.5\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{resolveIconElement(collectionIconRef, {\n\t\t\t\t\t\t\tclassName: \"size-3.5 text-muted-foreground\",\n\t\t\t\t\t\t})}\n\t\t\t\t\t\t{resolvedLabel}\n\t\t\t\t\t\t{required && <span className=\"text-destructive\">*</span>}\n\t\t\t\t\t\t{maxItems && (\n\t\t\t\t\t\t\t<span className=\"ml-2 text-xs text-muted-foreground\">\n\t\t\t\t\t\t\t\t({selectedIds.length}/{maxItems})\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</label>\n\t\t\t\t\t{localized && <LocaleBadge locale={locale || \"i18n\"} />}\n\t\t\t\t</div>\n\t\t\t)}\n\n\t\t\t{/* Selected Items Display */}\n\t\t\t{(selectedItems.length > 0 || isLoadingItems) && (\n\t\t\t\t<RelationItemsDisplay\n\t\t\t\t\tdisplay={display}\n\t\t\t\t\titems={selectedItems}\n\t\t\t\t\tcollection={targetCollection}\n\t\t\t\t\tcollectionIcon={collectionIconRef}\n\t\t\t\t\teditable={!readOnly && !disabled}\n\t\t\t\t\torderable={orderable && !readOnly && !disabled}\n\t\t\t\t\tcolumns={displayColumns}\n\t\t\t\t\tfields={fields}\n\t\t\t\t\tgridColumns={gridColumns}\n\t\t\t\t\trenderItem={renderItem}\n\t\t\t\t\tactions={displayActions}\n\t\t\t\t\tcollectionConfig={targetConfig as any}\n\t\t\t\t\tisLoading={isLoadingItems}\n\t\t\t\t\tloadingCount={selectedIds.length || 3}\n\t\t\t\t/>\n\t\t\t)}\n\n\t\t\t{/* Add More */}\n\t\t\t{!readOnly && canAddMore && (\n\t\t\t\t<div className=\"flex gap-2\">\n\t\t\t\t\t{/* Searchable Select to add existing items - uses server-side search */}\n\t\t\t\t\t<div className=\"flex-1\">\n\t\t\t\t\t\t<SelectSingle\n\t\t\t\t\t\t\tvalue={null}\n\t\t\t\t\t\t\tonChange={handleAdd}\n\t\t\t\t\t\t\tloadOptions={loadOptions}\n\t\t\t\t\t\t\tqueryKey={(search) =>\n\t\t\t\t\t\t\t\tqueryOpts.key([\n\t\t\t\t\t\t\t\t\t\"collections\",\n\t\t\t\t\t\t\t\t\ttargetCollection,\n\t\t\t\t\t\t\t\t\t\"find\",\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\tlimit: 50,\n\t\t\t\t\t\t\t\t\t\tsearch,\n\t\t\t\t\t\t\t\t\t\twhere: filter ? filter({}) : undefined,\n\t\t\t\t\t\t\t\t\t\tselectedIds,\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t])\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tprefetchOnMount\n\t\t\t\t\t\t\tplaceholder={resolvedPlaceholder || `${addLabel}...`}\n\t\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\t\tclearable={false}\n\t\t\t\t\t\t\temptyMessage={noResultsLabel}\n\t\t\t\t\t\t\tdrawerTitle={addLabel}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t{/* Create Button */}\n\t\t\t\t\t<Button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tvariant=\"outline\"\n\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\tonClick={handleOpenCreate}\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\ttitle={createLabel}\n\t\t\t\t\t\taria-label={createLabel}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Icon icon=\"ph:plus\" className=\"h-4 w-4\" />\n\t\t\t\t\t</Button>\n\t\t\t\t</div>\n\t\t\t)}\n\n\t\t\t{/* Empty State - only show when not loading */}\n\t\t\t{selectedIds.length === 0 && !isLoadingItems && (\n\t\t\t\t<div className=\"rounded-lg border border-dashed p-4 text-center\">\n\t\t\t\t\t<p className=\"text-sm text-muted-foreground\">\n\t\t\t\t\t\t{resolvedPlaceholder || emptyLabel}\n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\t\t\t)}\n\n\t\t\t{/* Error message */}\n\t\t\t{error && <p className=\"text-sm text-destructive\">{error}</p>}\n\n\t\t\t{/* Side Sheet for Create/Edit */}\n\t\t\t<ResourceSheet\n\t\t\t\ttype=\"collection\"\n\t\t\t\tcollection={targetCollection}\n\t\t\t\titemId={editingItemId}\n\t\t\t\topen={isSheetOpen}\n\t\t\t\tonOpenChange={setIsSheetOpen}\n\t\t\t\tonSave={handleSheetSave}\n\t\t\t/>\n\t\t</div>\n\t);\n}\n"],"mappings":"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"}

package/dist/client/components/fields/relation-select.d.mts

@@ -0,0 +1,3 @@
+import "react";
+import "react/jsx-runtime";
+import { Questpie } from "questpie";

package/dist/client/components/fields/relation-select.mjs

@@ -0,0 +1,219 @@
+import { useResolveText, useTranslation } from "../../i18n/hooks.mjs";
+import { cn } from "../../lib/utils.mjs";
+import { selectClient, useAdminStore } from "../../runtime/provider.mjs";
+import { resolveIconElement } from "../component-renderer.mjs";
+import { Button } from "../ui/button.mjs";
+import { useAdminConfig } from "../../hooks/use-admin-config.mjs";
+import { useCollectionItem } from "../../hooks/use-collection.mjs";
+import { SelectSingle } from "../primitives/select-single.mjs";
+import { ResourceSheet } from "../sheets/resource-sheet.mjs";
+import { LocaleBadge } from "./locale-badge.mjs";
+import { Icon } from "@iconify/react";
+import { createQuestpieQueryOptions } from "@questpie/tanstack-query";
+import { useQueryClient } from "@tanstack/react-query";
+import * as React$1 from "react";
+import { toast } from "sonner";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/components/fields/relation-select.tsx
+/**
+* RelationSelect Component
+*
+* Single relation field (one-to-one) with:
+* - Searchable select dropdown to choose existing item
+* - Plus button to create new related item (opens side sheet)
+* - Edit button to modify selected item (opens side sheet)
+* - Responsive: Popover on desktop, Drawer on mobile
+*/
+function RelationSelect({ name, value, onChange, targetCollection, label, filter, required, disabled, readOnly, placeholder, error, localized, locale, renderOption, renderValue }) {
+	const { t } = useTranslation();
+	const resolveText = useResolveText();
+	const resolvedLabel = label ? resolveText(label) : void 0;
+	const resolvedPlaceholder = placeholder ? resolveText(placeholder) : void 0;
+	const labelText = resolvedLabel || targetCollection;
+	const selectLabel = t("relation.select", { name: labelText });
+	const noResultsLabel = t("relation.noResults", { name: labelText });
+	const createLabel = t("relation.createNew", { name: labelText });
+	const [isSheetOpen, setIsSheetOpen] = React$1.useState(false);
+	const [editingItemId, setEditingItemId] = React$1.useState();
+	const { data: serverConfig } = useAdminConfig();
+	const client = useAdminStore(selectClient);
+	const collectionIconRef = (serverConfig?.collections?.[targetCollection])?.icon;
+	const loadOptions = React$1.useCallback(async (search) => {
+		if (!client) return [];
+		try {
+			const options = {
+				limit: 50,
+				locale
+			};
+			if (search) options.search = search;
+			if (filter) options.where = filter({});
+			return ((await client.collections[targetCollection].find(options))?.docs || []).map((item) => ({
+				value: item.id,
+				label: renderOption ? String(renderOption(item)) : item._title || item.id || "",
+				icon: resolveIconElement(collectionIconRef, { className: "size-3.5 text-muted-foreground" })
+			}));
+		} catch (error$1) {
+			console.error("Failed to load relation options:", error$1);
+			toast.error("Failed to load options");
+			return [];
+		}
+	}, [
+		client,
+		targetCollection,
+		filter,
+		renderOption,
+		collectionIconRef,
+		locale
+	]);
+	const queryClient = useQueryClient();
+	const queryOpts = React$1.useMemo(() => createQuestpieQueryOptions(client ?? {}, { keyPrefix: ["questpie", "collections"] }), [client]);
+	const refetch = React$1.useCallback(async () => {
+		queryClient.invalidateQueries({ queryKey: queryOpts.key([
+			"collections",
+			targetCollection,
+			"find"
+		]) });
+		queryClient.invalidateQueries({ queryKey: queryOpts.key([
+			"collections",
+			targetCollection,
+			"findOne",
+			{ where: { id: value || "" } }
+		]) });
+	}, [
+		queryClient,
+		queryOpts,
+		targetCollection,
+		value
+	]);
+	const { data: selectedItem } = useCollectionItem(targetCollection, value || "", void 0, { enabled: !!value });
+	const selectedOptions = React$1.useMemo(() => {
+		if (!selectedItem) return [];
+		return [{
+			value: selectedItem.id,
+			label: renderValue ? String(renderValue(selectedItem)) : selectedItem._title || selectedItem.id || "",
+			icon: resolveIconElement(collectionIconRef, { className: "size-3.5 text-muted-foreground" })
+		}];
+	}, [
+		selectedItem,
+		renderValue,
+		collectionIconRef
+	]);
+	const handleOpenCreate = () => {
+		setEditingItemId(void 0);
+		setIsSheetOpen(true);
+	};
+	const handleOpenEdit = () => {
+		if (!value) return;
+		setEditingItemId(value);
+		setIsSheetOpen(true);
+	};
+	const handleValueChange = (newValue) => {
+		onChange(newValue);
+	};
+	const handleSheetSave = React$1.useCallback(async (result) => {
+		if (!editingItemId && result?.id) onChange(result.id);
+		await refetch();
+	}, [
+		editingItemId,
+		onChange,
+		refetch
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-2",
+		children: [
+			label && /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsxs("label", {
+					htmlFor: name,
+					className: "text-sm font-medium flex items-center gap-1.5",
+					children: [
+						resolveIconElement(collectionIconRef, { className: "size-3.5 text-muted-foreground" }),
+						resolvedLabel,
+						required && /* @__PURE__ */ jsx("span", {
+							className: "text-destructive",
+							children: "*"
+						})
+					]
+				}), localized && /* @__PURE__ */ jsx(LocaleBadge, { locale: locale || "i18n" })]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-stretch gap-0",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "min-w-0 flex-1",
+					children: /* @__PURE__ */ jsx(SelectSingle, {
+						id: name,
+						value: value || null,
+						onChange: handleValueChange,
+						options: selectedOptions,
+						loadOptions,
+						queryKey: (search) => queryOpts.key([
+							"collections",
+							targetCollection,
+							"find",
+							{
+								limit: 50,
+								locale,
+								search,
+								where: filter ? filter({}) : void 0
+							}
+						]),
+						prefetchOnMount: true,
+						placeholder: resolvedPlaceholder || `${selectLabel}...`,
+						disabled: disabled || readOnly,
+						clearable: !required,
+						emptyMessage: noResultsLabel,
+						drawerTitle: selectLabel,
+						className: cn(!readOnly && "rounded-r-none", error && "border-destructive"),
+						"aria-invalid": !!error
+					})
+				}), !readOnly && /* @__PURE__ */ jsxs("div", {
+					className: "flex",
+					children: [value && /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "outline",
+						size: "icon",
+						onClick: handleOpenEdit,
+						disabled,
+						title: t("collection.edit", { name: labelText }),
+						"aria-label": t("collection.edit", { name: labelText }),
+						className: "rounded-none border-l-0",
+						children: /* @__PURE__ */ jsx(Icon, {
+							icon: "ph:pencil",
+							className: "h-4 w-4"
+						})
+					}), /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "outline",
+						size: "icon",
+						onClick: handleOpenCreate,
+						disabled,
+						title: createLabel,
+						"aria-label": createLabel,
+						className: "border-l-0 rounded-l-none",
+						children: /* @__PURE__ */ jsx(Icon, {
+							icon: "ph:plus",
+							className: "h-4 w-4"
+						})
+					})]
+				})]
+			}),
+			error && /* @__PURE__ */ jsx("p", {
+				className: "text-sm text-destructive",
+				children: error
+			}),
+			/* @__PURE__ */ jsx(ResourceSheet, {
+				type: "collection",
+				collection: targetCollection,
+				itemId: editingItemId,
+				open: isSheetOpen,
+				onOpenChange: setIsSheetOpen,
+				onSave: handleSheetSave
+			})
+		]
+	});
+}
+
+//#endregion
+export { RelationSelect };
+//# sourceMappingURL=relation-select.mjs.map

package/dist/client/components/fields/relation-select.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"relation-select.mjs","names":["React","options: any","error"],"sources":["../../../../src/client/components/fields/relation-select.tsx"],"sourcesContent":["/**\n * RelationSelect Component\n *\n * Single relation field (one-to-one) with:\n * - Searchable select dropdown to choose existing item\n * - Plus button to create new related item (opens side sheet)\n * - Edit button to modify selected item (opens side sheet)\n * - Responsive: Popover on desktop, Drawer on mobile\n */\n\nimport { Icon } from \"@iconify/react\";\nimport { createQuestpieQueryOptions } from \"@questpie/tanstack-query\";\nimport { useQueryClient } from \"@tanstack/react-query\";\nimport type { Questpie } from \"questpie\";\nimport * as React from \"react\";\nimport { toast } from \"sonner\";\nimport { useAdminConfig } from \"../../hooks/use-admin-config\";\nimport { useCollectionItem } from \"../../hooks/use-collection\";\nimport { useResolveText, useTranslation } from \"../../i18n/hooks\";\nimport { cn } from \"../../lib/utils\";\nimport { selectClient, useAdminStore } from \"../../runtime\";\nimport { resolveIconElement } from \"../component-renderer\";\nimport { SelectSingle } from \"../primitives/select-single\";\nimport type { SelectOption } from \"../primitives/types\";\nimport { ResourceSheet } from \"../sheets/resource-sheet\";\nimport { Button } from \"../ui/button\";\nimport { LocaleBadge } from \"./locale-badge\";\n\nexport interface RelationSelectProps<_T extends Questpie<any>> {\n\t/**\n\t * Field name\n\t */\n\tname: string;\n\n\t/**\n\t * Current value (ID of related item)\n\t */\n\tvalue?: string | null;\n\n\t/**\n\t * Change handler\n\t */\n\tonChange: (value: string | null) => void;\n\n\t/**\n\t * Target collection name\n\t */\n\ttargetCollection: string;\n\n\t/**\n\t * Label for the field\n\t */\n\tlabel?: string;\n\n\t/**\n\t * Localized field\n\t */\n\tlocalized?: boolean;\n\n\t/**\n\t * Active locale\n\t */\n\tlocale?: string;\n\n\t/**\n\t * Filter options based on form values\n\t */\n\tfilter?: (formValues: any) => any;\n\n\t/**\n\t * Is the field required\n\t */\n\trequired?: boolean;\n\n\t/**\n\t * Is the field disabled\n\t */\n\tdisabled?: boolean;\n\n\t/**\n\t * Is the field readonly\n\t */\n\treadOnly?: boolean;\n\n\t/**\n\t * Placeholder text\n\t */\n\tplaceholder?: string;\n\n\t/**\n\t * Error message\n\t */\n\terror?: string;\n\n\t/**\n\t * Custom render function for dropdown options\n\t */\n\trenderOption?: (item: any) => React.ReactNode;\n\n\t/**\n\t * Custom render function for selected value\n\t */\n\trenderValue?: (item: any) => React.ReactNode;\n}\n\nexport function RelationSelect<T extends Questpie<any>>({\n\tname,\n\tvalue,\n\tonChange,\n\ttargetCollection,\n\tlabel,\n\tfilter,\n\trequired,\n\tdisabled,\n\treadOnly,\n\tplaceholder,\n\terror,\n\tlocalized,\n\tlocale,\n\trenderOption,\n\trenderValue,\n}: RelationSelectProps<T>) {\n\tconst { t } = useTranslation();\n\tconst resolveText = useResolveText();\n\tconst resolvedLabel = label ? resolveText(label) : undefined;\n\tconst resolvedPlaceholder = placeholder\n\t\t? resolveText(placeholder)\n\t\t: undefined;\n\tconst labelText = resolvedLabel || targetCollection;\n\tconst selectLabel = t(\"relation.select\", { name: labelText });\n\tconst noResultsLabel = t(\"relation.noResults\", { name: labelText });\n\tconst createLabel = t(\"relation.createNew\", { name: labelText });\n\tconst [isSheetOpen, setIsSheetOpen] = React.useState(false);\n\tconst [editingItemId, setEditingItemId] = React.useState<\n\t\tstring | undefined\n\t>();\n\n\t// Get admin config for target collection from server\n\tconst { data: serverConfig } = useAdminConfig();\n\tconst client = useAdminStore(selectClient);\n\tconst targetConfig = serverConfig?.collections?.[targetCollection];\n\tconst collectionIconRef = (targetConfig as any)?.icon;\n\n\t// Load options from server with search\n\tconst loadOptions = React.useCallback(\n\t\tasync (search: string): Promise<SelectOption<string>[]> => {\n\t\t\tif (!client) return [];\n\n\t\t\ttry {\n\t\t\t\tconst options: any = {\n\t\t\t\t\tlimit: 50,\n\t\t\t\t\tlocale,\n\t\t\t\t};\n\n\t\t\t\t// Add search filter for _title\n\t\t\t\tif (search) {\n\t\t\t\t\toptions.search = search;\n\t\t\t\t}\n\n\t\t\t\t// Add custom filter if provided\n\t\t\t\tif (filter) {\n\t\t\t\t\toptions.where = filter({});\n\t\t\t\t}\n\n\t\t\t\tconst response = await (client as any).collections[\n\t\t\t\t\ttargetCollection\n\t\t\t\t].find(options);\n\t\t\t\tconst docs = response?.docs || [];\n\n\t\t\t\treturn docs.map((item: any) => ({\n\t\t\t\t\tvalue: item.id,\n\t\t\t\t\tlabel: renderOption\n\t\t\t\t\t\t? String(renderOption(item))\n\t\t\t\t\t\t: item._title || item.id || \"\",\n\t\t\t\t\ticon: resolveIconElement(collectionIconRef, {\n\t\t\t\t\t\tclassName: \"size-3.5 text-muted-foreground\",\n\t\t\t\t\t}),\n\t\t\t\t}));\n\t\t\t} catch (error) {\n\t\t\t\tconsole.error(\"Failed to load relation options:\", error);\n\t\t\t\ttoast.error(\"Failed to load options\");\n\t\t\t\treturn [];\n\t\t\t}\n\t\t},\n\t\t[client, targetCollection, filter, renderOption, collectionIconRef, locale],\n\t);\n\n\tconst queryClient = useQueryClient();\n\tconst queryOpts = React.useMemo(\n\t\t() =>\n\t\t\tcreateQuestpieQueryOptions(\n\t\t\t\t(client ?? {}) as any,\n\t\t\t\t{\n\t\t\t\t\tkeyPrefix: [\"questpie\", \"collections\"],\n\t\t\t\t} as any,\n\t\t\t),\n\t\t[client],\n\t);\n\n\t// Refetch for mutations (after create/update)\n\tconst refetch = React.useCallback(async () => {\n\t\tqueryClient.invalidateQueries({\n\t\t\tqueryKey: queryOpts.key([\"collections\", targetCollection, \"find\"]),\n\t\t});\n\t\tqueryClient.invalidateQueries({\n\t\t\tqueryKey: queryOpts.key([\n\t\t\t\t\"collections\",\n\t\t\t\ttargetCollection,\n\t\t\t\t\"findOne\",\n\t\t\t\t{ where: { id: value || \"\" } },\n\t\t\t]),\n\t\t});\n\t}, [queryClient, queryOpts, targetCollection, value]);\n\n\t// Fetch selected item details using the hook\n\tconst { data: selectedItem } = useCollectionItem(\n\t\ttargetCollection,\n\t\tvalue || \"\",\n\t\tundefined,\n\t\t{ enabled: !!value },\n\t);\n\n\tconst selectedOptions = React.useMemo(() => {\n\t\tif (!selectedItem) return [];\n\t\treturn [\n\t\t\t{\n\t\t\t\tvalue: selectedItem.id,\n\t\t\t\tlabel: renderValue\n\t\t\t\t\t? String(renderValue(selectedItem))\n\t\t\t\t\t: selectedItem._title || selectedItem.id || \"\",\n\t\t\t\ticon: resolveIconElement(collectionIconRef, {\n\t\t\t\t\tclassName: \"size-3.5 text-muted-foreground\",\n\t\t\t\t}),\n\t\t\t},\n\t\t];\n\t}, [selectedItem, renderValue, collectionIconRef]);\n\n\tconst handleOpenCreate = () => {\n\t\tsetEditingItemId(undefined);\n\t\tsetIsSheetOpen(true);\n\t};\n\n\tconst handleOpenEdit = () => {\n\t\tif (!value) return;\n\t\tsetEditingItemId(value);\n\t\tsetIsSheetOpen(true);\n\t};\n\n\tconst handleValueChange = (newValue: string | null) => {\n\t\tonChange(newValue);\n\t};\n\n\t// Handle save from ResourceSheet\n\tconst handleSheetSave = React.useCallback(\n\t\tasync (result: any) => {\n\t\t\t// Select newly created item (create mode = no editingItemId)\n\t\t\tif (!editingItemId && result?.id) {\n\t\t\t\tonChange(result.id);\n\t\t\t}\n\t\t\tawait refetch();\n\t\t},\n\t\t[editingItemId, onChange, refetch],\n\t);\n\n\treturn (\n\t\t<div className=\"space-y-2\">\n\t\t\t{label && (\n\t\t\t\t<div className=\"flex items-center gap-2\">\n\t\t\t\t\t<label\n\t\t\t\t\t\thtmlFor={name}\n\t\t\t\t\t\tclassName=\"text-sm font-medium flex items-center gap-1.5\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{resolveIconElement(collectionIconRef, {\n\t\t\t\t\t\t\tclassName: \"size-3.5 text-muted-foreground\",\n\t\t\t\t\t\t})}\n\t\t\t\t\t\t{resolvedLabel}\n\t\t\t\t\t\t{required && <span className=\"text-destructive\">*</span>}\n\t\t\t\t\t</label>\n\t\t\t\t\t{localized && <LocaleBadge locale={locale || \"i18n\"} />}\n\t\t\t\t</div>\n\t\t\t)}\n\n\t\t\t<div className=\"flex items-stretch gap-0\">\n\t\t\t\t{/* Searchable Select Dropdown - uses server-side search */}\n\t\t\t\t<div className=\"min-w-0 flex-1\">\n\t\t\t\t\t<SelectSingle\n\t\t\t\t\t\tid={name}\n\t\t\t\t\t\tvalue={value || null}\n\t\t\t\t\t\tonChange={handleValueChange}\n\t\t\t\t\t\toptions={selectedOptions}\n\t\t\t\t\t\tloadOptions={loadOptions}\n\t\t\t\t\t\tqueryKey={(search) =>\n\t\t\t\t\t\t\tqueryOpts.key([\n\t\t\t\t\t\t\t\t\"collections\",\n\t\t\t\t\t\t\t\ttargetCollection,\n\t\t\t\t\t\t\t\t\"find\",\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\tlimit: 50,\n\t\t\t\t\t\t\t\t\tlocale,\n\t\t\t\t\t\t\t\t\tsearch,\n\t\t\t\t\t\t\t\t\twhere: filter ? filter({}) : undefined,\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t])\n\t\t\t\t\t\t}\n\t\t\t\t\t\tprefetchOnMount\n\t\t\t\t\t\tplaceholder={resolvedPlaceholder || `${selectLabel}...`}\n\t\t\t\t\t\tdisabled={disabled || readOnly}\n\t\t\t\t\t\tclearable={!required}\n\t\t\t\t\t\temptyMessage={noResultsLabel}\n\t\t\t\t\t\tdrawerTitle={selectLabel}\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t!readOnly && \"rounded-r-none\",\n\t\t\t\t\t\t\terror && \"border-destructive\",\n\t\t\t\t\t\t)}\n\t\t\t\t\t\taria-invalid={!!error}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\n\t\t\t\t{/* Action Buttons */}\n\t\t\t\t{!readOnly && (\n\t\t\t\t\t<div className=\"flex\">\n\t\t\t\t\t\t{/* Edit button (only if value is set) */}\n\t\t\t\t\t\t{value && (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tvariant=\"outline\"\n\t\t\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\t\t\tonClick={handleOpenEdit}\n\t\t\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\t\t\ttitle={t(\"collection.edit\", { name: labelText })}\n\t\t\t\t\t\t\t\taria-label={t(\"collection.edit\", { name: labelText })}\n\t\t\t\t\t\t\t\tclassName=\"rounded-none border-l-0\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Icon icon=\"ph:pencil\" className=\"h-4 w-4\" />\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{/* Create button */}\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tvariant=\"outline\"\n\t\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\t\tonClick={handleOpenCreate}\n\t\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\t\ttitle={createLabel}\n\t\t\t\t\t\t\taria-label={createLabel}\n\t\t\t\t\t\t\tclassName=\"border-l-0 rounded-l-none\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Icon icon=\"ph:plus\" className=\"h-4 w-4\" />\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\n\t\t\t{/* Error message */}\n\t\t\t{error && <p className=\"text-sm text-destructive\">{error}</p>}\n\n\t\t\t{/* Side Sheet for Create/Edit */}\n\t\t\t<ResourceSheet\n\t\t\t\ttype=\"collection\"\n\t\t\t\tcollection={targetCollection}\n\t\t\t\titemId={editingItemId}\n\t\t\t\topen={isSheetOpen}\n\t\t\t\tonOpenChange={setIsSheetOpen}\n\t\t\t\tonSave={handleSheetSave}\n\t\t\t/>\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAyGA,SAAgB,eAAwC,EACvD,MACA,OACA,UACA,kBACA,OACA,QACA,UACA,UACA,UACA,aACA,OACA,WACA,QACA,cACA,eAC0B;CAC1B,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,cAAc,gBAAgB;CACpC,MAAM,gBAAgB,QAAQ,YAAY,MAAM,GAAG;CACnD,MAAM,sBAAsB,cACzB,YAAY,YAAY,GACxB;CACH,MAAM,YAAY,iBAAiB;CACnC,MAAM,cAAc,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAC;CAC7D,MAAM,iBAAiB,EAAE,sBAAsB,EAAE,MAAM,WAAW,CAAC;CACnE,MAAM,cAAc,EAAE,sBAAsB,EAAE,MAAM,WAAW,CAAC;CAChE,MAAM,CAAC,aAAa,kBAAkBA,QAAM,SAAS,MAAM;CAC3D,MAAM,CAAC,eAAe,oBAAoBA,QAAM,UAE7C;CAGH,MAAM,EAAE,MAAM,iBAAiB,gBAAgB;CAC/C,MAAM,SAAS,cAAc,aAAa;CAE1C,MAAM,qBADe,cAAc,cAAc,oBACA;CAGjD,MAAM,cAAcA,QAAM,YACzB,OAAO,WAAoD;AAC1D,MAAI,CAAC,OAAQ,QAAO,EAAE;AAEtB,MAAI;GACH,MAAMC,UAAe;IACpB,OAAO;IACP;IACA;AAGD,OAAI,OACH,SAAQ,SAAS;AAIlB,OAAI,OACH,SAAQ,QAAQ,OAAO,EAAE,CAAC;AAQ3B,YALiB,MAAO,OAAe,YACtC,kBACC,KAAK,QAAQ,GACQ,QAAQ,EAAE,EAErB,KAAK,UAAe;IAC/B,OAAO,KAAK;IACZ,OAAO,eACJ,OAAO,aAAa,KAAK,CAAC,GAC1B,KAAK,UAAU,KAAK,MAAM;IAC7B,MAAM,mBAAmB,mBAAmB,EAC3C,WAAW,kCACX,CAAC;IACF,EAAE;WACKC,SAAO;AACf,WAAQ,MAAM,oCAAoCA,QAAM;AACxD,SAAM,MAAM,yBAAyB;AACrC,UAAO,EAAE;;IAGX;EAAC;EAAQ;EAAkB;EAAQ;EAAc;EAAmB;EAAO,CAC3E;CAED,MAAM,cAAc,gBAAgB;CACpC,MAAM,YAAYF,QAAM,cAEtB,2BACE,UAAU,EAAE,EACb,EACC,WAAW,CAAC,YAAY,cAAc,EACtC,CACD,EACF,CAAC,OAAO,CACR;CAGD,MAAM,UAAUA,QAAM,YAAY,YAAY;AAC7C,cAAY,kBAAkB,EAC7B,UAAU,UAAU,IAAI;GAAC;GAAe;GAAkB;GAAO,CAAC,EAClE,CAAC;AACF,cAAY,kBAAkB,EAC7B,UAAU,UAAU,IAAI;GACvB;GACA;GACA;GACA,EAAE,OAAO,EAAE,IAAI,SAAS,IAAI,EAAE;GAC9B,CAAC,EACF,CAAC;IACA;EAAC;EAAa;EAAW;EAAkB;EAAM,CAAC;CAGrD,MAAM,EAAE,MAAM,iBAAiB,kBAC9B,kBACA,SAAS,IACT,QACA,EAAE,SAAS,CAAC,CAAC,OAAO,CACpB;CAED,MAAM,kBAAkBA,QAAM,cAAc;AAC3C,MAAI,CAAC,aAAc,QAAO,EAAE;AAC5B,SAAO,CACN;GACC,OAAO,aAAa;GACpB,OAAO,cACJ,OAAO,YAAY,aAAa,CAAC,GACjC,aAAa,UAAU,aAAa,MAAM;GAC7C,MAAM,mBAAmB,mBAAmB,EAC3C,WAAW,kCACX,CAAC;GACF,CACD;IACC;EAAC;EAAc;EAAa;EAAkB,CAAC;CAElD,MAAM,yBAAyB;AAC9B,mBAAiB,OAAU;AAC3B,iBAAe,KAAK;;CAGrB,MAAM,uBAAuB;AAC5B,MAAI,CAAC,MAAO;AACZ,mBAAiB,MAAM;AACvB,iBAAe,KAAK;;CAGrB,MAAM,qBAAqB,aAA4B;AACtD,WAAS,SAAS;;CAInB,MAAM,kBAAkBA,QAAM,YAC7B,OAAO,WAAgB;AAEtB,MAAI,CAAC,iBAAiB,QAAQ,GAC7B,UAAS,OAAO,GAAG;AAEpB,QAAM,SAAS;IAEhB;EAAC;EAAe;EAAU;EAAQ,CAClC;AAED,QACC,qBAAC;EAAI,WAAU;;GACb,SACA,qBAAC;IAAI,WAAU;eACd,qBAAC;KACA,SAAS;KACT,WAAU;;MAET,mBAAmB,mBAAmB,EACtC,WAAW,kCACX,CAAC;MACD;MACA,YAAY,oBAAC;OAAK,WAAU;iBAAmB;QAAQ;;MACjD,EACP,aAAa,oBAAC,eAAY,QAAQ,UAAU,SAAU;KAClD;GAGP,qBAAC;IAAI,WAAU;eAEd,oBAAC;KAAI,WAAU;eACd,oBAAC;MACA,IAAI;MACJ,OAAO,SAAS;MAChB,UAAU;MACV,SAAS;MACI;MACb,WAAW,WACV,UAAU,IAAI;OACb;OACA;OACA;OACA;QACC,OAAO;QACP;QACA;QACA,OAAO,SAAS,OAAO,EAAE,CAAC,GAAG;QAC7B;OACD,CAAC;MAEH;MACA,aAAa,uBAAuB,GAAG,YAAY;MACnD,UAAU,YAAY;MACtB,WAAW,CAAC;MACZ,cAAc;MACd,aAAa;MACb,WAAW,GACV,CAAC,YAAY,kBACb,SAAS,qBACT;MACD,gBAAc,CAAC,CAAC;OACf;MACG,EAGL,CAAC,YACD,qBAAC;KAAI,WAAU;gBAEb,SACA,oBAAC;MACA,MAAK;MACL,SAAQ;MACR,MAAK;MACL,SAAS;MACC;MACV,OAAO,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAC;MAChD,cAAY,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAC;MACrD,WAAU;gBAEV,oBAAC;OAAK,MAAK;OAAY,WAAU;QAAY;OACrC,EAIV,oBAAC;MACA,MAAK;MACL,SAAQ;MACR,MAAK;MACL,SAAS;MACC;MACV,OAAO;MACP,cAAY;MACZ,WAAU;gBAEV,oBAAC;OAAK,MAAK;OAAU,WAAU;QAAY;OACnC;MACJ;KAEF;GAGL,SAAS,oBAAC;IAAE,WAAU;cAA4B;KAAU;GAG7D,oBAAC;IACA,MAAK;IACL,YAAY;IACZ,QAAQ;IACR,MAAM;IACN,cAAc;IACd,QAAQ;KACP;;GACG"}

package/dist/client/components/fields/reverse-relation-field.d.mts

@@ -0,0 +1,2 @@
+import "./field-types.mjs";
+import "react/jsx-runtime";

package/dist/client/components/fields/rich-text-editor/bubble-menu.mjs

@@ -0,0 +1,56 @@
+import { useTranslation } from "../../../i18n/hooks.mjs";
+import { EDITOR_ICONS, ToolbarButton } from "./toolbar.mjs";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { BubbleMenu } from "@tiptap/react";
+
+//#region src/client/components/fields/rich-text-editor/bubble-menu.tsx
+/**
+* Bubble menu that appears on text selection
+*/
+function RichTextBubbleMenu({ editor, features, disabled, onLinkClick }) {
+	const { t } = useTranslation();
+	const isEditable = !disabled;
+	return /* @__PURE__ */ jsxs(BubbleMenu, {
+		editor,
+		className: "flex items-center gap-1 rounded-md border bg-background p-1 shadow-lg",
+		children: [
+			features.bold && /* @__PURE__ */ jsx(ToolbarButton, {
+				icon: EDITOR_ICONS.bold,
+				active: editor.isActive("bold"),
+				disabled: !isEditable,
+				title: t("editor.bold"),
+				shortcut: "⌘B",
+				onClick: () => editor.chain().focus().toggleBold().run()
+			}),
+			features.italic && /* @__PURE__ */ jsx(ToolbarButton, {
+				icon: EDITOR_ICONS.italic,
+				active: editor.isActive("italic"),
+				disabled: !isEditable,
+				title: t("editor.italic"),
+				shortcut: "⌘I",
+				onClick: () => editor.chain().focus().toggleItalic().run()
+			}),
+			features.underline && /* @__PURE__ */ jsx(ToolbarButton, {
+				icon: EDITOR_ICONS.underline,
+				active: editor.isActive("underline"),
+				disabled: !isEditable,
+				title: t("editor.underline"),
+				shortcut: "⌘U",
+				onClick: () => editor.chain().focus().toggleUnderline().run()
+			}),
+			features.link && /* @__PURE__ */ jsx(ToolbarButton, {
+				icon: EDITOR_ICONS.link,
+				active: editor.isActive("link"),
+				disabled: !isEditable,
+				title: t("editor.link"),
+				shortcut: "⌘K",
+				onClick: onLinkClick
+			})
+		]
+	});
+}
+
+//#endregion
+export { RichTextBubbleMenu };
+//# sourceMappingURL=bubble-menu.mjs.map