@payloadcms/ui 3.0.0-canary.b8dd0db → 3.0.0-canary.bb00d64

package/dist/forms/NullifyField/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","Banner","CheckboxField","useConfig","useLocale","useTranslation","NullifyLocaleField","t0","$","fieldValue","localized","path","code","currentLocale","config","t1","localization","checked","setChecked","useState","defaultLocale","t","fallback","hideCheckbox","Array","isArray","length","t2","_jsx","children","field","label","id","replace"],"sources":["../../../src/forms/NullifyField/index.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\n\nimport { Banner } from '../../elements/Banner/index.js'\nimport { CheckboxField } from '../../fields/Checkbox/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useLocale } from '../../providers/Locale/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\n\ntype NullifyLocaleFieldProps = {\n  readonly fieldValue?: [] | null | number\n  readonly localized: boolean\n  readonly path: string\n}\n\nexport const NullifyLocaleField: React.FC<NullifyLocaleFieldProps> = ({\n  fieldValue,\n  localized,\n  path,\n}) => {\n  const { code: currentLocale } = useLocale()\n  const {\n    config: { localization },\n  } = useConfig()\n  const [checked, setChecked] = React.useState<boolean>(typeof fieldValue !== 'number')\n  const defaultLocale =\n    localization && localization.defaultLocale ? localization.defaultLocale : 'en'\n  const { t } = useTranslation()\n\n  if (!localized || currentLocale === defaultLocale || (localization && !localization.fallback)) {\n    // hide when field is not localized or editing default locale or when fallback is disabled\n    return null\n  }\n\n  if (fieldValue) {\n    let hideCheckbox = false\n    if (typeof fieldValue === 'number' && fieldValue > 0) hideCheckbox = true\n    if (Array.isArray(fieldValue) && fieldValue.length > 0) hideCheckbox = true\n\n    if (hideCheckbox) {\n      if (checked) setChecked(false) // uncheck when field has value\n      return null\n    }\n  }\n\n  return (\n    <Banner>\n      <CheckboxField\n        checked={checked}\n        field={{\n          label: t('general:fallbackToDefaultLocale'),\n        }}\n        id={`field-${path.replace(/\\./g, '__')}`}\n        // onToggle={onChange}\n      />\n    </Banner>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAEA,YAAYC,KAAA,MAAW;AAEvB,SAASC,MAAM,QAAQ;AACvB,SAASC,aAAa,QAAQ;AAC9B,SAASC,SAAS,QAAQ;AAC1B,SAASC,SAAS,QAAQ;AAC1B,SAASC,cAAc,QAAQ;AAQ/B,OAAO,MAAMC,kBAAA,GAAwDC,EAAA;EAAA,MAAAC,CAAA,GAAAT,EAAA;EAAC;IAAAU,UAAA;IAAAC,SAAA;IAAAC;EAAA,IAAAJ,EAIrE;EACC;IAAAK,IAAA,EAAAC;EAAA,IAAgCT,SAAA;EAChC;IAAAU,MAAA,EAAAC;EAAA,IAEIZ,SAAA;EADM;IAAAa;EAAA,IAAAD,EAAgB;EAE1B,OAAAE,OAAA,EAAAC,UAAA,IAA8BlB,KAAA,CAAAmB,QAAA,CAAwB,OAAOV,UAAA,KAAe;EAC5E,MAAAW,aAAA,GACEJ,YAAA,IAAgBA,YAAA,CAAAI,aAA0B,GAAGJ,YAAA,CAAAI,aAAA,GAA6B;EAC5E;IAAAC;EAAA,IAAchB,cAAA;EAAA,IAEV,CAACK,SAAA,IAAaG,aAAA,KAAkBO,aAAA,IAAkBJ,YAAA,KAAiBA,YAAA,CAAAM,QAAqB;IAAA;EAAA;EAAA,IAKxFb,UAAA;IACF,IAAAc,YAAA;IAAmB,IACf,OAAOd,UAAA,KAAe,YAAYA,UAAA,IAAa;MAAGc,YAAA,CAAAA,CAAA,CAAAA,IAAA;IAAA;IAAA,IAClDC,KAAA,CAAAC,OAAA,CAAchB,UAAA,KAAeA,UAAA,CAAAiB,MAAA,IAAoB;MAAGH,YAAA,CAAAA,CAAA,CAAAA,IAAA;IAAA;IAAA,IAEpDA,YAAA;MAAA,IACEN,OAAA;QAASC,UAAA,MAAW;MAAA;MAAA;IAAA;EAAA;EAAA,IAAAS,EAAA;EAAA,IAAAnB,CAAA,QAAAa,CAAA,IAAAb,CAAA,QAAAG,IAAA,IAAAH,CAAA,QAAAS,OAAA;IAM1BU,EAAA,GAAAC,IAAA,CAAA3B,MAAA;MAAA4B,QAAA,EACED,IAAA,CAAA1B,aAAA;QAAAe,OAAA;QAAAa,KAAA;UAAAC,KAAA,EAGWV,CAAA,CAAE;QAAA;QAAAW,EAAA,EAEP,SAASrB,IAAA,CAAAsB,OAAA,QAAoB;MAAO,C;;;;;;;;;SAN5CN,E;CAWJ","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","Banner","CheckboxField","useConfig","useLocale","useTranslation","NullifyLocaleField","t0","$","fieldValue","localized","path","code","currentLocale","config","t1","localization","checked","setChecked","useState","defaultLocale","t","fallback","hideCheckbox","Array","isArray","length","t2","_jsx","children","field","name","label","id","replace","indexPath","parentPath","parentSchemaPath","schemaPath"],"sources":["../../../src/forms/NullifyField/index.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\n\nimport { Banner } from '../../elements/Banner/index.js'\nimport { CheckboxField } from '../../fields/Checkbox/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useLocale } from '../../providers/Locale/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\n\ntype NullifyLocaleFieldProps = {\n  readonly fieldValue?: [] | null | number\n  readonly localized: boolean\n  readonly path: string\n}\n\nexport const NullifyLocaleField: React.FC<NullifyLocaleFieldProps> = ({\n  fieldValue,\n  localized,\n  path,\n}) => {\n  const { code: currentLocale } = useLocale()\n  const {\n    config: { localization },\n  } = useConfig()\n  const [checked, setChecked] = React.useState<boolean>(typeof fieldValue !== 'number')\n  const defaultLocale =\n    localization && localization.defaultLocale ? localization.defaultLocale : 'en'\n  const { t } = useTranslation()\n\n  if (!localized || currentLocale === defaultLocale || (localization && !localization.fallback)) {\n    // hide when field is not localized or editing default locale or when fallback is disabled\n    return null\n  }\n\n  if (fieldValue) {\n    let hideCheckbox = false\n    if (typeof fieldValue === 'number' && fieldValue > 0) {\n      hideCheckbox = true\n    }\n    if (Array.isArray(fieldValue) && fieldValue.length > 0) {\n      hideCheckbox = true\n    }\n\n    if (hideCheckbox) {\n      if (checked) {\n        setChecked(false)\n      } // uncheck when field has value\n      return null\n    }\n  }\n\n  return (\n    <Banner>\n      <CheckboxField\n        checked={checked}\n        field={{\n          name: '',\n          label: t('general:fallbackToDefaultLocale'),\n        }}\n        id={`field-${path.replace(/\\./g, '__')}`}\n        indexPath=\"\"\n        parentPath=\"\"\n        parentSchemaPath=\"\"\n        path={path}\n        schemaPath=\"\"\n        // onToggle={onChange}\n      />\n    </Banner>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAEA,YAAYC,KAAA,MAAW;AAEvB,SAASC,MAAM,QAAQ;AACvB,SAASC,aAAa,QAAQ;AAC9B,SAASC,SAAS,QAAQ;AAC1B,SAASC,SAAS,QAAQ;AAC1B,SAASC,cAAc,QAAQ;AAQ/B,OAAO,MAAMC,kBAAA,GAAwDC,EAAA;EAAA,MAAAC,CAAA,GAAAT,EAAA;EAAC;IAAAU,UAAA;IAAAC,SAAA;IAAAC;EAAA,IAAAJ,EAIrE;EACC;IAAAK,IAAA,EAAAC;EAAA,IAAgCT,SAAA;EAChC;IAAAU,MAAA,EAAAC;EAAA,IAEIZ,SAAA;EADM;IAAAa;EAAA,IAAAD,EAAgB;EAE1B,OAAAE,OAAA,EAAAC,UAAA,IAA8BlB,KAAA,CAAAmB,QAAA,CAAwB,OAAOV,UAAA,KAAe;EAC5E,MAAAW,aAAA,GACEJ,YAAA,IAAgBA,YAAA,CAAAI,aAA0B,GAAGJ,YAAA,CAAAI,aAAA,GAA6B;EAC5E;IAAAC;EAAA,IAAchB,cAAA;EAAA,IAEV,CAACK,SAAA,IAAaG,aAAA,KAAkBO,aAAA,IAAkBJ,YAAA,KAAiBA,YAAA,CAAAM,QAAqB;IAAA;EAAA;EAAA,IAKxFb,UAAA;IACF,IAAAc,YAAA;IAAmB,IACf,OAAOd,UAAA,KAAe,YAAYA,UAAA,IAAa;MACjDc,YAAA,CAAAA,CAAA,CAAAA,IAAA;IAAA;IAAA,IAEEC,KAAA,CAAAC,OAAA,CAAchB,UAAA,KAAeA,UAAA,CAAAiB,MAAA,IAAoB;MACnDH,YAAA,CAAAA,CAAA,CAAAA,IAAA;IAAA;IAAA,IAGEA,YAAA;MAAA,IACEN,OAAA;QACFC,UAAA,MAAW;MAAA;MAAA;IAAA;EAAA;EAAA,IAAAS,EAAA;EAAA,IAAAnB,CAAA,QAAAa,CAAA,IAAAb,CAAA,QAAAG,IAAA,IAAAH,CAAA,QAAAS,OAAA;IAOfU,EAAA,GAAAC,IAAA,CAAA3B,MAAA;MAAA4B,QAAA,EACED,IAAA,CAAA1B,aAAA;QAAAe,OAAA;QAAAa,KAAA;UAAAC,IAAA,EAGU;UAAAC,KAAA,EACCX,CAAA,CAAE;QAAA;QAAAY,EAAA,EAEP,SAAStB,IAAA,CAAAuB,OAAA,QAAoB,OAAO;QAAAC,SAAA,EAC9B;QAAAC,UAAA,EACC;QAAAC,gBAAA,EACM;QAAA1B,IAAA;QAAA2B,UAAA,EAEN;MAAA,C;;;;;;;;;SAZfX,E;CAiBJ","ignoreList":[]}

package/dist/forms/RenderFields/RenderField.d.ts

@@ -1,21 +1,9 @@
-import type { ClientField, FieldPermissions } from 'payload';
+import type { ClientComponentProps, ClientField, FieldPermissions } from 'payload';
 import React from 'react';
-type Props = {
-    readonly fieldComponentProps?: {
-        field: ClientField;
-        forceRender?: boolean;
-        readOnly?: boolean;
-    };
-    readonly indexPath?: string;
-    readonly isHidden?: boolean;
-    readonly name?: string;
-    readonly path: string;
-    readonly permissions?: FieldPermissions;
-    readonly schemaPath: string;
-    readonly siblingPermissions: {
-        [fieldName: string]: FieldPermissions;
-    };
-};
-export declare const RenderField: React.FC<Props>;
+type RenderFieldProps = {
+    clientFieldConfig: ClientField;
+    permissions: FieldPermissions;
+} & Pick<ClientComponentProps, 'forceRender' | 'indexPath' | 'parentPath' | 'parentSchemaPath' | 'path' | 'readOnly' | 'schemaPath'>;
+export declare function RenderField({ clientFieldConfig, forceRender, indexPath, parentPath, parentSchemaPath, path, permissions, readOnly, schemaPath, }: RenderFieldProps): string | number | bigint | true | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode>> | React.JSX.Element;
 export {};
 //# sourceMappingURL=RenderField.d.ts.map

package/dist/forms/RenderFields/RenderField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RenderField.d.ts","sourceRoot":"","sources":["../../../src/forms/RenderFields/RenderField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAE5D,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,KAAK,KAAK,GAAG;IACX,QAAQ,CAAC,mBAAmB,CAAC,EAAE;QAC7B,KAAK,EAAE,WAAW,CAAA;QAClB,WAAW,CAAC,EAAE,OAAO,CAAA;QACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;KACnB,CAAA;IACD,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,WAAW,CAAC,EAAE,gBAAgB,CAAA;IACvC,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,kBAAkB,EAAE;QAC3B,CAAC,SAAS,EAAE,MAAM,GAAG,gBAAgB,CAAA;KACtC,CAAA;CACF,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAqFvC,CAAA"}
+{"version":3,"file":"RenderField.d.ts","sourceRoot":"","sources":["../../../src/forms/RenderFields/RenderField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,oBAAoB,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAElF,OAAO,KAAK,MAAM,OAAO,CAAA;AAYzB,KAAK,gBAAgB,GAAG;IACtB,iBAAiB,EAAE,WAAW,CAAA;IAC9B,WAAW,EAAE,gBAAgB,CAAA;CAC9B,GAAG,IAAI,CACN,oBAAoB,EAClB,aAAa,GACb,WAAW,GACX,YAAY,GACZ,kBAAkB,GAClB,MAAM,GACN,UAAU,GACV,YAAY,CACf,CAAA;AAED,wBAAgB,WAAW,CAAC,EAC1B,iBAAiB,EACjB,WAAW,EACX,SAAS,EACT,UAAU,EACV,gBAAgB,EAChB,IAAI,EACJ,WAAW,EACX,QAAQ,EACR,UAAU,GACX,EAAE,gBAAgB,0PAwDlB"}

package/dist/forms/RenderFields/RenderField.js

@@ -1,76 +1,148 @@
 'use client';
 
+import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
+import { ArrayField } from '../../fields/Array/index.js';
+import { BlocksField } from '../../fields/Blocks/index.js';
+import { CollapsibleField } from '../../fields/Collapsible/index.js';
+import { GroupField } from '../../fields/Group/index.js';
 import { HiddenField } from '../../fields/Hidden/index.js';
-import { RenderComponent } from '../../providers/Config/RenderComponent.js';
+import { RowField } from '../../fields/Row/index.js';
+import { TabsField } from '../../fields/Tabs/index.js';
+import { useFormFields } from '../../forms/Form/index.js';
 import { useFieldComponents } from '../../providers/FieldComponents/index.js';
-import { useOperation } from '../../providers/Operation/index.js';
-import { FieldPropsProvider, useFieldProps } from '../FieldPropsProvider/index.js';
-export const RenderField = ({
-  name,
-  fieldComponentProps,
-  indexPath,
-  path: pathFromProps,
-  permissions,
-  schemaPath: schemaPathFromProps,
-  siblingPermissions
-}) => {
-  const fieldComponents = useFieldComponents();
-  const operation = useOperation();
+export function RenderField(t0) {
+  const $ = _c(13);
   const {
-    readOnly: readOnlyFromContext
-  } = useFieldProps();
-  if (!fieldComponents) {
-    return null;
-  }
-  const path = [pathFromProps, name].filter(Boolean).join('.');
-  const schemaPath = [schemaPathFromProps, name].filter(Boolean).join('.');
-  // if the user cannot read the field, then filter it out
-  // this is different from `admin.readOnly` which is executed based on `operation`
-  if (permissions?.read?.permission === false || fieldComponentProps?.field?.admin?.disabled) {
-    return null;
-  }
-  // `admin.readOnly` displays the value but prevents the field from being edited
-  fieldComponentProps.readOnly = fieldComponentProps?.field?.admin?.readOnly;
-  // if parent field is `readOnly: true`, but this field is `readOnly: false`, the field should still be editable
-  if (readOnlyFromContext && fieldComponentProps.readOnly !== false) fieldComponentProps.readOnly = true;
-  // if the user does not have access control to begin with, force it to be read-only
-  if (permissions?.[operation]?.permission === false) {
-    fieldComponentProps.readOnly = true;
+    clientFieldConfig,
+    forceRender,
+    indexPath,
+    parentPath,
+    parentSchemaPath,
+    path,
+    permissions,
+    readOnly,
+    schemaPath
+  } = t0;
+  const fieldComponents = useFieldComponents();
+  let t1;
+  if ($[0] !== path) {
+    t1 = t2 => {
+      const [fields] = t2;
+      return fields && fields?.[path]?.customComponents?.Field;
+    };
+    $[0] = path;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
   }
-  let RenderedField;
-  if (fieldComponentProps?.field?.admin?.components?.Field === null) {
-    return null;
+  const Field = useFormFields(t1);
+  if (Field !== undefined) {
+    return Field || null;
   }
-  // hide from admin if field is `admin.hidden: true`
-  if ('admin' in fieldComponentProps.field && 'hidden' in fieldComponentProps.field.admin && fieldComponentProps.field.admin.hidden) {
-    RenderedField = /*#__PURE__*/_jsx(HiddenField, {
-      field: fieldComponentProps.field,
-      forceRender: fieldComponentProps.forceRender,
-      readOnly: fieldComponentProps.readOnly
-    });
+  let t2;
+  if ($[2] !== forceRender || $[3] !== indexPath || $[4] !== parentPath || $[5] !== parentSchemaPath || $[6] !== path || $[7] !== readOnly || $[8] !== schemaPath || $[9] !== clientFieldConfig || $[10] !== fieldComponents || $[11] !== permissions) {
+    t2 = Symbol.for("react.early_return_sentinel");
+    bb0: {
+      const sharedProps = {
+        forceRender,
+        indexPath,
+        parentPath,
+        parentSchemaPath,
+        path,
+        readOnly,
+        schemaPath
+      };
+      if (clientFieldConfig.admin?.hidden) {
+        t2 = _jsx(HiddenField, {
+          field: clientFieldConfig,
+          ...sharedProps
+        });
+        break bb0;
+      }
+      const DefaultField = fieldComponents?.[clientFieldConfig?.type];
+      switch (clientFieldConfig.type) {
+        case "array":
+          {
+            t2 = _jsx(ArrayField, {
+              ...sharedProps,
+              field: clientFieldConfig,
+              permissions
+            });
+            break bb0;
+          }
+        case "blocks":
+          {
+            t2 = _jsx(BlocksField, {
+              ...sharedProps,
+              field: clientFieldConfig,
+              permissions
+            });
+            break bb0;
+          }
+        case "group":
+          {
+            t2 = _jsx(GroupField, {
+              ...sharedProps,
+              field: clientFieldConfig,
+              permissions
+            });
+            break bb0;
+          }
+        case "tabs":
+          {
+            t2 = _jsx(TabsField, {
+              ...sharedProps,
+              field: clientFieldConfig,
+              permissions
+            });
+            break bb0;
+          }
+        case "row":
+          {
+            t2 = _jsx(RowField, {
+              ...sharedProps,
+              field: clientFieldConfig,
+              permissions
+            });
+            break bb0;
+          }
+        case "collapsible":
+          {
+            t2 = _jsx(CollapsibleField, {
+              ...sharedProps,
+              field: clientFieldConfig,
+              permissions
+            });
+            break bb0;
+          }
+        default:
+          {
+            t2 = DefaultField ? _jsx(DefaultField, {
+              field: clientFieldConfig,
+              ...sharedProps
+            }) : null;
+            break bb0;
+          }
+      }
+    }
+    $[2] = forceRender;
+    $[3] = indexPath;
+    $[4] = parentPath;
+    $[5] = parentSchemaPath;
+    $[6] = path;
+    $[7] = readOnly;
+    $[8] = schemaPath;
+    $[9] = clientFieldConfig;
+    $[10] = fieldComponents;
+    $[11] = permissions;
+    $[12] = t2;
   } else {
-    RenderedField = /*#__PURE__*/_jsx(RenderComponent, {
-      Component: fieldComponents?.[fieldComponentProps?.field?.type],
-      clientProps: {
-        field: fieldComponentProps.field,
-        forceRender: fieldComponentProps.forceRender,
-        readOnly: fieldComponentProps.readOnly
-      },
-      mappedComponent: fieldComponentProps?.field?.admin?.components?.Field
-    });
+    t2 = $[12];
+  }
+  if (t2 !== Symbol.for("react.early_return_sentinel")) {
+    return t2;
   }
-  return /*#__PURE__*/_jsx(FieldPropsProvider, {
-    custom: fieldComponentProps?.field?.admin?.custom,
-    indexPath: indexPath,
-    path: path,
-    permissions: permissions,
-    readOnly: fieldComponentProps.readOnly,
-    schemaPath: schemaPath,
-    siblingPermissions: siblingPermissions,
-    type: fieldComponentProps?.field?.type,
-    children: RenderedField
-  });
-};
+}
 //# sourceMappingURL=RenderField.js.map

package/dist/forms/RenderFields/RenderField.js.map

@@ -1 +1 @@
-{"version":3,"file":"RenderField.js","names":["React","HiddenField","RenderComponent","useFieldComponents","useOperation","FieldPropsProvider","useFieldProps","RenderField","name","fieldComponentProps","indexPath","path","pathFromProps","permissions","schemaPath","schemaPathFromProps","siblingPermissions","fieldComponents","operation","readOnly","readOnlyFromContext","filter","Boolean","join","read","permission","field","admin","disabled","RenderedField","components","Field","hidden","_jsx","forceRender","Component","type","clientProps","mappedComponent","custom"],"sources":["../../../src/forms/RenderFields/RenderField.tsx"],"sourcesContent":["'use client'\n\nimport type { ClientField, FieldPermissions } from 'payload'\n\nimport React from 'react'\n\nimport { HiddenField } from '../../fields/Hidden/index.js'\nimport { RenderComponent } from '../../providers/Config/RenderComponent.js'\nimport { useFieldComponents } from '../../providers/FieldComponents/index.js'\nimport { useOperation } from '../../providers/Operation/index.js'\nimport { FieldPropsProvider, useFieldProps } from '../FieldPropsProvider/index.js'\n\ntype Props = {\n  readonly fieldComponentProps?: {\n    field: ClientField\n    forceRender?: boolean\n    readOnly?: boolean\n  }\n  readonly indexPath?: string\n  readonly isHidden?: boolean\n  readonly name?: string\n  readonly path: string\n  readonly permissions?: FieldPermissions\n  readonly schemaPath: string\n  readonly siblingPermissions: {\n    [fieldName: string]: FieldPermissions\n  }\n}\n\nexport const RenderField: React.FC<Props> = ({\n  name,\n  fieldComponentProps,\n  indexPath,\n  path: pathFromProps,\n  permissions,\n  schemaPath: schemaPathFromProps,\n  siblingPermissions,\n}) => {\n  const fieldComponents = useFieldComponents()\n  const operation = useOperation()\n  const { readOnly: readOnlyFromContext } = useFieldProps()\n\n  if (!fieldComponents) {\n    return null\n  }\n\n  const path = [pathFromProps, name].filter(Boolean).join('.')\n  const schemaPath = [schemaPathFromProps, name].filter(Boolean).join('.')\n\n  // if the user cannot read the field, then filter it out\n  // this is different from `admin.readOnly` which is executed based on `operation`\n  if (permissions?.read?.permission === false || fieldComponentProps?.field?.admin?.disabled) {\n    return null\n  }\n\n  // `admin.readOnly` displays the value but prevents the field from being edited\n  fieldComponentProps.readOnly = fieldComponentProps?.field?.admin?.readOnly\n\n  // if parent field is `readOnly: true`, but this field is `readOnly: false`, the field should still be editable\n  if (readOnlyFromContext && fieldComponentProps.readOnly !== false)\n    fieldComponentProps.readOnly = true\n\n  // if the user does not have access control to begin with, force it to be read-only\n  if (permissions?.[operation]?.permission === false) {\n    fieldComponentProps.readOnly = true\n  }\n\n  let RenderedField: React.ReactElement\n\n  if (fieldComponentProps?.field?.admin?.components?.Field === null) {\n    return null\n  }\n\n  // hide from admin if field is `admin.hidden: true`\n  if (\n    'admin' in fieldComponentProps.field &&\n    'hidden' in fieldComponentProps.field.admin &&\n    fieldComponentProps.field.admin.hidden\n  ) {\n    RenderedField = (\n      <HiddenField\n        field={fieldComponentProps.field}\n        forceRender={fieldComponentProps.forceRender}\n        readOnly={fieldComponentProps.readOnly}\n      />\n    )\n  } else {\n    RenderedField = (\n      <RenderComponent\n        Component={fieldComponents?.[fieldComponentProps?.field?.type]}\n        clientProps={{\n          field: fieldComponentProps.field,\n          forceRender: fieldComponentProps.forceRender,\n          readOnly: fieldComponentProps.readOnly,\n        }}\n        mappedComponent={fieldComponentProps?.field?.admin?.components?.Field}\n      />\n    )\n  }\n\n  return (\n    <FieldPropsProvider\n      custom={fieldComponentProps?.field?.admin?.custom}\n      indexPath={indexPath}\n      path={path}\n      permissions={permissions}\n      readOnly={fieldComponentProps.readOnly}\n      schemaPath={schemaPath}\n      siblingPermissions={siblingPermissions}\n      type={fieldComponentProps?.field?.type}\n    >\n      {RenderedField}\n    </FieldPropsProvider>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"RenderField.js","names":["c","_c","React","ArrayField","BlocksField","CollapsibleField","GroupField","HiddenField","RowField","TabsField","useFormFields","useFieldComponents","RenderField","t0","$","clientFieldConfig","forceRender","indexPath","parentPath","parentSchemaPath","path","permissions","readOnly","schemaPath","fieldComponents","t1","t2","fields","customComponents","Field","undefined","Symbol","for","sharedProps","admin","hidden","_jsx","field","DefaultField","type","bb0"],"sources":["../../../src/forms/RenderFields/RenderField.tsx"],"sourcesContent":["'use client'\n\nimport type { ClientComponentProps, ClientField, FieldPermissions } from 'payload'\n\nimport React from 'react'\n\nimport { ArrayField } from '../../fields/Array/index.js'\nimport { BlocksField } from '../../fields/Blocks/index.js'\nimport { CollapsibleField } from '../../fields/Collapsible/index.js'\nimport { GroupField } from '../../fields/Group/index.js'\nimport { HiddenField } from '../../fields/Hidden/index.js'\nimport { RowField } from '../../fields/Row/index.js'\nimport { TabsField } from '../../fields/Tabs/index.js'\nimport { useFormFields } from '../../forms/Form/index.js'\nimport { useFieldComponents } from '../../providers/FieldComponents/index.js'\n\ntype RenderFieldProps = {\n  clientFieldConfig: ClientField\n  permissions: FieldPermissions\n} & Pick<\n  ClientComponentProps,\n  | 'forceRender'\n  | 'indexPath'\n  | 'parentPath'\n  | 'parentSchemaPath'\n  | 'path'\n  | 'readOnly'\n  | 'schemaPath'\n>\n\nexport function RenderField({\n  clientFieldConfig,\n  forceRender,\n  indexPath,\n  parentPath,\n  parentSchemaPath,\n  path,\n  permissions,\n  readOnly,\n  schemaPath,\n}: RenderFieldProps) {\n  const fieldComponents = useFieldComponents()\n\n  const Field = useFormFields(([fields]) => fields && fields?.[path]?.customComponents?.Field)\n\n  if (Field !== undefined) {\n    return Field || null\n  }\n\n  const sharedProps: Pick<\n    ClientComponentProps,\n    | 'forceRender'\n    | 'indexPath'\n    | 'parentPath'\n    | 'parentSchemaPath'\n    | 'path'\n    | 'readOnly'\n    | 'schemaPath'\n  > = {\n    forceRender,\n    indexPath,\n    parentPath,\n    parentSchemaPath,\n    path,\n    readOnly,\n    schemaPath,\n  }\n\n  if (clientFieldConfig.admin?.hidden) {\n    return <HiddenField field={clientFieldConfig} {...sharedProps} />\n  }\n\n  const DefaultField = fieldComponents?.[clientFieldConfig?.type]\n\n  switch (clientFieldConfig.type) {\n    // named fields with subfields\n    case 'array':\n      return <ArrayField {...sharedProps} field={clientFieldConfig} permissions={permissions} />\n    case 'blocks':\n      return <BlocksField {...sharedProps} field={clientFieldConfig} permissions={permissions} />\n    case 'group':\n      return <GroupField {...sharedProps} field={clientFieldConfig} permissions={permissions} />\n    case 'tabs':\n      return <TabsField {...sharedProps} field={clientFieldConfig} permissions={permissions} />\n\n    // unnamed fields with subfields\n    case 'row':\n      return <RowField {...sharedProps} field={clientFieldConfig} permissions={permissions} />\n    case 'collapsible':\n      return (\n        <CollapsibleField {...sharedProps} field={clientFieldConfig} permissions={permissions} />\n      )\n\n    default:\n      return DefaultField ? <DefaultField field={clientFieldConfig} {...sharedProps} /> : null\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/forms/RenderFields/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/forms/RenderFields/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAKvC,OAAO,cAAc,CAAA;AAIrB,OAAO,EAAE,KAAK,EAAE,CAAA;AAEhB,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAqExC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/forms/RenderFields/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAIvC,OAAO,cAAc,CAAA;AAKrB,OAAO,EAAE,KAAK,EAAE,CAAA;AAEhB,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAiGxC,CAAA"}

package/dist/forms/RenderFields/index.js

@@ -2,123 +2,115 @@
 
 import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { getFieldPaths } from 'payload/shared';
 import React from 'react';
-import { useIntersect } from '../../hooks/useIntersect.js';
-import { useTranslation } from '../../providers/Translation/index.js';
-import { RenderField } from './RenderField.js';
+import { RenderIfInViewport } from '../../elements/RenderIfInViewport/index.js';
+import { useOperation } from '../../providers/Operation/index.js';
 import './index.scss';
+import { RenderField } from './RenderField.js';
 const baseClass = 'render-fields';
 export const RenderFields = props => {
-  const $ = _c(21);
+  const $ = _c(22);
   const {
     className,
     fields,
     forceRender,
-    indexPath,
     margins,
-    path,
+    parentIndexPath,
+    parentPath,
+    parentSchemaPath,
     permissions,
-    schemaPath
+    readOnly: readOnlyFromParent
   } = props;
-  const {
-    i18n
-  } = useTranslation();
-  const [hasRendered, setHasRendered] = React.useState(Boolean(forceRender));
-  let t0;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t0 = {
-      rootMargin: "1000px"
-    };
-    $[0] = t0;
-  } else {
-    t0 = $[0];
-  }
-  const [intersectionRef, entry] = useIntersect(t0, Boolean(forceRender));
-  const isIntersecting = Boolean(entry?.isIntersecting);
-  const isAboveViewport = entry?.boundingClientRect?.top < 0;
-  const shouldRender = forceRender || isIntersecting || isAboveViewport;
-  let t1;
-  let t2;
-  if ($[1] !== shouldRender || $[2] !== hasRendered) {
-    t1 = () => {
-      if (shouldRender && !hasRendered) {
-        setHasRendered(true);
-      }
-    };
-    t2 = [shouldRender, hasRendered];
-    $[1] = shouldRender;
-    $[2] = hasRendered;
-    $[3] = t1;
-    $[4] = t2;
-  } else {
-    t1 = $[3];
-    t2 = $[4];
-  }
-  React.useEffect(t1, t2);
-  if (!fields || Array.isArray(fields) && fields.length === 0) {
-    return null;
-  }
-  if (!i18n) {
-    console.error("Need to implement i18n when calling RenderFields");
-  }
-  if (fields) {
-    const t3 = margins && `${baseClass}--margins-${margins}`;
-    const t4 = margins === false && `${baseClass}--margins-none`;
-    let t5;
-    if ($[5] !== className || $[6] !== t3 || $[7] !== t4) {
-      t5 = [baseClass, className, t3, t4].filter(Boolean);
-      $[5] = className;
-      $[6] = t3;
-      $[7] = t4;
-      $[8] = t5;
+  const operation = useOperation();
+  if (fields && fields.length > 0) {
+    const t0 = margins && `${baseClass}--margins-${margins}`;
+    const t1 = margins === false && `${baseClass}--margins-none`;
+    let t2;
+    if ($[0] !== className || $[1] !== t0 || $[2] !== t1) {
+      t2 = [baseClass, className, t0, t1].filter(Boolean);
+      $[0] = className;
+      $[1] = t0;
+      $[2] = t1;
+      $[3] = t2;
     } else {
-      t5 = $[8];
+      t2 = $[3];
     }
-    const t6 = t5.join(" ");
-    let t7;
-    if ($[9] !== hasRendered || $[10] !== fields || $[11] !== forceRender || $[12] !== indexPath || $[13] !== path || $[14] !== permissions || $[15] !== schemaPath) {
-      t7 = hasRendered && fields?.map((field, fieldIndex) => {
-        const forceRenderChildren = typeof forceRender === "number" && fieldIndex <= forceRender || true;
-        const name = "name" in field ? field.name : undefined;
-        return _jsx(RenderField, {
-          fieldComponentProps: {
+    const t3 = t2.join(" ");
+    let t4;
+    if ($[4] !== permissions || $[5] !== readOnlyFromParent || $[6] !== operation || $[7] !== parentIndexPath || $[8] !== parentPath || $[9] !== parentSchemaPath || $[10] !== forceRender || $[11] !== fields || $[12] !== t3) {
+      let t5;
+      if ($[14] !== permissions || $[15] !== readOnlyFromParent || $[16] !== operation || $[17] !== parentIndexPath || $[18] !== parentPath || $[19] !== parentSchemaPath || $[20] !== forceRender) {
+        t5 = (field, i) => {
+          if (!field || field?.admin?.disabled) {
+            return null;
+          }
+          const fieldPermissions = "name" in field ? permissions?.[field.name] : permissions;
+          const lacksReadPermission = fieldPermissions && "read" in fieldPermissions && "permission" in fieldPermissions.read && fieldPermissions?.read?.permission === false;
+          if (lacksReadPermission) {
+            return null;
+          }
+          let isReadOnly = readOnlyFromParent || field?.admin?.readOnly;
+          if (isReadOnly && field.admin?.readOnly === false) {
+            isReadOnly = false;
+          }
+          const lacksOperationPermission = fieldPermissions && operation in fieldPermissions && "permission" in fieldPermissions[operation] && fieldPermissions[operation]?.permission === false;
+          if (lacksOperationPermission) {
+            isReadOnly = true;
+          }
+          const {
+            indexPath,
+            path,
+            schemaPath
+          } = getFieldPaths({
             field,
-            forceRender: forceRenderChildren
-          },
-          indexPath: indexPath !== undefined ? `${indexPath}.${fieldIndex}` : `${fieldIndex}`,
-          name,
-          path,
-          permissions: permissions?.[name],
-          schemaPath,
-          siblingPermissions: permissions
-        }, fieldIndex);
-      });
-      $[9] = hasRendered;
-      $[10] = fields;
-      $[11] = forceRender;
-      $[12] = indexPath;
-      $[13] = path;
-      $[14] = permissions;
-      $[15] = schemaPath;
-      $[16] = t7;
-    } else {
-      t7 = $[16];
-    }
-    let t8;
-    if ($[17] !== t6 || $[18] !== intersectionRef || $[19] !== t7) {
-      t8 = _jsx("div", {
-        className: t6,
-        ref: intersectionRef,
-        children: t7
+            index: i,
+            parentIndexPath,
+            parentPath,
+            parentSchemaPath
+          });
+          return _jsx(RenderField, {
+            clientFieldConfig: field,
+            forceRender,
+            indexPath,
+            parentPath,
+            parentSchemaPath,
+            path,
+            permissions: fieldPermissions,
+            readOnly: isReadOnly,
+            schemaPath
+          }, `${path}-${i}`);
+        };
+        $[14] = permissions;
+        $[15] = readOnlyFromParent;
+        $[16] = operation;
+        $[17] = parentIndexPath;
+        $[18] = parentPath;
+        $[19] = parentSchemaPath;
+        $[20] = forceRender;
+        $[21] = t5;
+      } else {
+        t5 = $[21];
+      }
+      t4 = _jsx(RenderIfInViewport, {
+        className: t3,
+        forceRender,
+        children: fields.map(t5)
       });
-      $[17] = t6;
-      $[18] = intersectionRef;
-      $[19] = t7;
-      $[20] = t8;
+      $[4] = permissions;
+      $[5] = readOnlyFromParent;
+      $[6] = operation;
+      $[7] = parentIndexPath;
+      $[8] = parentPath;
+      $[9] = parentSchemaPath;
+      $[10] = forceRender;
+      $[11] = fields;
+      $[12] = t3;
+      $[13] = t4;
     } else {
-      t8 = $[20];
+      t4 = $[13];
     }
-    return t8;
+    return t4;
   }
   return null;
 };

package/dist/forms/RenderFields/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","useIntersect","useTranslation","RenderField","baseClass","RenderFields","props","$","className","fields","forceRender","indexPath","margins","path","permissions","schemaPath","i18n","hasRendered","setHasRendered","useState","Boolean","t0","Symbol","for","rootMargin","intersectionRef","entry","isIntersecting","isAboveViewport","boundingClientRect","top","shouldRender","t1","t2","useEffect","Array","isArray","length","console","error","t3","t4","t5","filter","t6","join","t7","map","field","fieldIndex","forceRenderChildren","name","undefined","_jsx","fieldComponentProps","siblingPermissions","t8","ref","children"],"sources":["../../../src/forms/RenderFields/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport type { Props } from './types.js'\n\nimport { useIntersect } from '../../hooks/useIntersect.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { RenderField } from './RenderField.js'\nimport './index.scss'\n\nconst baseClass = 'render-fields'\n\nexport { Props }\n\nexport const RenderFields: React.FC<Props> = (props) => {\n  const { className, fields, forceRender, indexPath, margins, path, permissions, schemaPath } =\n    props\n\n  const { i18n } = useTranslation()\n  const [hasRendered, setHasRendered] = React.useState(Boolean(forceRender))\n  const [intersectionRef, entry] = useIntersect(\n    {\n      rootMargin: '1000px',\n    },\n    Boolean(forceRender),\n  )\n\n  const isIntersecting = Boolean(entry?.isIntersecting)\n  const isAboveViewport = entry?.boundingClientRect?.top < 0\n  const shouldRender = forceRender || isIntersecting || isAboveViewport\n\n  React.useEffect(() => {\n    if (shouldRender && !hasRendered) {\n      setHasRendered(true)\n    }\n  }, [shouldRender, hasRendered])\n\n  if (!fields || (Array.isArray(fields) && fields.length === 0)) {\n    return null\n  }\n\n  if (!i18n) {\n    console.error('Need to implement i18n when calling RenderFields') // eslint-disable-line no-console\n  }\n\n  if (fields) {\n    return (\n      <div\n        className={[\n          baseClass,\n          className,\n          margins && `${baseClass}--margins-${margins}`,\n          margins === false && `${baseClass}--margins-none`,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        ref={intersectionRef}\n      >\n        {hasRendered &&\n          fields?.map((field, fieldIndex) => {\n            const forceRenderChildren =\n              (typeof forceRender === 'number' && fieldIndex <= forceRender) || true\n\n            const name = 'name' in field ? field.name : undefined\n\n            return (\n              <RenderField\n                fieldComponentProps={{ field, forceRender: forceRenderChildren }}\n                indexPath={indexPath !== undefined ? `${indexPath}.${fieldIndex}` : `${fieldIndex}`}\n                key={fieldIndex}\n                name={name}\n                path={path}\n                permissions={permissions?.[name]}\n                schemaPath={schemaPath}\n                siblingPermissions={permissions}\n              />\n            )\n          })}\n      </div>\n    )\n  }\n\n  return null\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","getFieldPaths","React","RenderIfInViewport","useOperation","RenderField","baseClass","RenderFields","props","$","className","fields","forceRender","margins","parentIndexPath","parentPath","parentSchemaPath","permissions","readOnly","readOnlyFromParent","operation","length","t0","t1","t2","filter","Boolean","t3","join","t4","t5","field","i","admin","disabled","fieldPermissions","name","lacksReadPermission","read","permission","isReadOnly","lacksOperationPermission","indexPath","path","schemaPath","index","_jsx","clientFieldConfig","children","map"],"sources":["../../../src/forms/RenderFields/index.tsx"],"sourcesContent":["'use client'\n\nimport type { FieldPermissions } from 'payload'\n\nimport { getFieldPaths } from 'payload/shared'\nimport React from 'react'\n\nimport type { Props } from './types.js'\n\nimport { RenderIfInViewport } from '../../elements/RenderIfInViewport/index.js'\nimport { useOperation } from '../../providers/Operation/index.js'\nimport './index.scss'\nimport { RenderField } from './RenderField.js'\n\nconst baseClass = 'render-fields'\n\nexport { Props }\n\nexport const RenderFields: React.FC<Props> = (props) => {\n  const {\n    className,\n    fields,\n    forceRender,\n    margins,\n    parentIndexPath,\n    parentPath,\n    parentSchemaPath,\n    permissions,\n    readOnly: readOnlyFromParent,\n  } = props\n\n  const operation = useOperation()\n\n  if (fields && fields.length > 0) {\n    return (\n      <RenderIfInViewport\n        className={[\n          baseClass,\n          className,\n          margins && `${baseClass}--margins-${margins}`,\n          margins === false && `${baseClass}--margins-none`,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        forceRender={forceRender}\n      >\n        {fields.map((field, i) => {\n          // For sidebar fields in the main fields array, `field` will be `null`, and visa versa\n          // This is to keep the order of the fields consistent and maintain the correct index paths for the main fields (i)\n          if (!field || field?.admin?.disabled) {\n            return null\n          }\n\n          const fieldPermissions: FieldPermissions =\n            'name' in field ? permissions?.[field.name] : permissions\n\n          // If the user cannot read the field, then filter it out\n          // This is different from `admin.readOnly` which is executed based on `operation`\n          const lacksReadPermission =\n            fieldPermissions &&\n            'read' in fieldPermissions &&\n            'permission' in fieldPermissions.read &&\n            fieldPermissions?.read?.permission === false\n\n          if (lacksReadPermission) {\n            return null\n          }\n\n          // `admin.readOnly` displays the value but prevents the field from being edited\n          let isReadOnly = readOnlyFromParent || field?.admin?.readOnly\n\n          // If parent field is `readOnly: true`, but this field is `readOnly: false`, the field should still be editable\n          if (isReadOnly && field.admin?.readOnly === false) {\n            isReadOnly = false\n          }\n\n          // If the user does not have access control to begin with, force it to be read-only\n          const lacksOperationPermission =\n            fieldPermissions &&\n            operation in fieldPermissions &&\n            'permission' in fieldPermissions[operation] &&\n            fieldPermissions[operation]?.permission === false\n\n          if (lacksOperationPermission) {\n            isReadOnly = true\n          }\n\n          const { indexPath, path, schemaPath } = getFieldPaths({\n            field,\n            index: i,\n            parentIndexPath,\n            parentPath,\n            parentSchemaPath,\n          })\n\n          return (\n            <RenderField\n              clientFieldConfig={field}\n              forceRender={forceRender}\n              indexPath={indexPath}\n              key={`${path}-${i}`}\n              parentPath={parentPath}\n              parentSchemaPath={parentSchemaPath}\n              path={path}\n              permissions={fieldPermissions}\n              readOnly={isReadOnly}\n              schemaPath={schemaPath}\n            />\n          )\n        })}\n      </RenderIfInViewport>\n    )\n  }\n\n  return null\n}\n"],"mappings":"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","ignoreList":[]}