@questpie/admin 3.0.9 → 3.1.0

package/dist/augmentation.d.mts

@@ -205,6 +205,45 @@ interface RelationFieldAdminMeta extends BaseAdminMeta {
   allowEdit?: boolean;
   preload?: boolean;
   maxItems?: number;
+  /**
+   * Restrict which related records can be picked. Static `Record` is used
+   * as-is; a function or `{ handler, deps?, debounce? }` config stays on
+   * the server (introspection emits a `ReactivePropPlaceholder`) and is
+   * resolved on demand via `/admin/reactive` against current form data.
+   *
+   * @example Static
+   * ```ts
+   * f.relation("users").admin({ filter: { role: "admin" } })
+   * ```
+   *
+   * @example Reactive — depends on form state
+   * ```ts
+   * f.relation("users").admin({
+   *   filter: ({ data }) => ({ role: "admin", team: data.team }),
+   * })
+   * ```
+   */
+  filter?: Record<string, unknown> | ((ctx: {
+    data: Record<string, unknown>;
+    sibling: Record<string, unknown>;
+    prev: {
+      data: Record<string, unknown>;
+      sibling: Record<string, unknown>;
+    };
+    ctx: unknown;
+  }) => Record<string, unknown> | Promise<Record<string, unknown>>) | {
+    handler: (ctx: {
+      data: Record<string, unknown>;
+      sibling: Record<string, unknown>;
+      prev: {
+        data: Record<string, unknown>;
+        sibling: Record<string, unknown>;
+      };
+      ctx: unknown;
+    }) => Record<string, unknown> | Promise<Record<string, unknown>>;
+    deps?: string[];
+    debounce?: number;
+  };
   /**
    * List table cell rendering for relation values.
    * - "chip": default text chip

package/dist/client/builder/types/field-types.d.mts

@@ -501,22 +501,18 @@ interface FieldReactiveConfig<TData = any> {
   compute?: FieldReactiveHandlerConfig<TData, any> | SerializedReactiveDepsConfig;
 }
 /**
- * Field layout item with optional reactive config
+ * Field layout item — single-field reference variant.
+ *
+ * On the wire this matches the server's `FormFieldLayoutItem` after
+ * introspection has serialized any function-valued `props.<key>` to a
+ * `ReactivePropPlaceholder`. Kept as `Record<string, unknown>` here because
+ * the client only ever consumes the post-serialization shape.
  */
-interface FieldLayoutItemWithReactive<TData = any> extends FieldReactiveConfig<TData> {
+interface FieldLayoutItemRef<TData = any> extends FieldReactiveConfig<TData> {
   field: string;
   className?: string;
-  /**
-   * Extra props forwarded to the field component. Use for component-specific
-   * configuration that doesn't have a dedicated layout key (e.g. relation
-   * field's `filter`, custom render functions).
-   *
-   * @example
-   * ```ts
-   * { field: f.counselorId, props: { filter: () => ({ role: "admin" }) } }
-   * ```
-   */
-  props?: Record<string, any>;
+  /** Forwarded to the field component. See server `FormFieldLayoutItem.props`. */
+  props?: Record<string, unknown>;
 }
 /**
  * Field layout item - can be a simple field name, field with config, section, or tabs
@@ -533,7 +529,7 @@ interface FieldLayoutItemWithReactive<TData = any> extends FieldReactiveConfig<T
  * ]
  * ```
  */
-type FieldLayoutItem<TData = any> = string | FieldLayoutItemWithReactive<TData> | SectionLayout<TData> | TabsLayout<TData>;
+type FieldLayoutItem<TData = any> = string | FieldLayoutItemRef<TData> | SectionLayout<TData> | TabsLayout<TData>;
 /**
  * Form sidebar configuration
  * Uses `fields` array (same structure as main form)

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

@@ -89,7 +89,7 @@ function RelationPicker({ name, value, onChange, targetCollection, label, filter
 		try {
 			const options = { limit: 50 };
 			if (search) options.search = search;
-			if (filter) options.where = filter({});
+			if (filter) options.where = filter;
 			const response_0 = await client.collections[targetCollection].find(options);
 			let docs;
 			if (response_0) if (response_0.docs) docs = response_0.docs;
@@ -244,7 +244,7 @@ function RelationPicker({ name, value, onChange, targetCollection, label, filter
 							{
 								limit: 50,
 								search: search_0,
-								where: filter ? filter({}) : void 0,
+								where: filter ?? void 0,
 								selectedIds
 							}
 						]),

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

@@ -49,7 +49,7 @@ function RelationSelect({ name, value, onChange, targetCollection, label, filter
 				locale
 			};
 			if (search) options.search = search;
-			if (filter) options.where = filter({});
+			if (filter) options.where = filter;
 			const response = await client.collections[targetCollection].find(options);
 			let docs;
 			if (response) if (response.docs) docs = response.docs;
@@ -168,7 +168,7 @@ function RelationSelect({ name, value, onChange, targetCollection, label, filter
 							limit: 50,
 							locale,
 							search: search_0,
-							where: filter ? filter({}) : void 0
+							where: filter ?? void 0
 						}
 					]),
 					prefetchOnMount: true,
@@ -222,7 +222,7 @@ function RelationSelect({ name, value, onChange, targetCollection, label, filter
 						limit: 50,
 						locale,
 						search: search_1,
-						where: filter ? filter({}) : void 0
+						where: filter ?? void 0
 					}
 				]),
 				prefetchOnMount: true,

package/dist/client/hooks/use-reactive-prop.mjs

@@ -0,0 +1,308 @@
+import { useAdminStore } from "../runtime/provider.mjs";
+import { c } from "react/compiler-runtime";
+import * as React from "react";
+import { useQuery } from "@tanstack/react-query";
+import { useFormContext, useWatch } from "react-hook-form";
+import { isReactivePropPlaceholder } from "questpie/client";
+
+//#region src/client/hooks/use-reactive-prop.ts
+/**
+* useReactiveProps — resolve `extraProps` placeholders against the live form.
+*
+* Field components (relation-select, relation-picker, …) accept user-supplied
+* config via the layout escape hatch:
+*
+*     v.collectionForm({
+*       fields: [
+*         { field: f.author, props: { filter: ({ data }) => ({ team: data.team }) } },
+*       ],
+*     })
+*
+* Functions never cross the wire — introspection serializes them to a
+* `ReactivePropPlaceholder` carrying just the dependency list. This hook is
+* called by `FieldRenderer` *before* it spreads `extraProps` into the field
+* component's props:
+*
+*  - Static JSON / `undefined` → returned synchronously, **no network**.
+*  - Placeholder shape `{ "~reactive": "prop", watch, debounce? }` → resolved
+*    by calling `/admin/reactive` (`type: "prop"`) with current `formData`.
+*
+* All placeholders inside a single `extraProps` record share **one** TanStack
+* Query — both for cache locality and to collapse N round-trips into one.
+* The query refetches only when any of the union of `watch` deps changes,
+* debounced by `max(placeholder.debounce)` (or the caller-supplied override,
+* default 100ms).
+*/
+/**
+* Stable hash of the watched dep values. Replacer keeps `undefined` slots so
+* `[1, undefined, 2]` ≠ `[1, 2]`.
+*/
+function hashDeps(values) {
+	return JSON.stringify(values, (_, v) => v === void 0 ? "__undef__" : v);
+}
+function useDebounced(value, delay) {
+	const $ = c(4);
+	const [debounced, setDebounced] = React.useState(value);
+	let t0;
+	let t1;
+	if ($[0] !== delay || $[1] !== value) {
+		t0 = () => {
+			if (delay <= 0) {
+				setDebounced(value);
+				return;
+			}
+			const timer = setTimeout(() => setDebounced(value), delay);
+			return () => clearTimeout(timer);
+		};
+		t1 = [value, delay];
+		$[0] = delay;
+		$[1] = value;
+		$[2] = t0;
+		$[3] = t1;
+	} else {
+		t0 = $[2];
+		t1 = $[3];
+	}
+	React.useEffect(t0, t1);
+	return debounced;
+}
+const EMPTY_PROPS = Object.freeze({});
+function useReactiveProps(t0) {
+	const $ = c(52);
+	const { entity, entityType: t1, field, props, enabled: t2, debounce: debounceOverride } = t0;
+	const entityType = t1 === void 0 ? "collection" : t1;
+	const enabled = t2 === void 0 ? true : t2;
+	let dbMax;
+	let dynamicOut;
+	let staticOut;
+	let watchSet;
+	if ($[0] !== props) {
+		staticOut = {};
+		dynamicOut = [];
+		watchSet = /* @__PURE__ */ new Set();
+		dbMax = 0;
+		if (props) for (const [key, value] of Object.entries(props)) if (isReactivePropPlaceholder(value)) {
+			dynamicOut.push({
+				key,
+				placeholder: value
+			});
+			for (const dep of value.watch) watchSet.add(dep);
+			if (typeof value.debounce === "number" && value.debounce > dbMax) dbMax = value.debounce;
+		} else staticOut[key] = value;
+		$[0] = props;
+		$[1] = dbMax;
+		$[2] = dynamicOut;
+		$[3] = staticOut;
+		$[4] = watchSet;
+	} else {
+		dbMax = $[1];
+		dynamicOut = $[2];
+		staticOut = $[3];
+		watchSet = $[4];
+	}
+	const t3 = dynamicOut.length === 0 ? props ?? EMPTY_PROPS : staticOut;
+	let t4;
+	if ($[5] !== watchSet) {
+		t4 = [...watchSet];
+		$[5] = watchSet;
+		$[6] = t4;
+	} else t4 = $[6];
+	let t5;
+	if ($[7] !== dbMax || $[8] !== dynamicOut || $[9] !== t3 || $[10] !== t4) {
+		t5 = {
+			staticProps: t3,
+			placeholders: dynamicOut,
+			watchUnion: t4,
+			debounceMax: dbMax
+		};
+		$[7] = dbMax;
+		$[8] = dynamicOut;
+		$[9] = t3;
+		$[10] = t4;
+		$[11] = t5;
+	} else t5 = $[11];
+	const { staticProps, placeholders, watchUnion, debounceMax } = t5;
+	const debounce = debounceOverride ?? (debounceMax > 0 ? debounceMax : 100);
+	const formContext = useFormContext();
+	const t6 = formContext?.control;
+	const t7 = watchUnion;
+	const t8 = placeholders.length === 0 || !formContext || watchUnion.length === 0;
+	let t9;
+	if ($[12] !== t6 || $[13] !== t7 || $[14] !== t8) {
+		t9 = {
+			control: t6,
+			name: t7,
+			disabled: t8
+		};
+		$[12] = t6;
+		$[13] = t7;
+		$[14] = t8;
+		$[15] = t9;
+	} else t9 = $[15];
+	const watchedRaw = useWatch(t9);
+	let t10;
+	bb0: {
+		if (placeholders.length === 0) {
+			let t11$2;
+			if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+				t11$2 = [];
+				$[16] = t11$2;
+			} else t11$2 = $[16];
+			t10 = t11$2;
+			break bb0;
+		}
+		if (watchUnion.length === 0) {
+			let t11$2;
+			if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+				t11$2 = [];
+				$[17] = t11$2;
+			} else t11$2 = $[17];
+			t10 = t11$2;
+			break bb0;
+		}
+		let t11$1;
+		if ($[18] !== watchedRaw) {
+			t11$1 = Array.isArray(watchedRaw) ? watchedRaw : [watchedRaw];
+			$[18] = watchedRaw;
+			$[19] = t11$1;
+		} else t11$1 = $[19];
+		t10 = t11$1;
+	}
+	const debouncedDeps = useDebounced(t10, debounce);
+	let t11;
+	if ($[20] !== debouncedDeps) {
+		t11 = hashDeps(debouncedDeps);
+		$[20] = debouncedDeps;
+		$[21] = t11;
+	} else t11 = $[21];
+	const depHash = t11;
+	let t12;
+	if ($[22] !== placeholders) {
+		t12 = placeholders.map(_temp).sort();
+		$[22] = placeholders;
+		$[23] = t12;
+	} else t12 = $[23];
+	const placeholderKeys = t12;
+	const client = useAdminStore(_temp2);
+	const queryEnabled = enabled && placeholders.length > 0 && !!client;
+	let t13;
+	if ($[24] !== depHash || $[25] !== entity || $[26] !== entityType || $[27] !== field || $[28] !== placeholderKeys) {
+		t13 = [
+			"questpie",
+			"reactive-props",
+			entityType,
+			entity,
+			field,
+			placeholderKeys,
+			depHash
+		];
+		$[24] = depHash;
+		$[25] = entity;
+		$[26] = entityType;
+		$[27] = field;
+		$[28] = placeholderKeys;
+		$[29] = t13;
+	} else t13 = $[29];
+	let t14;
+	if ($[30] !== client || $[31] !== entity || $[32] !== entityType || $[33] !== field || $[34] !== formContext || $[35] !== placeholders) {
+		t14 = async () => {
+			if (!client || placeholders.length === 0) return {};
+			const formData = formContext?.getValues?.() ?? {};
+			const response = await client.routes.batchReactive({
+				collection: entity,
+				type: entityType,
+				formData,
+				requests: placeholders.map((t15$1) => {
+					const { key: key_0 } = t15$1;
+					return {
+						field,
+						type: "prop",
+						propPath: key_0
+					};
+				})
+			});
+			const out = {};
+			for (const r of response.results) {
+				if (r.field !== field || r.type !== "prop" || !r.propPath) continue;
+				if (r.error) throw new Error(`[${r.propPath}] ${r.error}`);
+				out[r.propPath] = r.value;
+			}
+			return out;
+		};
+		$[30] = client;
+		$[31] = entity;
+		$[32] = entityType;
+		$[33] = field;
+		$[34] = formContext;
+		$[35] = placeholders;
+		$[36] = t14;
+	} else t14 = $[36];
+	let t15;
+	if ($[37] !== queryEnabled || $[38] !== t13 || $[39] !== t14) {
+		t15 = {
+			queryKey: t13,
+			queryFn: t14,
+			enabled: queryEnabled,
+			placeholderData: _temp3,
+			staleTime: 3e4
+		};
+		$[37] = queryEnabled;
+		$[38] = t13;
+		$[39] = t14;
+		$[40] = t15;
+	} else t15 = $[40];
+	const query = useQuery(t15);
+	let t16;
+	bb1: {
+		if (placeholders.length === 0) {
+			t16 = staticProps;
+			break bb1;
+		}
+		let out_0;
+		if ($[41] !== placeholders || $[42] !== query.data || $[43] !== staticProps) {
+			out_0 = { ...staticProps };
+			let t17$1;
+			if ($[45] !== query.data) {
+				t17$1 = query.data ?? {};
+				$[45] = query.data;
+				$[46] = t17$1;
+			} else t17$1 = $[46];
+			const resolved = t17$1;
+			for (const { key: key_1 } of placeholders) out_0[key_1] = resolved[key_1];
+			$[41] = placeholders;
+			$[42] = query.data;
+			$[43] = staticProps;
+			$[44] = out_0;
+		} else out_0 = $[44];
+		t16 = out_0;
+	}
+	const merged = t16;
+	const t17 = query.error ?? null;
+	let t18;
+	if ($[47] !== merged || $[48] !== query.isFetching || $[49] !== query.isLoading || $[50] !== t17) {
+		t18 = {
+			props: merged,
+			isLoading: query.isLoading,
+			isFetching: query.isFetching,
+			error: t17
+		};
+		$[47] = merged;
+		$[48] = query.isFetching;
+		$[49] = query.isLoading;
+		$[50] = t17;
+		$[51] = t18;
+	} else t18 = $[51];
+	return t18;
+}
+function _temp3(prev) {
+	return prev;
+}
+function _temp2(s) {
+	return s.client;
+}
+function _temp(p) {
+	return p.key;
+}
+
+//#endregion
+export { useReactiveProps };

package/dist/client/preview/block-scope-context.d.mts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as react_jsx_runtime24 from "react/jsx-runtime";
+import * as react_jsx_runtime25 from "react/jsx-runtime";
 
 //#region src/client/preview/block-scope-context.d.ts
 
@@ -35,7 +35,7 @@ declare function BlockScopeProvider({
   blockId,
   basePath,
   children
-}: BlockScopeProviderProps): react_jsx_runtime24.JSX.Element;
+}: BlockScopeProviderProps): react_jsx_runtime25.JSX.Element;
 /**
  * Get current block scope context.
  *

package/dist/client/preview/preview-banner.d.mts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime20 from "react/jsx-runtime";
+import * as react_jsx_runtime24 from "react/jsx-runtime";
 
 //#region src/client/preview/preview-banner.d.ts
 
@@ -40,6 +40,6 @@ declare function PreviewBanner({
   isPreviewMode,
   className,
   exitPreviewUrl
-}: PreviewBannerProps): react_jsx_runtime20.JSX.Element | null;
+}: PreviewBannerProps): react_jsx_runtime24.JSX.Element | null;
 //#endregion
 export { PreviewBanner, PreviewBannerProps };

package/dist/client/scope/picker.d.mts

@@ -1,5 +1,5 @@
 import { ScopePickerProps } from "./types.mjs";
-import * as react_jsx_runtime26 from "react/jsx-runtime";
+import * as react_jsx_runtime27 from "react/jsx-runtime";
 
 //#region src/client/scope/picker.d.ts
 
@@ -48,6 +48,6 @@ declare function ScopePicker({
   clearText,
   className,
   compact
-}: ScopePickerProps): react_jsx_runtime26.JSX.Element;
+}: ScopePickerProps): react_jsx_runtime27.JSX.Element;
 //#endregion
 export { ScopePicker };

package/dist/client/scope/provider.d.mts

@@ -1,5 +1,5 @@
 import { ScopeContextValue, ScopeProviderProps } from "./types.mjs";
-import * as react_jsx_runtime27 from "react/jsx-runtime";
+import * as react_jsx_runtime26 from "react/jsx-runtime";
 
 //#region src/client/scope/provider.d.ts
 
@@ -29,7 +29,7 @@ declare function ScopeProvider({
   headerName,
   storageKey,
   defaultScope
-}: ScopeProviderProps): react_jsx_runtime27.JSX.Element;
+}: ScopeProviderProps): react_jsx_runtime26.JSX.Element;
 /**
  * Hook to access the current scope context.
  *

package/dist/client/views/auth/accept-invite-form.d.mts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime2 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/client/views/auth/accept-invite-form.d.ts
 /**
@@ -67,6 +67,6 @@ declare function AcceptInviteForm({
   className,
   error,
   minPasswordLength
-}: AcceptInviteFormProps): react_jsx_runtime2.JSX.Element;
+}: AcceptInviteFormProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 export { AcceptInviteForm };

package/dist/client/views/auth/auth-layout.d.mts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime1 from "react/jsx-runtime";
 
 //#region src/client/views/auth/auth-layout.d.ts
 
@@ -26,7 +26,7 @@ declare function AuthDefaultLogo({
   brandName
 }: {
   brandName: string;
-}): react_jsx_runtime0.JSX.Element;
+}): react_jsx_runtime1.JSX.Element;
 /**
  * Minimal split layout for authentication pages (login, register, forgot password, etc.)
  *
@@ -50,6 +50,6 @@ declare function AuthDefaultLogo({
  * </AuthLayout>
  * ```
  */
-declare function AuthLayout(props: AuthLayoutProps): react_jsx_runtime0.JSX.Element;
+declare function AuthLayout(props: AuthLayoutProps): react_jsx_runtime1.JSX.Element;
 //#endregion
 export { AuthDefaultLogo, AuthLayout, AuthLayoutProps };

package/dist/client/views/auth/login-form.d.mts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime4 from "react/jsx-runtime";
+import * as react_jsx_runtime5 from "react/jsx-runtime";
 
 //#region src/client/views/auth/login-form.d.ts
 /**
@@ -70,6 +70,6 @@ declare function LoginForm({
   className,
   error,
   minPasswordLength
-}: LoginFormProps): react_jsx_runtime4.JSX.Element;
+}: LoginFormProps): react_jsx_runtime5.JSX.Element;
 //#endregion
 export { LoginForm };

package/dist/client/views/auth/reset-password-form.d.mts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime5 from "react/jsx-runtime";
+import * as react_jsx_runtime4 from "react/jsx-runtime";
 
 //#region src/client/views/auth/reset-password-form.d.ts
 /**
@@ -60,6 +60,6 @@ declare function ResetPasswordForm({
   minPasswordLength,
   className,
   error
-}: ResetPasswordFormProps): react_jsx_runtime5.JSX.Element;
+}: ResetPasswordFormProps): react_jsx_runtime4.JSX.Element;
 //#endregion
 export { ResetPasswordForm };