@payloadcms/ui 3.0.0-canary.d894ac7 → 3.0.0-canary.dc8b1fe

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

@@ -1,6 +1,11 @@
-import type { ArrayFieldProps } from 'payload';
+import type { ArrayFieldClientComponent } from 'payload';
 import React from 'react';
 import './index.scss';
-export declare const ArrayFieldComponent: React.FC<ArrayFieldProps>;
-export declare const ArrayField: React.FC<ArrayFieldProps>;
+export declare const ArrayFieldComponent: ArrayFieldClientComponent;
+export declare const ArrayField: React.FC<{
+    readonly path?: string;
+    readonly validate?: import("payload").ArrayFieldValidation;
+} & Pick<import("payload").ServerFieldBase, "permissions"> & {
+    readonly field: Omit<import("payload").ArrayFieldClient, "type"> & Partial<Pick<import("payload").ArrayFieldClient, "type">>;
+} & Omit<import("payload").ClientComponentProps, "field" | "customComponents">>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Array/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAgC,MAAM,SAAS,CAAA;AAG5E,OAAO,KAAsB,MAAM,OAAO,CAAA;AAuB1C,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA6TzD,CAAA;AAED,eAAO,MAAM,UAAU,2BAAqC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Array/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,yBAAyB,EAG1B,MAAM,SAAS,CAAA;AAGhB,OAAO,KAAsB,MAAM,OAAO,CAAA;AAuB1C,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,mBAAmB,EAAE,yBA+TjC,CAAA;AAED,eAAO,MAAM,UAAU;;;;;+EAAqC,CAAA"}

package/dist/fields/Array/index.js

@@ -9,7 +9,10 @@ import { Button } from '../../elements/Button/index.js';
 import { DraggableSortableItem } from '../../elements/DraggableSortable/DraggableSortableItem/index.js';
 import { DraggableSortable } from '../../elements/DraggableSortable/index.js';
 import { ErrorPill } from '../../elements/ErrorPill/index.js';
-import { useFieldProps } from '../../forms/FieldPropsProvider/index.js';
+import { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js';
+import { FieldDescription } from '../../fields/FieldDescription/index.js';
+import { FieldError } from '../../fields/FieldError/index.js';
+import { FieldLabel } from '../../fields/FieldLabel/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';
@@ -20,28 +23,23 @@ import { useDocumentInfo } from '../../providers/DocumentInfo/index.js';
 import { useLocale } from '../../providers/Locale/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { scrollToID } from '../../utilities/scrollToID.js';
-import { FieldDescription } from '../FieldDescription/index.js';
-import { FieldError } from '../FieldError/index.js';
-import { FieldLabel } from '../FieldLabel/index.js';
 import { fieldBaseClass } from '../shared/index.js';
 import { ArrayRow } from './ArrayRow.js';
 import './index.scss';
 const baseClass = 'array-field';
 export const ArrayFieldComponent = props => {
-  const $ = _c(58);
+  const $ = _c(55);
   const {
-    descriptionProps,
-    errorProps,
-    field,
     field: t0,
     forceRender: t1,
-    labelProps,
-    readOnly: readOnlyFromTopLevelProps,
+    path: pathFromProps,
+    permissions,
+    readOnly,
+    schemaPath: schemaPathFromProps,
     validate
   } = props;
   const {
     name,
-    _path: pathFromProps,
     admin: t2,
     fields,
     label,
@@ -60,23 +58,13 @@ export const ArrayFieldComponent = props => {
   }
   const {
     className,
-    components: t4,
     description,
-    isSortable: t5,
-    readOnly: readOnlyFromAdmin
+    isSortable: t4
   } = t3;
-  const {
-    RowLabel
-  } = t4;
-  const isSortable = t5 === undefined ? true : t5;
+  const isSortable = t4 === undefined ? true : t4;
   const forceRender = t1 === undefined ? false : t1;
-  const readOnlyFromProps = readOnlyFromTopLevelProps || readOnlyFromAdmin;
-  const {
-    indexPath,
-    path: pathFromContext,
-    permissions,
-    readOnly: readOnlyFromContext
-  } = useFieldProps();
+  const path = pathFromProps ?? name;
+  const schemaPath = schemaPathFromProps ?? name;
   const minRows = minRowsProp ?? required ? 1 : 0;
   const {
     setDocFieldPreferences
@@ -95,27 +83,33 @@ export const ArrayFieldComponent = props => {
     t
   } = useTranslation();
   const {
-    config: t6
+    config: t5
   } = useConfig();
   const {
     localization
-  } = t6;
-  let t7;
+  } = t5;
+  let t6;
   bb0: {
     if (localization && localization.fallback) {
       const defaultLocale = localization.defaultLocale || "en";
-      t7 = locale === defaultLocale;
+      t6 = locale === defaultLocale;
       break bb0;
     }
-    t7 = true;
+    t6 = true;
   }
-  const editingDefaultLocale = t7;
-  let t8;
+  const editingDefaultLocale = t6;
+  let t7;
   if ($[2] !== t) {
-    t8 = p => {
+    t7 = p => {
       if ("labels" in p && p?.labels) {
         return p.labels;
       }
+      if ("labels" in p.field && p.field.labels) {
+        return {
+          plural: p.field.labels?.plural,
+          singular: p.field.labels?.singular
+        };
+      }
       if ("label" in p.field && p.field.label) {
         return {
           plural: undefined,
@@ -128,15 +122,15 @@ export const ArrayFieldComponent = props => {
       };
     };
     $[2] = t;
-    $[3] = t8;
+    $[3] = t7;
   } else {
-    t8 = $[3];
+    t7 = $[3];
   }
-  const getLabels = t8;
+  const getLabels = t7;
   const labels = getLabels(props);
-  let t9;
+  let t8;
   if ($[4] !== editingDefaultLocale || $[5] !== validate || $[6] !== maxRows || $[7] !== minRows || $[8] !== required) {
-    t9 = (value, options) => {
+    t8 = (value, options) => {
       if (!editingDefaultLocale && value === null) {
         return true;
       }
@@ -154,70 +148,79 @@ export const ArrayFieldComponent = props => {
     $[6] = maxRows;
     $[7] = minRows;
     $[8] = required;
-    $[9] = t9;
+    $[9] = t8;
   } else {
-    t9 = $[9];
+    t8 = $[9];
   }
-  const memoizedValidate = t9;
-  const t10 = pathFromContext ?? pathFromProps ?? name;
-  let t11;
-  if ($[10] !== t10 || $[11] !== memoizedValidate) {
-    t11 = {
+  const memoizedValidate = t8;
+  let t9;
+  if ($[10] !== path || $[11] !== memoizedValidate) {
+    t9 = {
       hasRows: true,
-      path: t10,
+      path,
       validate: memoizedValidate
     };
-    $[10] = t10;
+    $[10] = path;
     $[11] = memoizedValidate;
-    $[12] = t11;
+    $[12] = t9;
   } else {
-    t11 = $[12];
+    t9 = $[12];
   }
   const {
+    customComponents: t10,
     errorPaths,
-    formInitializing,
-    formProcessing,
-    path,
-    rows: t12,
-    schemaPath,
+    rows: t11,
     showError,
     valid,
     value: value_0
-  } = useField(t11);
+  } = useField(t9);
+  let t12;
+  if ($[13] !== t10) {
+    t12 = t10 === undefined ? {} : t10;
+    $[13] = t10;
+    $[14] = t12;
+  } else {
+    t12 = $[14];
+  }
+  const {
+    Description,
+    Error,
+    Label,
+    RowLabels
+  } = t12;
   let t13;
-  if ($[13] !== t12) {
-    t13 = t12 === undefined ? [] : t12;
-    $[13] = t12;
-    $[14] = t13;
+  if ($[15] !== t11) {
+    t13 = t11 === undefined ? [] : t11;
+    $[15] = t11;
+    $[16] = t13;
   } else {
-    t13 = $[14];
+    t13 = $[16];
   }
-  const rows = t13;
-  const disabled = readOnlyFromProps || readOnlyFromContext || formProcessing || formInitializing;
+  const rowsData = t13;
   let t14;
-  if ($[15] !== addFieldRow || $[16] !== path || $[17] !== schemaPath || $[18] !== setModified) {
-    t14 = async rowIndex => {
-      await addFieldRow({
+  if ($[17] !== addFieldRow || $[18] !== path || $[19] !== schemaPath || $[20] !== setModified) {
+    t14 = rowIndex => {
+      addFieldRow({
         path,
         rowIndex,
         schemaPath
       });
       setModified(true);
       setTimeout(() => {
-        scrollToID(`${path}-row-${rowIndex + 1}`);
+        scrollToID(`${path}-row-${rowIndex}`);
       }, 0);
     };
-    $[15] = addFieldRow;
-    $[16] = path;
-    $[17] = schemaPath;
-    $[18] = setModified;
-    $[19] = t14;
+    $[17] = addFieldRow;
+    $[18] = path;
+    $[19] = schemaPath;
+    $[20] = setModified;
+    $[21] = t14;
   } else {
-    t14 = $[19];
+    t14 = $[21];
   }
   const addRow = t14;
   let t15;
-  if ($[20] !== dispatchFields || $[21] !== path || $[22] !== setModified) {
+  if ($[22] !== dispatchFields || $[23] !== path || $[24] !== setModified) {
     t15 = rowIndex_0 => {
       dispatchFields({
         type: "DUPLICATE_ROW",
@@ -229,16 +232,16 @@ export const ArrayFieldComponent = props => {
         scrollToID(`${path}-row-${rowIndex_0}`);
       }, 0);
     };
-    $[20] = dispatchFields;
-    $[21] = path;
-    $[22] = setModified;
-    $[23] = t15;
+    $[22] = dispatchFields;
+    $[23] = path;
+    $[24] = setModified;
+    $[25] = t15;
   } else {
-    t15 = $[23];
+    t15 = $[25];
   }
   const duplicateRow = t15;
   let t16;
-  if ($[24] !== dispatchFields || $[25] !== path || $[26] !== setModified) {
+  if ($[26] !== dispatchFields || $[27] !== path || $[28] !== setModified) {
     t16 = rowIndex_1 => {
       dispatchFields({
         type: "REMOVE_ROW",
@@ -247,16 +250,16 @@ export const ArrayFieldComponent = props => {
       });
       setModified(true);
     };
-    $[24] = dispatchFields;
-    $[25] = path;
-    $[26] = setModified;
-    $[27] = t16;
+    $[26] = dispatchFields;
+    $[27] = path;
+    $[28] = setModified;
+    $[29] = t16;
   } else {
-    t16 = $[27];
+    t16 = $[29];
   }
   const removeRow = t16;
   let t17;
-  if ($[28] !== dispatchFields || $[29] !== path || $[30] !== setModified) {
+  if ($[30] !== dispatchFields || $[31] !== path || $[32] !== setModified) {
     t17 = (moveFromIndex, moveToIndex) => {
       dispatchFields({
         type: "MOVE_ROW",
@@ -266,44 +269,44 @@ export const ArrayFieldComponent = props => {
       });
       setModified(true);
     };
-    $[28] = dispatchFields;
-    $[29] = path;
-    $[30] = setModified;
-    $[31] = t17;
+    $[30] = dispatchFields;
+    $[31] = path;
+    $[32] = setModified;
+    $[33] = t17;
   } else {
-    t17 = $[31];
+    t17 = $[33];
   }
   const moveRow = t17;
   let t18;
-  if ($[32] !== rows || $[33] !== dispatchFields || $[34] !== path || $[35] !== setDocFieldPreferences) {
+  if ($[34] !== rowsData || $[35] !== setDocFieldPreferences || $[36] !== path || $[37] !== dispatchFields) {
     t18 = collapsed => {
       const {
         collapsedIDs,
         updatedRows
       } = toggleAllRows({
         collapsed,
-        rows
+        rows: rowsData
+      });
+      setDocFieldPreferences(path, {
+        collapsed: collapsedIDs
       });
       dispatchFields({
         type: "SET_ALL_ROWS_COLLAPSED",
         path,
         updatedRows
       });
-      setDocFieldPreferences(path, {
-        collapsed: collapsedIDs
-      });
     };
-    $[32] = rows;
-    $[33] = dispatchFields;
-    $[34] = path;
+    $[34] = rowsData;
     $[35] = setDocFieldPreferences;
-    $[36] = t18;
+    $[36] = path;
+    $[37] = dispatchFields;
+    $[38] = t18;
   } else {
-    t18 = $[36];
+    t18 = $[38];
   }
   const toggleCollapseAll = t18;
   let t19;
-  if ($[37] !== rows || $[38] !== dispatchFields || $[39] !== path || $[40] !== setDocFieldPreferences) {
+  if ($[39] !== rowsData || $[40] !== dispatchFields || $[41] !== path || $[42] !== setDocFieldPreferences) {
     t19 = (rowID, collapsed_0) => {
       const {
         collapsedIDs: collapsedIDs_0,
@@ -311,7 +314,7 @@ export const ArrayFieldComponent = props => {
       } = extractRowsAndCollapsedIDs({
         collapsed: collapsed_0,
         rowID,
-        rows
+        rows: rowsData
       });
       dispatchFields({
         type: "SET_ROW_COLLAPSED",
@@ -322,75 +325,59 @@ export const ArrayFieldComponent = props => {
         collapsed: collapsedIDs_0
       });
     };
-    $[37] = rows;
-    $[38] = dispatchFields;
-    $[39] = path;
-    $[40] = setDocFieldPreferences;
-    $[41] = t19;
+    $[39] = rowsData;
+    $[40] = dispatchFields;
+    $[41] = path;
+    $[42] = setDocFieldPreferences;
+    $[43] = t19;
   } else {
-    t19 = $[41];
+    t19 = $[43];
   }
   const setCollapse = t19;
-  const hasMaxRows = maxRows && rows.length >= maxRows;
+  const hasMaxRows = maxRows && rowsData.length >= maxRows;
   const fieldErrorCount = errorPaths.length;
   const fieldHasErrors = submitted && errorPaths.length > 0;
-  const showRequired = disabled && rows.length === 0;
-  const showMinRows = rows.length < minRows || required && rows.length === 0;
+  const showRequired = readOnly && rowsData.length === 0;
+  const showMinRows = rowsData.length < minRows || required && rowsData.length === 0;
   const t20 = fieldHasErrors ? `${baseClass}--has-error` : `${baseClass}--has-no-error`;
   let t21;
-  if ($[42] !== className || $[43] !== t20) {
+  if ($[44] !== className || $[45] !== t20) {
     t21 = [fieldBaseClass, baseClass, className, t20].filter(Boolean);
-    $[42] = className;
-    $[43] = t20;
-    $[44] = t21;
+    $[44] = className;
+    $[45] = t20;
+    $[46] = t21;
   } else {
-    t21 = $[44];
+    t21 = $[46];
   }
   let t22;
-  if ($[45] !== showError || $[46] !== field || $[47] !== errorProps || $[48] !== path) {
-    t22 = showError && _jsx(FieldError, {
-      CustomError: field?.admin?.components?.Error,
-      field,
-      path,
-      ...(errorProps || {})
+  if ($[47] !== showError || $[48] !== path || $[49] !== Error) {
+    t22 = showError && _jsx(RenderCustomComponent, {
+      CustomComponent: Error,
+      Fallback: _jsx(FieldError, {
+        path,
+        showError
+      })
     });
-    $[45] = showError;
-    $[46] = field;
-    $[47] = errorProps;
+    $[47] = showError;
     $[48] = path;
-    $[49] = t22;
+    $[49] = Error;
+    $[50] = t22;
   } else {
-    t22 = $[49];
+    t22 = $[50];
   }
   let t23;
-  if ($[50] !== labelProps) {
-    t23 = labelProps || {};
-    $[50] = labelProps;
-    $[51] = t23;
-  } else {
-    t23 = $[51];
-  }
-  let t24;
-  if ($[52] !== fieldHasErrors || $[53] !== fieldErrorCount || $[54] !== i18n) {
-    t24 = fieldHasErrors && fieldErrorCount > 0 && _jsx(ErrorPill, {
+  if ($[51] !== fieldHasErrors || $[52] !== fieldErrorCount || $[53] !== i18n) {
+    t23 = fieldHasErrors && fieldErrorCount > 0 && _jsx(ErrorPill, {
       count: fieldErrorCount,
       i18n,
       withMessage: true
     });
-    $[52] = fieldHasErrors;
-    $[53] = fieldErrorCount;
-    $[54] = i18n;
-    $[55] = t24;
+    $[51] = fieldHasErrors;
+    $[52] = fieldErrorCount;
+    $[53] = i18n;
+    $[54] = t23;
   } else {
-    t24 = $[55];
-  }
-  let t25;
-  if ($[56] !== descriptionProps) {
-    t25 = descriptionProps || {};
-    $[56] = descriptionProps;
-    $[57] = t25;
-  } else {
-    t25 = $[57];
+    t23 = $[54];
   }
   return _jsxs("div", {
     className: t21.join(" "),
@@ -403,17 +390,18 @@ export const ArrayFieldComponent = props => {
           className: `${baseClass}__header-content`,
           children: [_jsx("h3", {
             className: `${baseClass}__title`,
-            children: _jsx(FieldLabel, {
-              Label: field?.admin?.components?.Label,
-              as: "span",
-              field,
-              label,
-              required,
-              unstyled: true,
-              ...t23
+            children: _jsx(RenderCustomComponent, {
+              CustomComponent: Label,
+              Fallback: _jsx(FieldLabel, {
+                as: "span",
+                label,
+                localized,
+                path,
+                required
+              })
             })
-          }), t24]
-        }), rows.length > 0 && _jsxs("ul", {
+          }), t23]
+        }), rowsData?.length > 0 && _jsxs("ul", {
           className: `${baseClass}__header-actions`,
           children: [_jsx("li", {
             children: _jsx("button", {
@@ -431,55 +419,60 @@ export const ArrayFieldComponent = props => {
             })
           })]
         })]
-      }), _jsx(FieldDescription, {
-        Description: field?.admin?.components?.Description,
-        description,
-        field,
-        ...t25
+      }), _jsx(RenderCustomComponent, {
+        CustomComponent: Description,
+        Fallback: _jsx(FieldDescription, {
+          description,
+          path
+        })
       })]
     }), _jsx(NullifyLocaleField, {
       fieldValue: value_0,
       localized,
       path
-    }), (rows.length > 0 || !valid && (showRequired || showMinRows)) && _jsxs(DraggableSortable, {
+    }), (rowsData?.length > 0 || !valid && (showRequired || showMinRows)) && _jsxs(DraggableSortable, {
       className: `${baseClass}__draggable-rows`,
-      ids: rows.map(_temp),
-      onDragEnd: t26 => {
+      ids: rowsData.map(_temp),
+      onDragEnd: t24 => {
         const {
           moveFromIndex: moveFromIndex_0,
           moveToIndex: moveToIndex_0
-        } = t26;
+        } = t24;
         return moveRow(moveFromIndex_0, moveToIndex_0);
       },
-      children: [rows.map((row_0, i) => {
-        const rowErrorCount = errorPaths?.filter(errorPath => errorPath.startsWith(`${path}.${i}.`)).length;
+      children: [rowsData.map((rowData, i) => {
+        const {
+          id: rowID_0
+        } = rowData;
+        const rowPath = `${path}.${i}`;
+        const rowErrorCount = errorPaths?.filter(errorPath => errorPath.startsWith(rowPath + ".")).length;
         return _jsx(DraggableSortableItem, {
-          disabled: disabled || !isSortable,
-          id: row_0.id,
+          disabled: readOnly || !isSortable,
+          id: rowID_0,
           children: draggableSortableItemProps => _jsx(ArrayRow, {
             ...draggableSortableItemProps,
-            RowLabel,
             addRow,
+            CustomRowLabel: RowLabels?.[i],
             duplicateRow,
             errorCount: rowErrorCount,
             fields,
             forceRender,
             hasMaxRows,
-            indexPath,
             isSortable,
             labels,
             moveRow,
-            path,
+            parentPath: path,
+            path: rowPath,
             permissions,
-            readOnly: disabled,
+            readOnly,
             removeRow,
-            row: row_0,
-            rowCount: rows.length,
+            row: rowData,
+            rowCount: rowsData?.length,
             rowIndex: i,
             schemaPath,
             setCollapse
           })
-        }, row_0.id);
+        }, rowID_0);
       }), !valid && _jsxs(React.Fragment, {
         children: [showRequired && _jsx(Banner, {
           children: t("validation:fieldHasNo", {
@@ -493,7 +486,7 @@ export const ArrayFieldComponent = props => {
           })
         })]
       })]
-    }), !disabled && !hasMaxRows && _jsx(Button, {
+    }), !readOnly && !hasMaxRows && _jsx(Button, {
       buttonStyle: "icon-label",
       className: `${baseClass}__add-row`,
       icon: "plus",