@payloadcms/ui 3.0.0-canary.a0b06af → 3.0.0-canary.a5aaf21

package/dist/fields/Hidden/index.js

@@ -1,4 +1,6 @@
 'use client';
+
+import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useEffect } from 'react';
 import { useFieldProps } from '../../forms/FieldPropsProvider/index.js';
@@ -7,29 +9,78 @@ import { withCondition } from '../../forms/withCondition/index.js';
 /**
  * This is mainly used to save a value on the form that is not visible to the user.
  * For example, this sets the `ìd` property of a block in the Blocks field.
- */ const _HiddenField = (props)=>{
-    const { name, disableModifyingForm = true, forceUsePathFromProps, path: pathFromProps, value: valueFromProps } = props;
-    const { path: pathFromContext } = useFieldProps();
-    const { path, setValue, value } = useField({
-        path: (!forceUsePathFromProps ? pathFromContext : null) || pathFromProps || name
-    });
-    useEffect(()=>{
-        if (valueFromProps !== undefined) {
-            setValue(valueFromProps, disableModifyingForm);
-        }
-    }, [
-        valueFromProps,
-        setValue,
-        disableModifyingForm
-    ]);
-    return /*#__PURE__*/ _jsx("input", {
-        id: `field-${path?.replace(/\./g, '__')}`,
-        name: path,
-        onChange: setValue,
-        type: "hidden",
-        value: value || ''
+ */
+const HiddenFieldComponent = props => {
+  const $ = _c(12);
+  const {
+    disableModifyingForm: t0,
+    field: t1,
+    forceUsePathFromProps,
+    value: valueFromProps
+  } = props;
+  const disableModifyingForm = t0 === undefined ? true : t0;
+  const {
+    name,
+    _path: pathFromProps
+  } = t1;
+  const {
+    path: pathFromContext
+  } = useFieldProps();
+  const t2 = (!forceUsePathFromProps ? pathFromContext : null) || pathFromProps || name;
+  let t3;
+  if ($[0] !== t2) {
+    t3 = {
+      path: t2
+    };
+    $[0] = t2;
+    $[1] = t3;
+  } else {
+    t3 = $[1];
+  }
+  const {
+    path,
+    setValue,
+    value
+  } = useField(t3);
+  let t4;
+  let t5;
+  if ($[2] !== valueFromProps || $[3] !== setValue || $[4] !== disableModifyingForm) {
+    t4 = () => {
+      if (valueFromProps !== undefined) {
+        setValue(valueFromProps, disableModifyingForm);
+      }
+    };
+    t5 = [valueFromProps, setValue, disableModifyingForm];
+    $[2] = valueFromProps;
+    $[3] = setValue;
+    $[4] = disableModifyingForm;
+    $[5] = t4;
+    $[6] = t5;
+  } else {
+    t4 = $[5];
+    t5 = $[6];
+  }
+  useEffect(t4, t5);
+  const t6 = `field-${path?.replace(/\./g, "__")}`;
+  const t7 = value || "";
+  let t8;
+  if ($[7] !== t6 || $[8] !== path || $[9] !== setValue || $[10] !== t7) {
+    t8 = _jsx("input", {
+      id: t6,
+      name: path,
+      onChange: setValue,
+      type: "hidden",
+      value: t7
     });
+    $[7] = t6;
+    $[8] = path;
+    $[9] = setValue;
+    $[10] = t7;
+    $[11] = t8;
+  } else {
+    t8 = $[11];
+  }
+  return t8;
 };
-export const HiddenField = withCondition(_HiddenField);
-
+export const HiddenField = withCondition(HiddenFieldComponent);
 //# sourceMappingURL=index.js.map

package/dist/fields/Hidden/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/fields/Hidden/index.tsx"],"sourcesContent":["'use client'\nimport React, { useEffect } from 'react'\n\nimport type { FormFieldBase } from '../index.js'\n\nimport { useFieldProps } from '../../forms/FieldPropsProvider/index.js'\nimport { useField } from '../../forms/useField/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\n\nexport type HiddenInputFieldProps = FormFieldBase & {\n  disableModifyingForm?: false\n  forceUsePathFromProps?: boolean\n  name?: string\n  path?: string\n  value?: unknown\n}\n\n/**\n * This is mainly used to save a value on the form that is not visible to the user.\n * For example, this sets the `ìd` property of a block in the Blocks field.\n */\nconst _HiddenField: React.FC<HiddenInputFieldProps> = (props) => {\n  const {\n    name,\n    disableModifyingForm = true,\n    forceUsePathFromProps,\n    path: pathFromProps,\n    value: valueFromProps,\n  } = props\n\n  const { path: pathFromContext } = useFieldProps()\n\n  const { path, setValue, value } = useField({\n    path: (!forceUsePathFromProps ? pathFromContext : null) || pathFromProps || name,\n  })\n\n  useEffect(() => {\n    if (valueFromProps !== undefined) {\n      setValue(valueFromProps, disableModifyingForm)\n    }\n  }, [valueFromProps, setValue, disableModifyingForm])\n\n  return (\n    <input\n      id={`field-${path?.replace(/\\./g, '__')}`}\n      name={path}\n      onChange={setValue}\n      type=\"hidden\"\n      value={(value as string) || ''}\n    />\n  )\n}\n\nexport const HiddenField = withCondition(_HiddenField)\n"],"names":["React","useEffect","useFieldProps","useField","withCondition","_HiddenField","props","name","disableModifyingForm","forceUsePathFromProps","path","pathFromProps","value","valueFromProps","pathFromContext","setValue","undefined","input","id","replace","onChange","type","HiddenField"],"mappings":"AAAA;;AACA,OAAOA,SAASC,SAAS,QAAQ,QAAO;AAIxC,SAASC,aAAa,QAAQ,0CAAyC;AACvE,SAASC,QAAQ,QAAQ,gCAA+B;AACxD,SAASC,aAAa,QAAQ,qCAAoC;AAUlE;;;CAGC,GACD,MAAMC,eAAgD,CAACC;IACrD,MAAM,EACJC,IAAI,EACJC,uBAAuB,IAAI,EAC3BC,qBAAqB,EACrBC,MAAMC,aAAa,EACnBC,OAAOC,cAAc,EACtB,GAAGP;IAEJ,MAAM,EAAEI,MAAMI,eAAe,EAAE,GAAGZ;IAElC,MAAM,EAAEQ,IAAI,EAAEK,QAAQ,EAAEH,KAAK,EAAE,GAAGT,SAAS;QACzCO,MAAM,AAAC,CAAA,CAACD,wBAAwBK,kBAAkB,IAAG,KAAMH,iBAAiBJ;IAC9E;IAEAN,UAAU;QACR,IAAIY,mBAAmBG,WAAW;YAChCD,SAASF,gBAAgBL;QAC3B;IACF,GAAG;QAACK;QAAgBE;QAAUP;KAAqB;IAEnD,qBACE,KAACS;QACCC,IAAI,CAAC,MAAM,EAAER,MAAMS,QAAQ,OAAO,MAAM,CAAC;QACzCZ,MAAMG;QACNU,UAAUL;QACVM,MAAK;QACLT,OAAO,AAACA,SAAoB;;AAGlC;AAEA,OAAO,MAAMU,cAAclB,cAAcC,cAAa"}
+{"version":3,"file":"index.js","names":["c","_c","React","useEffect","useFieldProps","useField","withCondition","HiddenFieldComponent","props","$","disableModifyingForm","t0","field","t1","forceUsePathFromProps","value","valueFromProps","undefined","name","_path","pathFromProps","path","pathFromContext","t2","t3","setValue","t4","t5","t6","replace","t7","t8","_jsx","id","onChange","type","HiddenField"],"sources":["../../../src/fields/Hidden/index.tsx"],"sourcesContent":["'use client'\n\nimport type { HiddenFieldProps } from 'payload'\n\nimport React, { useEffect } from 'react'\n\nimport { useFieldProps } from '../../forms/FieldPropsProvider/index.js'\nimport { useField } from '../../forms/useField/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\n\n/**\n * This is mainly used to save a value on the form that is not visible to the user.\n * For example, this sets the `ìd` property of a block in the Blocks field.\n */\nconst HiddenFieldComponent: React.FC<HiddenFieldProps> = (props) => {\n  const {\n    disableModifyingForm = true,\n    field: { name, _path: pathFromProps },\n    forceUsePathFromProps,\n    value: valueFromProps,\n  } = props\n\n  const { path: pathFromContext } = useFieldProps()\n\n  const { path, setValue, value } = useField({\n    path: (!forceUsePathFromProps ? pathFromContext : null) || pathFromProps || name,\n  })\n\n  useEffect(() => {\n    if (valueFromProps !== undefined) {\n      setValue(valueFromProps, disableModifyingForm)\n    }\n  }, [valueFromProps, setValue, disableModifyingForm])\n\n  return (\n    <input\n      id={`field-${path?.replace(/\\./g, '__')}`}\n      name={path}\n      onChange={setValue}\n      type=\"hidden\"\n      value={(value as string) || ''}\n    />\n  )\n}\n\nexport const HiddenField = withCondition(HiddenFieldComponent)\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAIA,OAAOC,KAAA,IAASC,SAAS,QAAQ;AAEjC,SAASC,aAAa,QAAQ;AAC9B,SAASC,QAAQ,QAAQ;AACzB,SAASC,aAAa,QAAQ;AAE9B;;;;AAIA,MAAMC,oBAAA,GAAmDC,KAAA;EAAA,MAAAC,CAAA,GAAAR,EAAA;EACvD;IAAAS,oBAAA,EAAAC,EAAA;IAAAC,KAAA,EAAAC,EAAA;IAAAC,qBAAA;IAAAC,KAAA,EAAAC;EAAA,IAKIR,KAAA;EAJF,MAAAE,oBAAA,GAAAC,EAA2B,KAAAM,SAAA,UAA3BN,EAA2B;EACpB;IAAAO,IAAA;IAAAC,KAAA,EAAAC;EAAA,IAAAP,EAA8B;EAKvC;IAAAQ,IAAA,EAAAC;EAAA,IAAkClB,aAAA;EAG1B,MAAAmB,EAAA,IAAC,CAACT,qBAAA,GAAwBQ,eAAA,OAAqB,KAAMF,aAAA,IAAiBF,IAAA;EAAA,IAAAM,EAAA;EAAA,IAAAf,CAAA,QAAAc,EAAA;IADnCC,EAAA;MAAAH,IAAA,EACnCE;IAAsE;IAC9Ed,CAAA,MAAAc,EAAA;IAAAd,CAAA,MAAAe,EAAA;EAAA;IAAAA,EAAA,GAAAf,CAAA;EAAA;EAFA;IAAAY,IAAA;IAAAI,QAAA;IAAAV;EAAA,IAAkCV,QAAA,CAASmB,EAE3C;EAAA,IAAAE,EAAA;EAAA,IAAAC,EAAA;EAAA,IAAAlB,CAAA,QAAAO,cAAA,IAAAP,CAAA,QAAAgB,QAAA,IAAAhB,CAAA,QAAAC,oBAAA;IAEUgB,EAAA,GAAAA,CAAA;MAAA,IACJV,cAAA,KAAAC,SAAmB;QACrBQ,QAAA,CAAST,cAAA,EAAgBN,oBAAA;MAAA;IAAA;IAE1BiB,EAAA,IAACX,cAAA,EAAgBS,QAAA,EAAUf,oBAAA;IAAqBD,CAAA,MAAAO,cAAA;IAAAP,CAAA,MAAAgB,QAAA;IAAAhB,CAAA,MAAAC,oBAAA;IAAAD,CAAA,MAAAiB,EAAA;IAAAjB,CAAA,MAAAkB,EAAA;EAAA;IAAAD,EAAA,GAAAjB,CAAA;IAAAkB,EAAA,GAAAlB,CAAA;EAAA;EAJnDN,SAAA,CAAUuB,EAIV,EAAGC,EAAgD;EAI3C,MAAAC,EAAA,YAASP,IAAA,EAAAQ,OAAA,QAAqB,OAAO;EAIlC,MAAAC,EAAA,GAAAf,KAAC,IAAoB;EAAA,IAAAgB,EAAA;EAAA,IAAAtB,CAAA,QAAAmB,EAAA,IAAAnB,CAAA,QAAAY,IAAA,IAAAZ,CAAA,QAAAgB,QAAA,IAAAhB,CAAA,SAAAqB,EAAA;IAL9BC,EAAA,GAAAC,IAAA,CAAC;MAAAC,EAAA,EACKL,EAAqC;MAAAV,IAAA,EACnCG,IAAA;MAAAa,QAAA,EACIT,QAAA;MAAAU,IAAA,EACL;MAAApB,KAAA,EACEe;IAAqB,C;;;;;;;;;SAL9BC,E;CAQJ;AAEA,OAAO,MAAMK,WAAA,GAAc9B,aAAA,CAAcC,oBAAA","ignoreList":[]}

package/dist/fields/JSON/index.d.ts

@@ -1,13 +1,11 @@
-import type { JSONField as JSONFieldType } from 'payload';
 import React from 'react';
 import './index.scss';
-import type { FormFieldBase } from '../shared/index.js';
-export type JSONFieldProps = FormFieldBase & {
-    editorOptions?: JSONFieldType['admin']['editorOptions'];
-    jsonSchema?: Record<string, unknown>;
-    name?: string;
-    path?: string;
-    width?: string;
-};
-export declare const JSONField: React.FC<JSONFieldProps>;
+export declare const JSONField: React.FC<{
+    readonly validate?: import("payload").JSONFieldValidation;
+} & {
+    readonly descriptionProps?: import("payload").FieldDescriptionClientProps<Omit<import("payload").JSONFieldClient, "type"> & Partial<Pick<import("payload").JSONFieldClient, "type">>>;
+    readonly errorProps?: import("payload").FieldErrorClientProps<Omit<import("payload").JSONFieldClient, "type"> & Partial<Pick<import("payload").JSONFieldClient, "type">>>;
+    readonly field: Omit<import("payload").JSONFieldClient, "type"> & Partial<Pick<import("payload").JSONFieldClient, "type">>;
+    readonly labelProps?: import("payload").FieldLabelClientProps<Omit<import("payload").JSONFieldClient, "type"> & Partial<Pick<import("payload").JSONFieldClient, "type">>>;
+} & import("payload").FormFieldBase>;
 //# sourceMappingURL=index.d.ts.map

package/dist/fields/JSON/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/JSON/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAkB,SAAS,IAAI,aAAa,EAAE,MAAM,SAAS,CAAA;AAEzE,OAAO,KAA2C,MAAM,OAAO,CAAA;AAO/D,OAAO,cAAc,CAAA;AAIrB,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAMvD,MAAM,MAAM,cAAc,GAAG,aAAa,GAAG;IAC3C,aAAa,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC,eAAe,CAAC,CAAA;IACvD,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IACpC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAyID,eAAO,MAAM,SAAS,0BAA4B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/JSON/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA2C,MAAM,OAAO,CAAA;AAO/D,OAAO,cAAc,CAAA;AA0JrB,eAAO,MAAM,SAAS;;;;;;;oCAAoC,CAAA"}

package/dist/fields/JSON/index.js

@@ -1,4 +1,5 @@
 'use client';
+
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useState } from 'react';
 import { CodeEditor } from '../../elements/CodeEditor/index.js';
@@ -9,122 +10,133 @@ import { fieldBaseClass } from '../shared/index.js';
 import './index.scss';
 const baseClass = 'json-field';
 import { useFieldProps } from '../../forms/FieldPropsProvider/index.js';
+import { RenderComponent } from '../../providers/Config/RenderComponent.js';
 import { FieldDescription } from '../FieldDescription/index.js';
 import { FieldError } from '../FieldError/index.js';
-const _JSONField = (props)=>{
-    const { name, AfterInput, BeforeInput, CustomDescription, CustomError, CustomLabel, className, descriptionProps, editorOptions, errorProps, jsonSchema, label, labelProps, path: pathFromProps, readOnly: readOnlyFromProps, required, style, validate, width } = props;
-    const [stringValue, setStringValue] = useState();
-    const [jsonError, setJsonError] = useState();
-    const [hasLoadedValue, setHasLoadedValue] = useState(false);
-    const memoizedValidate = useCallback((value, options)=>{
-        if (typeof validate === 'function') return validate(value, {
-            ...options,
-            jsonError,
-            required
-        });
-    }, [
-        validate,
-        required,
-        jsonError
-    ]);
-    const { path: pathFromContext, readOnly: readOnlyFromContext } = useFieldProps();
-    const { formInitializing, formProcessing, initialValue, path, setValue, showError, value } = useField({
-        path: pathFromContext ?? pathFromProps ?? name,
-        validate: memoizedValidate
-    });
-    const disabled = readOnlyFromProps || readOnlyFromContext || formProcessing || formInitializing;
-    const handleMount = useCallback((editor, monaco)=>{
-        if (!jsonSchema) return;
-        const existingSchemas = monaco.languages.json.jsonDefaults.diagnosticsOptions.schemas || [];
-        const modelUri = monaco.Uri.parse(jsonSchema.uri);
-        const model = monaco.editor.createModel(JSON.stringify(value, null, 2), 'json', modelUri);
-        monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
-            enableSchemaRequest: true,
-            schemas: [
-                ...existingSchemas,
-                jsonSchema
-            ],
-            validate: true
-        });
-        editor.setModel(model);
-    }, [
-        jsonSchema,
-        value
-    ]);
-    const handleChange = useCallback((val)=>{
-        if (disabled) return;
-        setStringValue(val);
-        try {
-            setValue(val ? JSON.parse(val) : null);
-            setJsonError(undefined);
-        } catch (e) {
-            setValue(val ? val : null);
-            setJsonError(e);
-        }
-    }, [
-        disabled,
-        setValue,
-        setStringValue
-    ]);
-    useEffect(()=>{
-        if (hasLoadedValue || value === undefined) return;
-        setStringValue(value || initialValue ? JSON.stringify(value ? value : initialValue, null, 2) : '');
-        setHasLoadedValue(true);
-    }, [
-        initialValue,
-        value,
-        hasLoadedValue
-    ]);
-    return /*#__PURE__*/ _jsxs("div", {
-        className: [
-            fieldBaseClass,
-            baseClass,
-            className,
-            showError && 'error',
-            disabled && 'read-only'
-        ].filter(Boolean).join(' '),
-        style: {
-            ...style,
-            width
-        },
-        children: [
-            /*#__PURE__*/ _jsx(FieldLabel, {
-                CustomLabel: CustomLabel,
-                label: label,
-                required: required,
-                ...labelProps || {}
-            }),
-            /*#__PURE__*/ _jsx(FieldError, {
-                CustomError: CustomError,
-                path: path,
-                ...errorProps || {}
-            }),
-            /*#__PURE__*/ _jsxs("div", {
-                className: `${fieldBaseClass}__wrap`,
-                children: [
-                    /*#__PURE__*/ _jsx(FieldError, {
-                        CustomError: CustomError,
-                        path: path,
-                        ...errorProps || {}
-                    }),
-                    BeforeInput,
-                    /*#__PURE__*/ _jsx(CodeEditor, {
-                        defaultLanguage: "json",
-                        onChange: handleChange,
-                        onMount: handleMount,
-                        options: editorOptions,
-                        readOnly: disabled,
-                        value: stringValue
-                    }),
-                    AfterInput
-                ]
-            }),
-            CustomDescription !== undefined ? CustomDescription : /*#__PURE__*/ _jsx(FieldDescription, {
-                ...descriptionProps || {}
-            })
-        ]
+const JSONFieldComponent = props => {
+  const {
+    descriptionProps,
+    errorProps,
+    field,
+    field: {
+      name,
+      _path: pathFromProps,
+      admin: {
+        className,
+        description,
+        editorOptions,
+        readOnly: readOnlyFromAdmin,
+        style,
+        width
+      } = {},
+      jsonSchema,
+      label,
+      required
+    },
+    labelProps,
+    readOnly: readOnlyFromTopLevelProps,
+    validate
+  } = props;
+  const readOnlyFromProps = readOnlyFromTopLevelProps || readOnlyFromAdmin;
+  const [stringValue, setStringValue] = useState();
+  const [jsonError, setJsonError] = useState();
+  const [hasLoadedValue, setHasLoadedValue] = useState(false);
+  const memoizedValidate = useCallback((value, options) => {
+    if (typeof validate === 'function') {
+      return validate(value, {
+        ...options,
+        jsonError,
+        required
+      });
+    }
+  }, [validate, required, jsonError]);
+  const {
+    path: pathFromContext,
+    readOnly: readOnlyFromContext
+  } = useFieldProps();
+  const {
+    formInitializing,
+    formProcessing,
+    initialValue,
+    path,
+    setValue,
+    showError,
+    value: value_0
+  } = useField({
+    path: pathFromContext ?? pathFromProps ?? name,
+    validate: memoizedValidate
+  });
+  const disabled = readOnlyFromProps || readOnlyFromContext || formProcessing || formInitializing;
+  const handleMount = useCallback((editor, monaco) => {
+    if (!jsonSchema) {
+      return;
+    }
+    const existingSchemas = monaco.languages.json.jsonDefaults.diagnosticsOptions.schemas || [];
+    const modelUri = monaco.Uri.parse(jsonSchema.uri);
+    const model = monaco.editor.createModel(JSON.stringify(value_0, null, 2), 'json', modelUri);
+    monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+      enableSchemaRequest: true,
+      schemas: [...existingSchemas, jsonSchema],
+      validate: true
     });
+    editor.setModel(model);
+  }, [jsonSchema, value_0]);
+  const handleChange = useCallback(val => {
+    if (disabled) {
+      return;
+    }
+    setStringValue(val);
+    try {
+      setValue(val ? JSON.parse(val) : null);
+      setJsonError(undefined);
+    } catch (e) {
+      setValue(val ? val : null);
+      setJsonError(e);
+    }
+  }, [disabled, setValue, setStringValue]);
+  useEffect(() => {
+    if (hasLoadedValue || value_0 === undefined) {
+      return;
+    }
+    setStringValue(value_0 || initialValue ? JSON.stringify(value_0 ? value_0 : initialValue, null, 2) : '');
+    setHasLoadedValue(true);
+  }, [initialValue, value_0, hasLoadedValue]);
+  return /*#__PURE__*/_jsxs("div", {
+    className: [fieldBaseClass, baseClass, className, showError && 'error', disabled && 'read-only'].filter(Boolean).join(' '),
+    style: {
+      ...style,
+      width
+    },
+    children: [/*#__PURE__*/_jsx(FieldLabel, {
+      field: field,
+      Label: field?.admin?.components?.Label,
+      ...(labelProps || {})
+    }), /*#__PURE__*/_jsxs("div", {
+      className: `${fieldBaseClass}__wrap`,
+      children: [/*#__PURE__*/_jsx(FieldError, {
+        CustomError: field?.admin?.components?.Error,
+        field: field,
+        path: path,
+        ...(errorProps || {})
+      }), /*#__PURE__*/_jsx(RenderComponent, {
+        mappedComponent: field?.admin?.components?.beforeInput
+      }), /*#__PURE__*/_jsx(CodeEditor, {
+        defaultLanguage: "json",
+        onChange: handleChange,
+        onMount: handleMount,
+        options: editorOptions,
+        readOnly: disabled,
+        value: stringValue
+      }), /*#__PURE__*/_jsx(RenderComponent, {
+        mappedComponent: field?.admin?.components?.afterInput
+      })]
+    }), /*#__PURE__*/_jsx(FieldDescription, {
+      Description: field?.admin?.components?.Description,
+      description: description,
+      field: field,
+      ...(descriptionProps || {})
+    })]
+  });
 };
-export const JSONField = withCondition(_JSONField);
-
+export const JSONField = withCondition(JSONFieldComponent);
 //# sourceMappingURL=index.js.map

package/dist/fields/JSON/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/fields/JSON/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientValidate, JSONField as JSONFieldType } from 'payload'\n\nimport React, { useCallback, useEffect, useState } from 'react'\n\nimport { CodeEditor } from '../../elements/CodeEditor/index.js'\nimport { useField } from '../../forms/useField/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { FieldLabel } from '../FieldLabel/index.js'\nimport { fieldBaseClass } from '../shared/index.js'\nimport './index.scss'\n\nconst baseClass = 'json-field'\n\nimport type { FormFieldBase } from '../shared/index.js'\n\nimport { useFieldProps } from '../../forms/FieldPropsProvider/index.js'\nimport { FieldDescription } from '../FieldDescription/index.js'\nimport { FieldError } from '../FieldError/index.js'\n\nexport type JSONFieldProps = FormFieldBase & {\n  editorOptions?: JSONFieldType['admin']['editorOptions']\n  jsonSchema?: Record<string, unknown>\n  name?: string\n  path?: string\n  width?: string\n}\n\nconst _JSONField: React.FC<JSONFieldProps> = (props) => {\n  const {\n    name,\n    AfterInput,\n    BeforeInput,\n    CustomDescription,\n    CustomError,\n    CustomLabel,\n    className,\n    descriptionProps,\n    editorOptions,\n    errorProps,\n    jsonSchema,\n    label,\n    labelProps,\n    path: pathFromProps,\n    readOnly: readOnlyFromProps,\n    required,\n    style,\n    validate,\n    width,\n  } = props\n\n  const [stringValue, setStringValue] = useState<string>()\n  const [jsonError, setJsonError] = useState<string>()\n  const [hasLoadedValue, setHasLoadedValue] = useState(false)\n\n  const memoizedValidate: ClientValidate = useCallback(\n    (value, options) => {\n      if (typeof validate === 'function')\n        return validate(value, { ...options, jsonError, required })\n    },\n    [validate, required, jsonError],\n  )\n\n  const { path: pathFromContext, readOnly: readOnlyFromContext } = useFieldProps()\n\n  const { formInitializing, formProcessing, initialValue, path, setValue, showError, value } =\n    useField<string>({\n      path: pathFromContext ?? pathFromProps ?? name,\n      validate: memoizedValidate,\n    })\n\n  const disabled = readOnlyFromProps || readOnlyFromContext || formProcessing || formInitializing\n\n  const handleMount = useCallback(\n    (editor, monaco) => {\n      if (!jsonSchema) return\n\n      const existingSchemas = monaco.languages.json.jsonDefaults.diagnosticsOptions.schemas || []\n      const modelUri = monaco.Uri.parse(jsonSchema.uri)\n\n      const model = monaco.editor.createModel(JSON.stringify(value, null, 2), 'json', modelUri)\n      monaco.languages.json.jsonDefaults.setDiagnosticsOptions({\n        enableSchemaRequest: true,\n        schemas: [...existingSchemas, jsonSchema],\n        validate: true,\n      })\n\n      editor.setModel(model)\n    },\n    [jsonSchema, value],\n  )\n\n  const handleChange = useCallback(\n    (val) => {\n      if (disabled) return\n      setStringValue(val)\n\n      try {\n        setValue(val ? JSON.parse(val) : null)\n        setJsonError(undefined)\n      } catch (e) {\n        setValue(val ? val : null)\n        setJsonError(e)\n      }\n    },\n    [disabled, setValue, setStringValue],\n  )\n\n  useEffect(() => {\n    if (hasLoadedValue || value === undefined) return\n\n    setStringValue(\n      value || initialValue ? JSON.stringify(value ? value : initialValue, null, 2) : '',\n    )\n\n    setHasLoadedValue(true)\n  }, [initialValue, value, hasLoadedValue])\n\n  return (\n    <div\n      className={[\n        fieldBaseClass,\n        baseClass,\n        className,\n        showError && 'error',\n        disabled && 'read-only',\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      style={{\n        ...style,\n        width,\n      }}\n    >\n      <FieldLabel\n        CustomLabel={CustomLabel}\n        label={label}\n        required={required}\n        {...(labelProps || {})}\n      />\n      <FieldError CustomError={CustomError} path={path} {...(errorProps || {})} />\n      <div className={`${fieldBaseClass}__wrap`}>\n        <FieldError CustomError={CustomError} path={path} {...(errorProps || {})} />\n        {BeforeInput}\n        <CodeEditor\n          defaultLanguage=\"json\"\n          onChange={handleChange}\n          onMount={handleMount}\n          options={editorOptions}\n          readOnly={disabled}\n          value={stringValue}\n        />\n        {AfterInput}\n      </div>\n      {CustomDescription !== undefined ? (\n        CustomDescription\n      ) : (\n        <FieldDescription {...(descriptionProps || {})} />\n      )}\n    </div>\n  )\n}\n\nexport const JSONField = withCondition(_JSONField)\n"],"names":["React","useCallback","useEffect","useState","CodeEditor","useField","withCondition","FieldLabel","fieldBaseClass","baseClass","useFieldProps","FieldDescription","FieldError","_JSONField","props","name","AfterInput","BeforeInput","CustomDescription","CustomError","CustomLabel","className","descriptionProps","editorOptions","errorProps","jsonSchema","label","labelProps","path","pathFromProps","readOnly","readOnlyFromProps","required","style","validate","width","stringValue","setStringValue","jsonError","setJsonError","hasLoadedValue","setHasLoadedValue","memoizedValidate","value","options","pathFromContext","readOnlyFromContext","formInitializing","formProcessing","initialValue","setValue","showError","disabled","handleMount","editor","monaco","existingSchemas","languages","json","jsonDefaults","diagnosticsOptions","schemas","modelUri","Uri","parse","uri","model","createModel","JSON","stringify","setDiagnosticsOptions","enableSchemaRequest","setModel","handleChange","val","undefined","e","div","filter","Boolean","join","defaultLanguage","onChange","onMount","JSONField"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","useCallback","useEffect","useState","CodeEditor","useField","withCondition","FieldLabel","fieldBaseClass","baseClass","useFieldProps","RenderComponent","FieldDescription","FieldError","JSONFieldComponent","props","descriptionProps","errorProps","field","name","_path","pathFromProps","admin","className","description","editorOptions","readOnly","readOnlyFromAdmin","style","width","jsonSchema","label","required","labelProps","readOnlyFromTopLevelProps","validate","readOnlyFromProps","stringValue","setStringValue","jsonError","setJsonError","hasLoadedValue","setHasLoadedValue","memoizedValidate","value","options","path","pathFromContext","readOnlyFromContext","formInitializing","formProcessing","initialValue","setValue","showError","disabled","handleMount","editor","monaco","existingSchemas","languages","json","jsonDefaults","diagnosticsOptions","schemas","modelUri","Uri","parse","uri","model","createModel","JSON","stringify","setDiagnosticsOptions","enableSchemaRequest","setModel","handleChange","val","undefined","e","_jsxs","filter","Boolean","join","_jsx","Label","components","CustomError","Error","mappedComponent","beforeInput","defaultLanguage","onChange","onMount","afterInput","Description","JSONField"],"sources":["../../../src/fields/JSON/index.tsx"],"sourcesContent":["'use client'\nimport type { JSONFieldClientComponent } from 'payload'\n\nimport React, { useCallback, useEffect, useState } from 'react'\n\nimport { CodeEditor } from '../../elements/CodeEditor/index.js'\nimport { useField } from '../../forms/useField/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { FieldLabel } from '../FieldLabel/index.js'\nimport { fieldBaseClass } from '../shared/index.js'\nimport './index.scss'\n\nconst baseClass = 'json-field'\n\nimport { useFieldProps } from '../../forms/FieldPropsProvider/index.js'\nimport { RenderComponent } from '../../providers/Config/RenderComponent.js'\nimport { FieldDescription } from '../FieldDescription/index.js'\nimport { FieldError } from '../FieldError/index.js'\n\nconst JSONFieldComponent: JSONFieldClientComponent = (props) => {\n  const {\n    descriptionProps,\n    errorProps,\n    field,\n    field: {\n      name,\n      _path: pathFromProps,\n      admin: {\n        className,\n        description,\n        editorOptions,\n        readOnly: readOnlyFromAdmin,\n        style,\n        width,\n      } = {},\n      jsonSchema,\n      label,\n      required,\n    },\n    labelProps,\n    readOnly: readOnlyFromTopLevelProps,\n    validate,\n  } = props\n  const readOnlyFromProps = readOnlyFromTopLevelProps || readOnlyFromAdmin\n\n  const [stringValue, setStringValue] = useState<string>()\n  const [jsonError, setJsonError] = useState<string>()\n  const [hasLoadedValue, setHasLoadedValue] = useState(false)\n\n  const memoizedValidate = useCallback(\n    (value, options) => {\n      if (typeof validate === 'function') {\n        return validate(value, { ...options, jsonError, required })\n      }\n    },\n    [validate, required, jsonError],\n  )\n\n  const { path: pathFromContext, readOnly: readOnlyFromContext } = useFieldProps()\n\n  const { formInitializing, formProcessing, initialValue, path, setValue, showError, value } =\n    useField<string>({\n      path: pathFromContext ?? pathFromProps ?? name,\n      validate: memoizedValidate,\n    })\n\n  const disabled = readOnlyFromProps || readOnlyFromContext || formProcessing || formInitializing\n\n  const handleMount = useCallback(\n    (editor, monaco) => {\n      if (!jsonSchema) {\n        return\n      }\n\n      const existingSchemas = monaco.languages.json.jsonDefaults.diagnosticsOptions.schemas || []\n      const modelUri = monaco.Uri.parse(jsonSchema.uri)\n\n      const model = monaco.editor.createModel(JSON.stringify(value, null, 2), 'json', modelUri)\n      monaco.languages.json.jsonDefaults.setDiagnosticsOptions({\n        enableSchemaRequest: true,\n        schemas: [...existingSchemas, jsonSchema],\n        validate: true,\n      })\n\n      editor.setModel(model)\n    },\n    [jsonSchema, value],\n  )\n\n  const handleChange = useCallback(\n    (val) => {\n      if (disabled) {\n        return\n      }\n      setStringValue(val)\n\n      try {\n        setValue(val ? JSON.parse(val) : null)\n        setJsonError(undefined)\n      } catch (e) {\n        setValue(val ? val : null)\n        setJsonError(e)\n      }\n    },\n    [disabled, setValue, setStringValue],\n  )\n\n  useEffect(() => {\n    if (hasLoadedValue || value === undefined) {\n      return\n    }\n\n    setStringValue(\n      value || initialValue ? JSON.stringify(value ? value : initialValue, null, 2) : '',\n    )\n\n    setHasLoadedValue(true)\n  }, [initialValue, value, hasLoadedValue])\n\n  return (\n    <div\n      className={[\n        fieldBaseClass,\n        baseClass,\n        className,\n        showError && 'error',\n        disabled && 'read-only',\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      style={{\n        ...style,\n        width,\n      }}\n    >\n      <FieldLabel field={field} Label={field?.admin?.components?.Label} {...(labelProps || {})} />\n      <div className={`${fieldBaseClass}__wrap`}>\n        <FieldError\n          CustomError={field?.admin?.components?.Error}\n          field={field}\n          path={path}\n          {...(errorProps || {})}\n        />\n        <RenderComponent mappedComponent={field?.admin?.components?.beforeInput} />\n        <CodeEditor\n          defaultLanguage=\"json\"\n          onChange={handleChange}\n          onMount={handleMount}\n          options={editorOptions}\n          readOnly={disabled}\n          value={stringValue}\n        />\n        <RenderComponent mappedComponent={field?.admin?.components?.afterInput} />\n      </div>\n      <FieldDescription\n        Description={field?.admin?.components?.Description}\n        description={description}\n        field={field}\n        {...(descriptionProps || {})}\n      />\n    </div>\n  )\n}\n\nexport const JSONField = withCondition(JSONFieldComponent)\n"],"mappings":"AAAA;;;AAGA,OAAOA,KAAA,IAASC,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ;AAExD,SAASC,UAAU,QAAQ;AAC3B,SAASC,QAAQ,QAAQ;AACzB,SAASC,aAAa,QAAQ;AAC9B,SAASC,UAAU,QAAQ;AAC3B,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,SAASC,aAAa,QAAQ;AAC9B,SAASC,eAAe,QAAQ;AAChC,SAASC,gBAAgB,QAAQ;AACjC,SAASC,UAAU,QAAQ;AAE3B,MAAMC,kBAAA,GAAgDC,KAAA;EACpD,MAAM;IACJC,gBAAgB;IAChBC,UAAU;IACVC,KAAK;IACLA,KAAA,EAAO;MACLC,IAAI;MACJC,KAAA,EAAOC,aAAa;MACpBC,KAAA,EAAO;QACLC,SAAS;QACTC,WAAW;QACXC,aAAa;QACbC,QAAA,EAAUC,iBAAiB;QAC3BC,KAAK;QACLC;MAAK,CACN,GAAG,CAAC,CAAC;MACNC,UAAU;MACVC,KAAK;MACLC;IAAQ,CACT;IACDC,UAAU;IACVP,QAAA,EAAUQ,yBAAyB;IACnCC;EAAQ,CACT,GAAGpB,KAAA;EACJ,MAAMqB,iBAAA,GAAoBF,yBAAA,IAA6BP,iBAAA;EAEvD,MAAM,CAACU,WAAA,EAAaC,cAAA,CAAe,GAAGnC,QAAA;EACtC,MAAM,CAACoC,SAAA,EAAWC,YAAA,CAAa,GAAGrC,QAAA;EAClC,MAAM,CAACsC,cAAA,EAAgBC,iBAAA,CAAkB,GAAGvC,QAAA,CAAS;EAErD,MAAMwC,gBAAA,GAAmB1C,WAAA,CACvB,CAAC2C,KAAA,EAAOC,OAAA;IACN,IAAI,OAAOV,QAAA,KAAa,YAAY;MAClC,OAAOA,QAAA,CAASS,KAAA,EAAO;QAAE,GAAGC,OAAO;QAAEN,SAAA;QAAWP;MAAS;IAC3D;EACF,GACA,CAACG,QAAA,EAAUH,QAAA,EAAUO,SAAA,CAAU;EAGjC,MAAM;IAAEO,IAAA,EAAMC,eAAe;IAAErB,QAAA,EAAUsB;EAAmB,CAAE,GAAGtC,aAAA;EAEjE,MAAM;IAAEuC,gBAAgB;IAAEC,cAAc;IAAEC,YAAY;IAAEL,IAAI;IAAEM,QAAQ;IAAEC,SAAS;IAAET,KAAK,EAALA;EAAK,CAAE,GACxFvC,QAAA,CAAiB;IACfyC,IAAA,EAAMC,eAAA,IAAmB1B,aAAA,IAAiBF,IAAA;IAC1CgB,QAAA,EAAUQ;EACZ;EAEF,MAAMW,QAAA,GAAWlB,iBAAA,IAAqBY,mBAAA,IAAuBE,cAAA,IAAkBD,gBAAA;EAE/E,MAAMM,WAAA,GAActD,WAAA,CAClB,CAACuD,MAAA,EAAQC,MAAA;IACP,IAAI,CAAC3B,UAAA,EAAY;MACf;IACF;IAEA,MAAM4B,eAAA,GAAkBD,MAAA,CAAOE,SAAS,CAACC,IAAI,CAACC,YAAY,CAACC,kBAAkB,CAACC,OAAO,IAAI,EAAE;IAC3F,MAAMC,QAAA,GAAWP,MAAA,CAAOQ,GAAG,CAACC,KAAK,CAACpC,UAAA,CAAWqC,GAAG;IAEhD,MAAMC,KAAA,GAAQX,MAAA,CAAOD,MAAM,CAACa,WAAW,CAACC,IAAA,CAAKC,SAAS,CAAC3B,OAAA,EAAO,MAAM,IAAI,QAAQoB,QAAA;IAChFP,MAAA,CAAOE,SAAS,CAACC,IAAI,CAACC,YAAY,CAACW,qBAAqB,CAAC;MACvDC,mBAAA,EAAqB;MACrBV,OAAA,EAAS,C,GAAIL,eAAA,EAAiB5B,UAAA,CAAW;MACzCK,QAAA,EAAU;IACZ;IAEAqB,MAAA,CAAOkB,QAAQ,CAACN,KAAA;EAClB,GACA,CAACtC,UAAA,EAAYc,OAAA,CAAM;EAGrB,MAAM+B,YAAA,GAAe1E,WAAA,CAClB2E,GAAA;IACC,IAAItB,QAAA,EAAU;MACZ;IACF;IACAhB,cAAA,CAAesC,GAAA;IAEf,IAAI;MACFxB,QAAA,CAASwB,GAAA,GAAMN,IAAA,CAAKJ,KAAK,CAACU,GAAA,IAAO;MACjCpC,YAAA,CAAaqC,SAAA;IACf,EAAE,OAAOC,CAAA,EAAG;MACV1B,QAAA,CAASwB,GAAA,GAAMA,GAAA,GAAM;MACrBpC,YAAA,CAAasC,CAAA;IACf;EACF,GACA,CAACxB,QAAA,EAAUF,QAAA,EAAUd,cAAA,CAAe;EAGtCpC,SAAA,CAAU;IACR,IAAIuC,cAAA,IAAkBG,OAAA,KAAUiC,SAAA,EAAW;MACzC;IACF;IAEAvC,cAAA,CACEM,OAAA,IAASO,YAAA,GAAemB,IAAA,CAAKC,SAAS,CAAC3B,OAAA,GAAQA,OAAA,GAAQO,YAAA,EAAc,MAAM,KAAK;IAGlFT,iBAAA,CAAkB;EACpB,GAAG,CAACS,YAAA,EAAcP,OAAA,EAAOH,cAAA,CAAe;EAExC,oBACEsC,KAAA,CAAC;IACCxD,SAAA,EAAW,CACTf,cAAA,EACAC,SAAA,EACAc,SAAA,EACA8B,SAAA,IAAa,SACbC,QAAA,IAAY,YACb,CACE0B,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;IACRtD,KAAA,EAAO;MACL,GAAGA,KAAK;MACRC;IACF;4BAEAsD,IAAA,CAAC5E,UAAA;MAAWW,KAAA,EAAOA,KAAA;MAAOkE,KAAA,EAAOlE,KAAA,EAAOI,KAAA,EAAO+D,UAAA,EAAYD,KAAA;MAAQ,IAAInD,UAAA,IAAc,CAAC,CAAC;qBACvF8C,KAAA,CAAC;MAAIxD,SAAA,EAAW,GAAGf,cAAA,QAAsB;8BACvC2E,IAAA,CAACtE,UAAA;QACCyE,WAAA,EAAapE,KAAA,EAAOI,KAAA,EAAO+D,UAAA,EAAYE,KAAA;QACvCrE,KAAA,EAAOA,KAAA;QACP4B,IAAA,EAAMA,IAAA;QACL,IAAI7B,UAAA,IAAc,CAAC,CAAC;uBAEvBkE,IAAA,CAACxE,eAAA;QAAgB6E,eAAA,EAAiBtE,KAAA,EAAOI,KAAA,EAAO+D,UAAA,EAAYI;uBAC5DN,IAAA,CAAC/E,UAAA;QACCsF,eAAA,EAAgB;QAChBC,QAAA,EAAUhB,YAAA;QACViB,OAAA,EAASrC,WAAA;QACTV,OAAA,EAASpB,aAAA;QACTC,QAAA,EAAU4B,QAAA;QACVV,KAAA,EAAOP;uBAET8C,IAAA,CAACxE,eAAA;QAAgB6E,eAAA,EAAiBtE,KAAA,EAAOI,KAAA,EAAO+D,UAAA,EAAYQ;;qBAE9DV,IAAA,CAACvE,gBAAA;MACCkF,WAAA,EAAa5E,KAAA,EAAOI,KAAA,EAAO+D,UAAA,EAAYS,WAAA;MACvCtE,WAAA,EAAaA,WAAA;MACbN,KAAA,EAAOA,KAAA;MACN,IAAIF,gBAAA,IAAoB,CAAC,CAAC;;;AAInC;AAEA,OAAO,MAAM+E,SAAA,GAAYzF,aAAA,CAAcQ,kBAAA","ignoreList":[]}

package/dist/fields/JSON/index.scss

@@ -2,34 +2,15 @@
 
 .json-field {
   position: relative;
-}
-
-html[data-theme='light'] {
-  .json-field {
-    &.error {
-      .code-editor {
-        border-color: var(--theme-error-500);
-      }
 
-      .monaco-editor-background,
-      .margin {
-        background-color: var(--theme-error-50);
-      }
+  &.error {
+    .code-editor {
+      border-color: var(--theme-error-500);
     }
-  }
-}
-
-html[data-theme='dark'] {
-  .json-field {
-    &.error {
-      .code-editor {
-        border-color: var(--theme-error-500);
-      }
 
-      .monaco-editor-background,
-      .margin {
-        background-color: var(--theme-error-100);
-      }
+    .monaco-editor-background,
+    .margin {
+      background-color: var(--theme-error-50);
     }
   }
 }

package/dist/fields/Join/index.d.ts

@@ -0,0 +1,9 @@
+import type { JoinFieldClient } from 'payload';
+import React from 'react';
+export declare const JoinField: React.FC<Record<string, unknown> & {
+    readonly descriptionProps?: import("payload").FieldDescriptionClientProps<Omit<JoinFieldClient, "type"> & Partial<Pick<JoinFieldClient, "type">>>;
+    readonly errorProps?: import("payload").FieldErrorClientProps<Omit<JoinFieldClient, "type"> & Partial<Pick<JoinFieldClient, "type">>>;
+    readonly field: Omit<JoinFieldClient, "type"> & Partial<Pick<JoinFieldClient, "type">>;
+    readonly labelProps?: import("payload").FieldLabelClientProps<Omit<JoinFieldClient, "type"> & Partial<Pick<JoinFieldClient, "type">>>;
+} & import("payload").FormFieldBase>;
+//# sourceMappingURL=index.d.ts.map

package/dist/fields/Join/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Join/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAkD,MAAM,SAAS,CAAA;AAE9F,OAAO,KAAkB,MAAM,OAAO,CAAA;AAkEtC,eAAO,MAAM,SAAS;;;;;oCAAoC,CAAA"}

package/dist/fields/Join/index.js

@@ -0,0 +1,75 @@
+'use client';
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useMemo } from 'react';
+import { RelationshipTable } from '../../elements/RelationshipTable/index.js';
+import { FieldLabel } from '../../fields/FieldLabel/index.js';
+import { useFieldProps } from '../../forms/FieldPropsProvider/index.js';
+import { useField } from '../../forms/useField/index.js';
+import { withCondition } from '../../forms/withCondition/index.js';
+import { useDocumentInfo } from '../../providers/DocumentInfo/index.js';
+import { fieldBaseClass } from '../index.js';
+const JoinFieldComponent = props => {
+  const {
+    field,
+    field: {
+      name,
+      _path: pathFromProps,
+      admin: {
+        components: {
+          Label
+        }
+      },
+      collection,
+      label,
+      on
+    }
+  } = props;
+  const {
+    id: docID
+  } = useDocumentInfo();
+  const {
+    path: pathFromContext
+  } = useFieldProps();
+  const {
+    value
+  } = useField({
+    path: pathFromContext ?? pathFromProps ?? name
+  });
+  const filterOptions = useMemo(() => ({
+    [on]: {
+      in: [docID || null]
+    }
+  }), [docID, on]);
+  return /*#__PURE__*/_jsx("div", {
+    className: [fieldBaseClass, 'join'].filter(Boolean).join(' '),
+    children: /*#__PURE__*/_jsx(RelationshipTable, {
+      field: field,
+      filterOptions: filterOptions,
+      initialData: docID && value ? value : {
+        docs: []
+      },
+      initialDrawerState: {
+        [on]: {
+          initialValue: docID,
+          valid: true,
+          value: docID
+        }
+      },
+      Label: /*#__PURE__*/_jsx("h4", {
+        style: {
+          margin: 0
+        },
+        children: /*#__PURE__*/_jsx(FieldLabel, {
+          as: "span",
+          field: field,
+          Label: Label,
+          label: label
+        })
+      }),
+      relationTo: collection
+    })
+  });
+};
+export const JoinField = withCondition(JoinFieldComponent);
+//# sourceMappingURL=index.js.map

package/dist/fields/Join/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","useMemo","RelationshipTable","FieldLabel","useFieldProps","useField","withCondition","useDocumentInfo","fieldBaseClass","JoinFieldComponent","props","field","name","_path","pathFromProps","admin","components","Label","collection","label","on","id","docID","path","pathFromContext","value","filterOptions","in","_jsx","className","filter","Boolean","join","initialData","docs","initialDrawerState","initialValue","valid","style","margin","as","relationTo","JoinField"],"sources":["../../../src/fields/Join/index.tsx"],"sourcesContent":["'use client'\n\nimport type { JoinFieldClient, JoinFieldClientComponent, PaginatedDocs, Where } from 'payload'\n\nimport React, { useMemo } from 'react'\n\nimport { RelationshipTable } from '../../elements/RelationshipTable/index.js'\nimport { FieldLabel } from '../../fields/FieldLabel/index.js'\nimport { useFieldProps } from '../../forms/FieldPropsProvider/index.js'\nimport { useField } from '../../forms/useField/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { fieldBaseClass } from '../index.js'\n\nconst JoinFieldComponent: JoinFieldClientComponent = (props) => {\n  const {\n    field,\n    field: {\n      name,\n      _path: pathFromProps,\n      admin: {\n        components: { Label },\n      },\n      collection,\n      label,\n      on,\n    },\n  } = props\n\n  const { id: docID } = useDocumentInfo()\n\n  const { path: pathFromContext } = useFieldProps()\n\n  const { value } = useField<PaginatedDocs>({\n    path: pathFromContext ?? pathFromProps ?? name,\n  })\n\n  const filterOptions: Where = useMemo(\n    () => ({\n      [on]: {\n        in: [docID || null],\n      },\n    }),\n    [docID, on],\n  )\n\n  return (\n    <div className={[fieldBaseClass, 'join'].filter(Boolean).join(' ')}>\n      <RelationshipTable\n        field={field as JoinFieldClient}\n        filterOptions={filterOptions}\n        initialData={docID && value ? value : ({ docs: [] } as PaginatedDocs)}\n        initialDrawerState={{\n          [on]: {\n            initialValue: docID,\n            valid: true,\n            value: docID,\n          },\n        }}\n        Label={\n          <h4 style={{ margin: 0 }}>\n            <FieldLabel as=\"span\" field={field} Label={Label} label={label} />\n          </h4>\n        }\n        relationTo={collection}\n      />\n    </div>\n  )\n}\n\nexport const JoinField = withCondition(JoinFieldComponent)\n"],"mappings":"AAAA;;;AAIA,OAAOA,KAAA,IAASC,OAAO,QAAQ;AAE/B,SAASC,iBAAiB,QAAQ;AAClC,SAASC,UAAU,QAAQ;AAC3B,SAASC,aAAa,QAAQ;AAC9B,SAASC,QAAQ,QAAQ;AACzB,SAASC,aAAa,QAAQ;AAC9B,SAASC,eAAe,QAAQ;AAChC,SAASC,cAAc,QAAQ;AAE/B,MAAMC,kBAAA,GAAgDC,KAAA;EACpD,MAAM;IACJC,KAAK;IACLA,KAAA,EAAO;MACLC,IAAI;MACJC,KAAA,EAAOC,aAAa;MACpBC,KAAA,EAAO;QACLC,UAAA,EAAY;UAAEC;QAAK;MAAE,CACtB;MACDC,UAAU;MACVC,KAAK;MACLC;IAAE;EACH,CACF,GAAGV,KAAA;EAEJ,MAAM;IAAEW,EAAA,EAAIC;EAAK,CAAE,GAAGf,eAAA;EAEtB,MAAM;IAAEgB,IAAA,EAAMC;EAAe,CAAE,GAAGpB,aAAA;EAElC,MAAM;IAAEqB;EAAK,CAAE,GAAGpB,QAAA,CAAwB;IACxCkB,IAAA,EAAMC,eAAA,IAAmBV,aAAA,IAAiBF;EAC5C;EAEA,MAAMc,aAAA,GAAuBzB,OAAA,CAC3B,OAAO;IACL,CAACmB,EAAA,GAAK;MACJO,EAAA,EAAI,CAACL,KAAA,IAAS;IAChB;EACF,IACA,CAACA,KAAA,EAAOF,EAAA,CAAG;EAGb,oBACEQ,IAAA,CAAC;IAAIC,SAAA,EAAW,CAACrB,cAAA,EAAgB,OAAO,CAACsB,MAAM,CAACC,OAAA,EAASC,IAAI,CAAC;cAC5D,aAAAJ,IAAA,CAAC1B,iBAAA;MACCS,KAAA,EAAOA,KAAA;MACPe,aAAA,EAAeA,aAAA;MACfO,WAAA,EAAaX,KAAA,IAASG,KAAA,GAAQA,KAAA,GAAS;QAAES,IAAA,EAAM;MAAG;MAClDC,kBAAA,EAAoB;QAClB,CAACf,EAAA,GAAK;UACJgB,YAAA,EAAcd,KAAA;UACde,KAAA,EAAO;UACPZ,KAAA,EAAOH;QACT;MACF;MACAL,KAAA,eACEW,IAAA,CAAC;QAAGU,KAAA,EAAO;UAAEC,MAAA,EAAQ;QAAE;kBACrB,aAAAX,IAAA,CAACzB,UAAA;UAAWqC,EAAA,EAAG;UAAO7B,KAAA,EAAOA,KAAA;UAAOM,KAAA,EAAOA,KAAA;UAAOE,KAAA,EAAOA;;;MAG7DsB,UAAA,EAAYvB;;;AAIpB;AAEA,OAAO,MAAMwB,SAAA,GAAYpC,aAAA,CAAcG,kBAAA","ignoreList":[]}