@payloadcms/ui 3.0.0-canary.294ea5c → 3.0.0-canary.2d0dd26

package/dist/fields/Blocks/index.js

@@ -11,7 +11,7 @@ import { DraggableSortable } from '../../elements/DraggableSortable/index.js';
 import { DrawerToggler } from '../../elements/Drawer/index.js';
 import { useDrawerSlug } from '../../elements/Drawer/useDrawerSlug.js';
 import { ErrorPill } from '../../elements/ErrorPill/index.js';
-import { useFieldProps } from '../../forms/FieldPropsProvider/index.js';
+import { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js';
 import { useForm, useFormSubmitted } from '../../forms/Form/context.js';
 import { extractRowsAndCollapsedIDs, toggleAllRows } from '../../forms/Form/rowHelpers.js';
 import { NullifyLocaleField } from '../../forms/NullifyField/index.js';
@@ -31,25 +31,22 @@ import { BlocksDrawer } from './BlocksDrawer/index.js';
 import './index.scss';
 const baseClass = 'blocks-field';
 const BlocksFieldComponent = props => {
-  const $ = _c(56);
+  const $ = _c(53);
   const {
     i18n,
     t
   } = useTranslation();
   const {
-    descriptionProps,
-    errorProps,
-    field,
     field: t0,
-    forceRender: t1,
-    labelProps,
-    readOnly: readOnlyFromTopLevelProps,
+    path,
+    permissions,
+    readOnly,
+    schemaPath: schemaPathFromProps,
     validate
   } = props;
   const {
     name,
-    _path: pathFromProps,
-    admin: t2,
+    admin: t1,
     blocks,
     label,
     labels: labelsFromProps,
@@ -58,27 +55,21 @@ const BlocksFieldComponent = props => {
     minRows: minRowsProp,
     required
   } = t0;
-  let t3;
-  if ($[0] !== t2) {
-    t3 = t2 === undefined ? {} : t2;
-    $[0] = t2;
-    $[1] = t3;
+  let t2;
+  if ($[0] !== t1) {
+    t2 = t1 === undefined ? {} : t1;
+    $[0] = t1;
+    $[1] = t2;
   } else {
-    t3 = $[1];
+    t2 = $[1];
   }
   const {
     className,
     description,
-    isSortable: t4,
-    readOnly: readOnlyFromAdmin
-  } = t3;
-  const isSortable = t4 === undefined ? true : t4;
-  const forceRender = t1 === undefined ? false : t1;
-  const readOnlyFromProps = readOnlyFromTopLevelProps || readOnlyFromAdmin;
-  const {
-    indexPath,
-    readOnly: readOnlyFromContext
-  } = useFieldProps();
+    isSortable: t3
+  } = t2;
+  const isSortable = t3 === undefined ? true : t3;
+  const schemaPath = schemaPathFromProps ?? name;
   const minRows = minRowsProp ?? required ? 1 : 0;
   const {
     setDocFieldPreferences
@@ -92,11 +83,11 @@ const BlocksFieldComponent = props => {
     code: locale
   } = useLocale();
   const {
-    config: t5
+    config: t4
   } = useConfig();
   const {
     localization
-  } = t5;
+  } = t4;
   const drawerSlug = useDrawerSlug("blocks-drawer");
   const submitted = useFormSubmitted();
   const labels = {
@@ -104,19 +95,19 @@ const BlocksFieldComponent = props => {
     singular: t("fields:block"),
     ...labelsFromProps
   };
-  let t6;
+  let t5;
   bb0: {
     if (localization && localization.fallback) {
       const defaultLocale = localization.defaultLocale || "en";
-      t6 = locale === defaultLocale;
+      t5 = locale === defaultLocale;
       break bb0;
     }
-    t6 = true;
+    t5 = true;
   }
-  const editingDefaultLocale = t6;
-  let t7;
+  const editingDefaultLocale = t5;
+  let t6;
   if ($[2] !== editingDefaultLocale || $[3] !== validate || $[4] !== maxRows || $[5] !== minRows || $[6] !== required) {
-    t7 = (value, options) => {
+    t6 = (value, options) => {
       if (!editingDefaultLocale && value === null) {
         return true;
       }
@@ -134,77 +125,79 @@ const BlocksFieldComponent = props => {
     $[4] = maxRows;
     $[5] = minRows;
     $[6] = required;
-    $[7] = t7;
+    $[7] = t6;
   } else {
-    t7 = $[7];
+    t6 = $[7];
   }
-  const memoizedValidate = t7;
-  const {
-    path: pathFromContext
-  } = useFieldProps();
-  const t8 = pathFromContext ?? pathFromProps ?? name;
-  let t9;
-  if ($[8] !== t8 || $[9] !== memoizedValidate) {
-    t9 = {
+  const memoizedValidate = t6;
+  let t7;
+  if ($[8] !== path || $[9] !== memoizedValidate) {
+    t7 = {
       hasRows: true,
-      path: t8,
+      path,
       validate: memoizedValidate
     };
-    $[8] = t8;
+    $[8] = path;
     $[9] = memoizedValidate;
-    $[10] = t9;
+    $[10] = t7;
   } else {
-    t9 = $[10];
+    t7 = $[10];
   }
   const {
+    customComponents: t8,
     errorPaths,
-    formInitializing,
-    formProcessing,
-    path,
-    permissions,
-    rows: t10,
-    schemaPath,
+    rows: t9,
     showError,
     valid,
     value: value_0
-  } = useField(t9);
+  } = useField(t7);
+  let t10;
+  if ($[11] !== t8) {
+    t10 = t8 === undefined ? {} : t8;
+    $[11] = t8;
+    $[12] = t10;
+  } else {
+    t10 = $[12];
+  }
+  const {
+    Description,
+    Error,
+    Label
+  } = t10;
   let t11;
-  if ($[11] !== t10) {
-    t11 = t10 === undefined ? [] : t10;
-    $[11] = t10;
-    $[12] = t11;
+  if ($[13] !== t9) {
+    t11 = t9 === undefined ? [] : t9;
+    $[13] = t9;
+    $[14] = t11;
   } else {
-    t11 = $[12];
+    t11 = $[14];
   }
   const rows = t11;
-  const disabled = readOnlyFromProps || readOnlyFromContext || formProcessing || formInitializing;
   let t12;
-  if ($[13] !== addFieldRow || $[14] !== path || $[15] !== schemaPath || $[16] !== setModified) {
-    t12 = async (rowIndex, blockType) => {
-      await addFieldRow({
-        data: {
-          blockType
-        },
+  if ($[15] !== addFieldRow || $[16] !== path || $[17] !== schemaPath || $[18] !== setModified) {
+    t12 = (rowIndex, blockType) => {
+      addFieldRow({
+        blockType,
         path,
         rowIndex,
-        schemaPath: `${schemaPath}.${blockType}`
+        schemaPath
       });
       setModified(true);
       setTimeout(() => {
         scrollToID(`${path}-row-${rowIndex + 1}`);
       }, 0);
     };
-    $[13] = addFieldRow;
-    $[14] = path;
-    $[15] = schemaPath;
-    $[16] = setModified;
-    $[17] = t12;
+    $[15] = addFieldRow;
+    $[16] = path;
+    $[17] = schemaPath;
+    $[18] = setModified;
+    $[19] = t12;
   } else {
-    t12 = $[17];
+    t12 = $[19];
   }
   const addRow = t12;
   let t13;
-  if ($[18] !== dispatchFields || $[19] !== path || $[20] !== setModified) {
+  if ($[20] !== dispatchFields || $[21] !== path || $[22] !== setModified) {
     t13 = rowIndex_0 => {
       dispatchFields({
         type: "DUPLICATE_ROW",
@@ -216,16 +209,16 @@ const BlocksFieldComponent = props => {
         scrollToID(`${path}-row-${rowIndex_0 + 1}`);
       }, 0);
     };
-    $[18] = dispatchFields;
-    $[19] = path;
-    $[20] = setModified;
-    $[21] = t13;
+    $[20] = dispatchFields;
+    $[21] = path;
+    $[22] = setModified;
+    $[23] = t13;
   } else {
-    t13 = $[21];
+    t13 = $[23];
   }
   const duplicateRow = t13;
   let t14;
-  if ($[22] !== dispatchFields || $[23] !== path || $[24] !== setModified) {
+  if ($[24] !== dispatchFields || $[25] !== path || $[26] !== setModified) {
     t14 = rowIndex_1 => {
       dispatchFields({
         type: "REMOVE_ROW",
@@ -234,16 +227,16 @@ const BlocksFieldComponent = props => {
       });
       setModified(true);
     };
-    $[22] = dispatchFields;
-    $[23] = path;
-    $[24] = setModified;
-    $[25] = t14;
+    $[24] = dispatchFields;
+    $[25] = path;
+    $[26] = setModified;
+    $[27] = t14;
   } else {
-    t14 = $[25];
+    t14 = $[27];
   }
   const removeRow = t14;
   let t15;
-  if ($[26] !== dispatchFields || $[27] !== path || $[28] !== setModified) {
+  if ($[28] !== dispatchFields || $[29] !== path || $[30] !== setModified) {
     t15 = (moveFromIndex, moveToIndex) => {
       dispatchFields({
         type: "MOVE_ROW",
@@ -253,16 +246,16 @@ const BlocksFieldComponent = props => {
       });
       setModified(true);
     };
-    $[26] = dispatchFields;
-    $[27] = path;
-    $[28] = setModified;
-    $[29] = t15;
+    $[28] = dispatchFields;
+    $[29] = path;
+    $[30] = setModified;
+    $[31] = t15;
   } else {
-    t15 = $[29];
+    t15 = $[31];
   }
   const moveRow = t15;
   let t16;
-  if ($[30] !== rows || $[31] !== dispatchFields || $[32] !== path || $[33] !== setDocFieldPreferences) {
+  if ($[32] !== rows || $[33] !== dispatchFields || $[34] !== path || $[35] !== setDocFieldPreferences) {
     t16 = collapsed => {
       const {
         collapsedIDs,
@@ -280,17 +273,17 @@ const BlocksFieldComponent = props => {
         collapsed: collapsedIDs
       });
     };
-    $[30] = rows;
-    $[31] = dispatchFields;
-    $[32] = path;
-    $[33] = setDocFieldPreferences;
-    $[34] = t16;
+    $[32] = rows;
+    $[33] = dispatchFields;
+    $[34] = path;
+    $[35] = setDocFieldPreferences;
+    $[36] = t16;
   } else {
-    t16 = $[34];
+    t16 = $[36];
   }
   const toggleCollapseAll = t16;
   let t17;
-  if ($[35] !== rows || $[36] !== dispatchFields || $[37] !== path || $[38] !== setDocFieldPreferences) {
+  if ($[37] !== rows || $[38] !== dispatchFields || $[39] !== path || $[40] !== setDocFieldPreferences) {
     t17 = (rowID, collapsed_0) => {
       const {
         collapsedIDs: collapsedIDs_0,
@@ -309,79 +302,63 @@ const BlocksFieldComponent = props => {
         collapsed: collapsedIDs_0
       });
     };
-    $[35] = rows;
-    $[36] = dispatchFields;
-    $[37] = path;
-    $[38] = setDocFieldPreferences;
-    $[39] = t17;
+    $[37] = rows;
+    $[38] = dispatchFields;
+    $[39] = path;
+    $[40] = setDocFieldPreferences;
+    $[41] = t17;
   } else {
-    t17 = $[39];
+    t17 = $[41];
   }
   const setCollapse = t17;
   const hasMaxRows = maxRows && rows.length >= maxRows;
   const fieldErrorCount = errorPaths.length;
   const fieldHasErrors = submitted && fieldErrorCount + (valid ? 0 : 1) > 0;
   const showMinRows = rows.length < minRows || required && rows.length === 0;
-  const showRequired = disabled && rows.length === 0;
+  const showRequired = readOnly && rows.length === 0;
   const t18 = fieldHasErrors ? `${baseClass}--has-error` : `${baseClass}--has-no-error`;
   let t19;
-  if ($[40] !== className || $[41] !== t18) {
+  if ($[42] !== className || $[43] !== t18) {
     t19 = [fieldBaseClass, baseClass, className, t18].filter(Boolean);
-    $[40] = className;
-    $[41] = t18;
-    $[42] = t19;
+    $[42] = className;
+    $[43] = t18;
+    $[44] = t19;
   } else {
-    t19 = $[42];
+    t19 = $[44];
   }
   let t20;
-  if ($[43] !== showError || $[44] !== field || $[45] !== errorProps || $[46] !== path) {
-    t20 = showError && _jsx(FieldError, {
-      CustomError: field?.admin?.components?.Error,
-      field,
-      path,
-      ...(errorProps || {})
+  if ($[45] !== showError || $[46] !== path || $[47] !== Error) {
+    t20 = showError && _jsx(RenderCustomComponent, {
+      CustomComponent: Error,
+      Fallback: _jsx(FieldError, {
+        path,
+        showError
+      })
     });
-    $[43] = showError;
-    $[44] = field;
-    $[45] = errorProps;
+    $[45] = showError;
     $[46] = path;
-    $[47] = t20;
+    $[47] = Error;
+    $[48] = t20;
   } else {
-    t20 = $[47];
+    t20 = $[48];
   }
   let t21;
-  if ($[48] !== labelProps) {
-    t21 = labelProps || {};
-    $[48] = labelProps;
-    $[49] = t21;
-  } else {
-    t21 = $[49];
-  }
-  let t22;
-  if ($[50] !== fieldHasErrors || $[51] !== fieldErrorCount || $[52] !== i18n) {
-    t22 = fieldHasErrors && fieldErrorCount > 0 && _jsx(ErrorPill, {
+  if ($[49] !== fieldHasErrors || $[50] !== fieldErrorCount || $[51] !== i18n) {
+    t21 = fieldHasErrors && fieldErrorCount > 0 && _jsx(ErrorPill, {
       count: fieldErrorCount,
       i18n,
       withMessage: true
     });
-    $[50] = fieldHasErrors;
-    $[51] = fieldErrorCount;
-    $[52] = i18n;
-    $[53] = t22;
+    $[49] = fieldHasErrors;
+    $[50] = fieldErrorCount;
+    $[51] = i18n;
+    $[52] = t21;
   } else {
-    t22 = $[53];
-  }
-  let t23;
-  if ($[54] !== descriptionProps) {
-    t23 = descriptionProps || {};
-    $[54] = descriptionProps;
-    $[55] = t23;
-  } else {
-    t23 = $[55];
+    t21 = $[52];
   }
   return _jsxs("div", {
     className: t19.join(" "),
-    id: `field-${path.replace(/\./g, "__")}`,
+    id: `field-${path?.replace(/\./g, "__")}`,
     children: [t20, _jsxs("header", {
       className: `${baseClass}__header`,
       children: [_jsxs("div", {
@@ -389,16 +366,16 @@ const BlocksFieldComponent = props => {
         children: [_jsxs("div", {
           className: `${baseClass}__heading-with-error`,
           children: [_jsx("h3", {
-            children: _jsx(FieldLabel, {
-              Label: field?.admin?.components?.Description,
-              as: "span",
-              field,
-              label,
-              required,
-              unstyled: true,
-              ...t21
+            children: _jsx(RenderCustomComponent, {
+              CustomComponent: Label,
+              Fallback: _jsx(FieldLabel, {
+                label,
+                localized,
+                path,
+                required
+              })
             })
-          }), t22]
+          }), t21]
         }), rows.length > 0 && _jsxs("ul", {
           className: `${baseClass}__header-actions`,
           children: [_jsx("li", {
@@ -417,11 +394,12 @@ const BlocksFieldComponent = props => {
             })
           })]
         })]
-      }), _jsx(FieldDescription, {
-        Description: field?.admin?.components?.Description,
-        description,
-        field,
-        ...t23
+      }), _jsx(RenderCustomComponent, {
+        CustomComponent: Description,
+        Fallback: _jsx(FieldDescription, {
+          description,
+          path
+        })
       })]
     }), _jsx(NullifyLocaleField, {
       fieldValue: value_0,
@@ -430,44 +408,46 @@ const BlocksFieldComponent = props => {
     }), (rows.length > 0 || !valid && (showRequired || showMinRows)) && _jsxs(DraggableSortable, {
       className: `${baseClass}__rows`,
       ids: rows.map(_temp),
-      onDragEnd: t24 => {
+      onDragEnd: t22 => {
         const {
           moveFromIndex: moveFromIndex_0,
           moveToIndex: moveToIndex_0
-        } = t24;
+        } = t22;
         return moveRow(moveFromIndex_0, moveToIndex_0);
       },
       children: [rows.map((row_0, i) => {
         const {
           blockType: blockType_0
         } = row_0;
-        const blockToRender = blocks.find(block => block.slug === blockType_0);
-        if (blockToRender) {
-          const rowErrorCount = errorPaths.filter(errorPath => errorPath.startsWith(`${path}.${i}`)).length;
+        const blockConfig = blocks.find(block => block.slug === blockType_0);
+        if (blockConfig) {
+          const rowPath = `${path}.${i}`;
+          const rowErrorCount = errorPaths.filter(errorPath => errorPath.startsWith(rowPath + ".")).length;
           return _jsx(DraggableSortableItem, {
-            disabled: disabled || !isSortable,
+            disabled: readOnly || !isSortable,
             id: row_0.id,
             children: draggableSortableItemProps => _jsx(BlockRow, {
               ...draggableSortableItemProps,
               addRow,
-              block: blockToRender,
+              block: blockConfig,
               blocks,
               duplicateRow,
               errorCount: rowErrorCount,
-              forceRender,
+              fields: blockConfig.fields,
               hasMaxRows,
-              indexPath,
               isSortable,
+              Label,
               labels,
               moveRow,
-              path,
+              parentPath: path,
+              path: rowPath,
               permissions,
-              readOnly: disabled,
+              readOnly,
               removeRow,
               row: row_0,
               rowCount: rows.length,
               rowIndex: i,
-              schemaPath,
+              schemaPath: schemaPath + blockConfig.slug,
               setCollapse
             })
           }, row_0.id);
@@ -486,12 +466,13 @@ const BlocksFieldComponent = props => {
           })
         })]
       })]
-    }), !disabled && !hasMaxRows && _jsxs(Fragment, {
+    }), !hasMaxRows && _jsxs(Fragment, {
       children: [_jsx(DrawerToggler, {
         className: `${baseClass}__drawer-toggler`,
         slug: drawerSlug,
         children: _jsx(Button, {
           buttonStyle: "icon-label",
+          disabled: readOnly,
           el: "span",
           icon: "plus",
           iconPosition: "left",