@questpie/admin 3.5.1 → 3.5.3

package/dist/client/views/collection/form-view.mjs

@@ -17,7 +17,9 @@ import { DateTimeInput } from "../../components/primitives/date-input.mjs";
 import { getDefaultFormActions } from "../../builder/types/action-registry.mjs";
 import { ConfirmationDialog } from "../../components/actions/confirmation-dialog.mjs";
 import { ActionButton } from "../../components/actions/action-button.mjs";
+import { adminCollectionKey } from "../../hooks/query-access.mjs";
 import { useCollectionFields } from "../../hooks/use-collection-fields.mjs";
+import { ReactiveFieldStatesProvider, useReactiveFields } from "../../hooks/use-reactive-fields.mjs";
 import { AutoFormFields } from "./auto-form-fields.mjs";
 import { ActionDialog } from "../../components/actions/action-dialog.mjs";
 import { EmptyState } from "../../components/ui/empty-state.mjs";
@@ -29,7 +31,6 @@ import { usePreferServerValidation } from "../../hooks/use-server-validation.mjs
 import { useSidebarSearchParam } from "../../hooks/use-sidebar-search-param.mjs";
 import { useCollectionCreate, useCollectionDelete, useCollectionItem, useCollectionRestore, useCollectionRevertVersion, useCollectionUpdate, useCollectionVersions } from "../../hooks/use-collection.mjs";
 import { getLockUser, useLock } from "../../hooks/use-locks.mjs";
-import { useReactiveFields } from "../../hooks/use-reactive-fields.mjs";
 import { useServerActions } from "../../hooks/use-server-actions.mjs";
 import { useTransitionStage } from "../../hooks/use-transition-stage.mjs";
 import { applyPatchBatchImmutable, cloneSnapshot } from "../../preview/patch.mjs";
@@ -136,22 +137,25 @@ function normalizeInlineEditValue(message) {
 * Component that manages reactive field states.
 * Must be rendered inside FormProvider to access form context.
 */
-function ReactiveFieldsManager({ collection, mode = "collection", reactiveConfigs, enabled }) {
-	useReactiveFields({
+function ReactiveFieldsManager({ collection, mode = "collection", reactiveConfigs, enabled, children }) {
+	const { fieldStates } = useReactiveFields({
 		collection,
 		mode,
 		reactiveConfigs,
 		enabled: enabled && Object.keys(reactiveConfigs).length > 0,
 		debounce: 300
 	});
-	return null;
+	return /* @__PURE__ */ jsx(ReactiveFieldStatesProvider, {
+		fieldStates,
+		children
+	});
 }
 const FormFieldsContent = React.memo(function FormFieldsContent$1({ collection, config, registry, allCollectionsConfig, resolvedFields, schema }) {
 	return /* @__PURE__ */ jsx(RenderProfiler, {
 		id: `form.fields.${collection}`,
 		minDurationMs: 10,
 		children: /* @__PURE__ */ jsx(AutoFormFields, {
-			collection,
+			collection: adminCollectionKey(collection),
 			config,
 			registry,
 			allCollectionsConfig,
@@ -394,6 +398,7 @@ function FormView({ collection, id, config, viewConfig, navigate, basePath = "/a
 	const { t } = useTranslation();
 	const resolveText = useResolveText();
 	const isEditMode = !!id;
+	const collectionKey = adminCollectionKey(collection);
 	const { fields: resolvedFields, schema, isLoading: isFieldsLoading } = useCollectionFields(collection, { fallbackFields: config?.fields });
 	const { data: adminConfig } = useAdminConfig();
 	const resolvedFormConfig = React.useMemo(() => viewConfig ?? (config?.form)?.["~config"] ?? config?.form ?? schema?.admin?.form, [
@@ -442,7 +447,7 @@ function FormView({ collection, id, config, viewConfig, navigate, basePath = "/a
 		fields: resolvedFields,
 		schema
 	}), [resolvedFields, schema]);
-	const { data: item, isLoading, error: itemError } = useCollectionItem(collection, id ?? "", hasManyToManyRelations(withRelations) ? {
+	const { data: item, isLoading, error: itemError } = useCollectionItem(collectionKey, id ?? "", hasManyToManyRelations(withRelations) ? {
 		with: withRelations,
 		localeFallback: false
 	} : { localeFallback: false }, { enabled: isEditMode });
@@ -462,13 +467,13 @@ function FormView({ collection, id, config, viewConfig, navigate, basePath = "/a
 		}
 		return result;
 	}, [item, withRelations]);
-	const createMutation = useCollectionCreate(collection);
-	const updateMutation = useCollectionUpdate(collection);
-	const deleteMutation = useCollectionDelete(collection);
-	const restoreMutation = useCollectionRestore(collection);
-	const revertVersionMutation = useCollectionRevertVersion(collection);
+	const createMutation = useCollectionCreate(collectionKey);
+	const updateMutation = useCollectionUpdate(collectionKey);
+	const deleteMutation = useCollectionDelete(collectionKey);
+	const restoreMutation = useCollectionRestore(collectionKey);
+	const revertVersionMutation = useCollectionRevertVersion(collectionKey);
 	const [pendingRevertVersion, setPendingRevertVersion] = React.useState(null);
-	const { data: versionsData, isLoading: versionsLoading } = useCollectionVersions(collection, id ?? "", { limit: 50 }, { enabled: isEditMode && !!id && isHistoryOpen && !!schema?.options?.versioning });
+	const { data: versionsData, isLoading: versionsLoading } = useCollectionVersions(collectionKey, id ?? "", { limit: 50 }, { enabled: isEditMode && !!id && isHistoryOpen && !!schema?.options?.versioning });
 	const workflowConfig = schema?.options?.workflow;
 	const workflowEnabled = !!workflowConfig?.enabled;
 	/**
@@ -476,7 +481,7 @@ function FormView({ collection, id, config, viewConfig, navigate, basePath = "/a
 	* `versionStage`. Runs whenever workflow is enabled and we have an item id.
 	* The full 50-version query is still lazy-loaded behind the History sidebar.
 	*/
-	const { data: latestVersionData } = useCollectionVersions(collection, id ?? "", { limit: 1 }, { enabled: workflowEnabled && isEditMode && !!id });
+	const { data: latestVersionData } = useCollectionVersions(collectionKey, id ?? "", { limit: 1 }, { enabled: workflowEnabled && isEditMode && !!id });
 	const currentStage = latestVersionData?.[0]?.versionStage ?? workflowConfig?.initialStage ?? null;
 	const currentStageConfig = React.useMemo(() => workflowConfig?.stages?.find((s) => s.name === currentStage) ?? null, [workflowConfig?.stages, currentStage]);
 	const currentStageLabel = currentStageConfig?.label ?? currentStage ?? "";
@@ -1238,196 +1243,196 @@ function FormView({ collection, id, config, viewConfig, navigate, basePath = "/a
 					/* @__PURE__ */ jsx(ReactiveFieldsManager, {
 						collection,
 						reactiveConfigs,
-						enabled: !isBlocked && !isMutationPending
-					}),
-					/* @__PURE__ */ jsx(RenderProfiler, {
-						id: `form.shell.${collection}`,
-						minDurationMs: 12,
-						children: /* @__PURE__ */ jsxs("form", {
-							ref: formElementRef,
-							onSubmit: (e) => {
-								e.stopPropagation();
-								if (isBlocked) {
-									e.preventDefault();
-									toast.error(t("lock.cannotSave"));
-									return;
-								}
-								form.handleSubmit(onSubmit, (errors) => {
-									console.warn("[FormView] Validation errors:", errors);
-									toast.error(t("toast.validationFailed"), { description: t("toast.validationDescription") });
-								})(e);
-							},
-							className: "qa-form-view__form space-y-4",
-							children: [
-								/* @__PURE__ */ jsx(AdminViewHeader, {
-									className: "qa-form-view__header",
-									title,
-									titleAccessory: /* @__PURE__ */ jsxs(Fragment, { children: [
-										localeOptions.length > 0 && /* @__PURE__ */ jsx(LocaleSwitcher, {
-											locales: localeOptions,
-											value: contentLocale,
-											onChange: setContentLocale
-										}),
-										/* @__PURE__ */ jsx(AutosaveIndicator, {
-											control: form.control,
-											enabled: autoSaveConfig.enabled,
-											indicator: autoSaveConfig.indicator,
-											isEditMode,
-											isSaving,
-											lastSaved,
-											formatTimeAgo,
-											t
-										}),
-										workflowEnabled && currentStage && /* @__PURE__ */ jsxs(Badge, {
-											variant: "outline",
-											className: "gap-1.5",
-											children: [/* @__PURE__ */ jsx(Icon, {
-												icon: "ph:git-branch",
-												className: "size-3"
-											}), currentStageLabel]
-										})
-									] }),
-									meta: showMeta && item ? /* @__PURE__ */ jsxs(Fragment, { children: [
-										/* @__PURE__ */ jsxs("span", {
-											className: "opacity-60",
-											children: [t("form.id"), ":"]
-										}),
-										/* @__PURE__ */ jsx("button", {
-											type: "button",
-											className: "hover:text-foreground cursor-pointer transition-colors",
-											onClick: () => {
-												navigator.clipboard.writeText(String(item.id)).then(() => toast.success(t("toast.idCopied")), () => toast.error(t("toast.copyFailed")));
-											},
-											title: t("common.copy"),
-											children: item.id
-										}),
-										item.createdAt && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
-											className: "opacity-40",
-											children: "·"
-										}), /* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsxs("span", {
-											className: "opacity-60",
-											children: [t("form.created"), " "]
-										}), formatDate(item.createdAt)] })] }),
-										item.updatedAt && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
-											className: "opacity-40",
-											children: "·"
-										}), /* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsxs("span", {
-											className: "opacity-60",
-											children: [t("form.updated"), " "]
-										}), formatDate(item.updatedAt)] })] })
-									] }) : void 0,
-									actions: /* @__PURE__ */ jsxs(Fragment, { children: [
-										headerActions,
-										canUseLivePreview && /* @__PURE__ */ jsxs(Button, {
-											type: "button",
-											variant: "outline",
-											size: "icon-sm",
-											onClick: () => setIsLivePreviewOpen(true),
-											title: t("preview.livePreview"),
-											children: [/* @__PURE__ */ jsx(Icon, {
-												icon: "ph:eye",
-												className: "size-4"
-											}), /* @__PURE__ */ jsx("span", {
-												className: "sr-only",
-												children: t("preview.livePreview")
-											})]
-										}),
-										isEditMode && id && schema?.options?.versioning && /* @__PURE__ */ jsxs(Button, {
-											type: "button",
-											variant: "outline",
-											size: "icon-sm",
-											onClick: () => setIsHistoryOpen(true),
-											title: t("history.title"),
-											children: [/* @__PURE__ */ jsx(Icon, {
-												icon: "ph:clock-counter-clockwise",
-												className: "size-4"
-											}), /* @__PURE__ */ jsx("span", {
-												className: "sr-only",
-												children: t("history.title")
-											})]
-										}),
-										workflowEnabled && isEditMode && id && allowedTransitions.length > 0 && /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsxs(DropdownMenuTrigger, {
-											render: workflowTransitionTriggerRender,
-											children: [/* @__PURE__ */ jsx(Icon, {
-												icon: "ph:arrows-left-right",
-												className: "size-4"
-											}), t("workflow.transition")]
-										}), /* @__PURE__ */ jsx(DropdownMenuContent, {
-											align: "end",
-											children: allowedTransitions.map((stage) => /* @__PURE__ */ jsxs(DropdownMenuItem, {
-												onClick: () => setTransitionTarget({
-													name: stage.name,
-													label: stage.label
-												}),
+						enabled: !isBlocked && !isMutationPending,
+						children: /* @__PURE__ */ jsx(RenderProfiler, {
+							id: `form.shell.${collection}`,
+							minDurationMs: 12,
+							children: /* @__PURE__ */ jsxs("form", {
+								ref: formElementRef,
+								onSubmit: (e) => {
+									e.stopPropagation();
+									if (isBlocked) {
+										e.preventDefault();
+										toast.error(t("lock.cannotSave"));
+										return;
+									}
+									form.handleSubmit(onSubmit, (errors) => {
+										console.warn("[FormView] Validation errors:", errors);
+										toast.error(t("toast.validationFailed"), { description: t("toast.validationDescription") });
+									})(e);
+								},
+								className: "qa-form-view__form space-y-4",
+								children: [
+									/* @__PURE__ */ jsx(AdminViewHeader, {
+										className: "qa-form-view__header",
+										title,
+										titleAccessory: /* @__PURE__ */ jsxs(Fragment, { children: [
+											localeOptions.length > 0 && /* @__PURE__ */ jsx(LocaleSwitcher, {
+												locales: localeOptions,
+												value: contentLocale,
+												onChange: setContentLocale
+											}),
+											/* @__PURE__ */ jsx(AutosaveIndicator, {
+												control: form.control,
+												enabled: autoSaveConfig.enabled,
+												indicator: autoSaveConfig.indicator,
+												isEditMode,
+												isSaving,
+												lastSaved,
+												formatTimeAgo,
+												t
+											}),
+											workflowEnabled && currentStage && /* @__PURE__ */ jsxs(Badge, {
+												variant: "outline",
+												className: "gap-1.5",
 												children: [/* @__PURE__ */ jsx(Icon, {
-													icon: "ph:arrow-right",
-													className: "mr-2 size-4"
-												}), stage.label || stage.name]
-											}, stage.name))
-										})] }),
-										visiblePrimaryActions.map((action) => /* @__PURE__ */ jsx(ActionButton, {
-											action,
-											collection,
-											helpers: actionHelpers,
-											size: "sm",
-											onOpenDialog: (a) => setDialogAction(a)
-										}, action.id)),
-										/* @__PURE__ */ jsx(SaveSubmitButton, {
-											control: form.control,
-											isMutationPending,
-											t
-										}),
-										visibleSecondaryActions.length > 0 && /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsxs(DropdownMenuTrigger, {
-											render: secondaryActionsTriggerRender,
-											children: [/* @__PURE__ */ jsx(Icon, {
-												icon: "ph:dots-three-vertical",
-												className: "size-4"
-											}), /* @__PURE__ */ jsx("span", {
-												className: "sr-only",
-												children: t("common.moreActions")
-											})]
-										}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
-											align: "end",
-											children: [
-												regularSecondary.map((action) => {
-													return /* @__PURE__ */ jsxs(DropdownMenuItem, {
-														onClick: () => handleActionClick(action),
-														disabled: actionLoading,
-														children: [resolveIconElement(action.icon, { className: "mr-2 size-4" }), resolveText(action.label)]
-													}, action.id);
-												}),
-												regularSecondary.length > 0 && destructiveSecondary.length > 0 && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
-												destructiveSecondary.map((action) => {
-													return /* @__PURE__ */ jsxs(DropdownMenuItem, {
-														variant: "destructive",
-														onClick: () => handleActionClick(action),
-														disabled: actionLoading,
-														children: [resolveIconElement(action.icon, { className: "mr-2 size-4" }), resolveText(action.label)]
-													}, action.id);
-												})
-											]
-										})] })
-									] })
-								}),
-								item?.deletedAt && /* @__PURE__ */ jsxs("div", {
-									className: "qa-form-view__deleted-banner border-destructive/30 bg-destructive/5 text-destructive flex items-center gap-2 border px-4 py-3 text-sm",
-									children: [/* @__PURE__ */ jsx(Icon, {
-										icon: "ph:trash",
-										className: "size-4 shrink-0"
-									}), /* @__PURE__ */ jsx("span", { children: t("form.deletedBanner", {
-										date: formatDate(item.deletedAt),
-										defaultValue: `This record was deleted on ${formatDate(item.deletedAt)}. Use the Restore action to make it active again.`
-									}) })]
-								}),
-								/* @__PURE__ */ jsx(FormFieldsContent, {
-									collection,
-									config: formConfigBridge,
-									registry,
-									allCollectionsConfig,
-									resolvedFields,
-									schema
-								})
-							]
+													icon: "ph:git-branch",
+													className: "size-3"
+												}), currentStageLabel]
+											})
+										] }),
+										meta: showMeta && item ? /* @__PURE__ */ jsxs(Fragment, { children: [
+											/* @__PURE__ */ jsxs("span", {
+												className: "opacity-60",
+												children: [t("form.id"), ":"]
+											}),
+											/* @__PURE__ */ jsx("button", {
+												type: "button",
+												className: "hover:text-foreground cursor-pointer transition-colors",
+												onClick: () => {
+													navigator.clipboard.writeText(String(item.id)).then(() => toast.success(t("toast.idCopied")), () => toast.error(t("toast.copyFailed")));
+												},
+												title: t("common.copy"),
+												children: item.id
+											}),
+											item.createdAt && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+												className: "opacity-40",
+												children: "·"
+											}), /* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsxs("span", {
+												className: "opacity-60",
+												children: [t("form.created"), " "]
+											}), formatDate(item.createdAt)] })] }),
+											item.updatedAt && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+												className: "opacity-40",
+												children: "·"
+											}), /* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsxs("span", {
+												className: "opacity-60",
+												children: [t("form.updated"), " "]
+											}), formatDate(item.updatedAt)] })] })
+										] }) : void 0,
+										actions: /* @__PURE__ */ jsxs(Fragment, { children: [
+											headerActions,
+											canUseLivePreview && /* @__PURE__ */ jsxs(Button, {
+												type: "button",
+												variant: "outline",
+												size: "icon-sm",
+												onClick: () => setIsLivePreviewOpen(true),
+												title: t("preview.livePreview"),
+												children: [/* @__PURE__ */ jsx(Icon, {
+													icon: "ph:eye",
+													className: "size-4"
+												}), /* @__PURE__ */ jsx("span", {
+													className: "sr-only",
+													children: t("preview.livePreview")
+												})]
+											}),
+											isEditMode && id && schema?.options?.versioning && /* @__PURE__ */ jsxs(Button, {
+												type: "button",
+												variant: "outline",
+												size: "icon-sm",
+												onClick: () => setIsHistoryOpen(true),
+												title: t("history.title"),
+												children: [/* @__PURE__ */ jsx(Icon, {
+													icon: "ph:clock-counter-clockwise",
+													className: "size-4"
+												}), /* @__PURE__ */ jsx("span", {
+													className: "sr-only",
+													children: t("history.title")
+												})]
+											}),
+											workflowEnabled && isEditMode && id && allowedTransitions.length > 0 && /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsxs(DropdownMenuTrigger, {
+												render: workflowTransitionTriggerRender,
+												children: [/* @__PURE__ */ jsx(Icon, {
+													icon: "ph:arrows-left-right",
+													className: "size-4"
+												}), t("workflow.transition")]
+											}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+												align: "end",
+												children: allowedTransitions.map((stage) => /* @__PURE__ */ jsxs(DropdownMenuItem, {
+													onClick: () => setTransitionTarget({
+														name: stage.name,
+														label: stage.label
+													}),
+													children: [/* @__PURE__ */ jsx(Icon, {
+														icon: "ph:arrow-right",
+														className: "mr-2 size-4"
+													}), stage.label || stage.name]
+												}, stage.name))
+											})] }),
+											visiblePrimaryActions.map((action) => /* @__PURE__ */ jsx(ActionButton, {
+												action,
+												collection,
+												helpers: actionHelpers,
+												size: "sm",
+												onOpenDialog: (a) => setDialogAction(a)
+											}, action.id)),
+											/* @__PURE__ */ jsx(SaveSubmitButton, {
+												control: form.control,
+												isMutationPending,
+												t
+											}),
+											visibleSecondaryActions.length > 0 && /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsxs(DropdownMenuTrigger, {
+												render: secondaryActionsTriggerRender,
+												children: [/* @__PURE__ */ jsx(Icon, {
+													icon: "ph:dots-three-vertical",
+													className: "size-4"
+												}), /* @__PURE__ */ jsx("span", {
+													className: "sr-only",
+													children: t("common.moreActions")
+												})]
+											}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+												align: "end",
+												children: [
+													regularSecondary.map((action) => {
+														return /* @__PURE__ */ jsxs(DropdownMenuItem, {
+															onClick: () => handleActionClick(action),
+															disabled: actionLoading,
+															children: [resolveIconElement(action.icon, { className: "mr-2 size-4" }), resolveText(action.label)]
+														}, action.id);
+													}),
+													regularSecondary.length > 0 && destructiveSecondary.length > 0 && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+													destructiveSecondary.map((action) => {
+														return /* @__PURE__ */ jsxs(DropdownMenuItem, {
+															variant: "destructive",
+															onClick: () => handleActionClick(action),
+															disabled: actionLoading,
+															children: [resolveIconElement(action.icon, { className: "mr-2 size-4" }), resolveText(action.label)]
+														}, action.id);
+													})
+												]
+											})] })
+										] })
+									}),
+									item?.deletedAt && /* @__PURE__ */ jsxs("div", {
+										className: "qa-form-view__deleted-banner border-destructive/30 bg-destructive/5 text-destructive flex items-center gap-2 border px-4 py-3 text-sm",
+										children: [/* @__PURE__ */ jsx(Icon, {
+											icon: "ph:trash",
+											className: "size-4 shrink-0"
+										}), /* @__PURE__ */ jsx("span", { children: t("form.deletedBanner", {
+											date: formatDate(item.deletedAt),
+											defaultValue: `This record was deleted on ${formatDate(item.deletedAt)}. Use the Restore action to make it active again.`
+										}) })]
+									}),
+									/* @__PURE__ */ jsx(FormFieldsContent, {
+										collection,
+										config: formConfigBridge,
+										registry,
+										allCollectionsConfig,
+										resolvedFields,
+										schema
+									})
+								]
+							})
 						})
 					})
 				]