@payloadcms/ui 3.0.0-canary.c27a334 → 3.0.0-canary.c96fa61

package/dist/fields/Array/index.js

@@ -1,4 +1,6 @@
 'use client';
+
+import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getTranslation } from '@payloadcms/translations';
 import React, { useCallback } from 'react';
@@ -7,11 +9,12 @@ 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 { FieldDescription } from '../../forms/FieldDescription/index.js';
-import { FieldError } from '../../forms/FieldError/index.js';
-import { FieldLabel } from '../../forms/FieldLabel/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';
 import { useField } from '../../forms/useField/index.js';
 import { withCondition } from '../../forms/withCondition/index.js';
@@ -22,292 +25,484 @@ import { useTranslation } from '../../providers/Translation/index.js';
 import { scrollToID } from '../../utilities/scrollToID.js';
 import { fieldBaseClass } from '../shared/index.js';
 import { ArrayRow } from './ArrayRow.js';
+import './index.scss';
 const baseClass = 'array-field';
-export const _ArrayField = (props)=>{
-    const { name, CustomDescription, CustomError, CustomLabel, CustomRowLabel, className, descriptionProps, errorProps, fieldMap, forceRender = false, isSortable = true, label, labelProps, localized, maxRows, minRows: minRowsProp, path: pathFromProps, permissions, readOnly: readOnlyFromProps, required, validate } = props;
-    const { indexPath, readOnly: readOnlyFromContext } = useFieldProps();
-    const minRows = minRowsProp ?? required ? 1 : 0;
-    const { setDocFieldPreferences } = useDocumentInfo();
-    const { addFieldRow, dispatchFields, setModified } = useForm();
-    const submitted = useFormSubmitted();
-    const { code: locale } = useLocale();
-    const { i18n, t } = useTranslation();
-    const { localization } = useConfig();
-    const editingDefaultLocale = (()=>{
-        if (localization && localization.fallback) {
-            const defaultLocale = localization.defaultLocale || 'en';
-            return locale === defaultLocale;
-        }
-        return true;
-    })();
-    // Handle labeling for Arrays, Global Arrays, and Blocks
-    const getLabels = (p)=>{
-        if ('labels' in p && p?.labels) return p.labels;
-        if ('label' in p && p?.label) return {
-            plural: undefined,
-            singular: p?.label
+export const ArrayFieldComponent = props => {
+  const $ = _c(55);
+  const {
+    field: t0,
+    forceRender: t1,
+    path: pathFromProps,
+    permissions,
+    readOnly,
+    schemaPath: schemaPathFromProps,
+    validate
+  } = props;
+  const {
+    name,
+    admin: t2,
+    fields,
+    label,
+    localized,
+    maxRows,
+    minRows: minRowsProp,
+    required
+  } = t0;
+  let t3;
+  if ($[0] !== t2) {
+    t3 = t2 === undefined ? {} : t2;
+    $[0] = t2;
+    $[1] = t3;
+  } else {
+    t3 = $[1];
+  }
+  const {
+    className,
+    description,
+    isSortable: t4
+  } = t3;
+  const isSortable = t4 === undefined ? true : t4;
+  const forceRender = t1 === undefined ? false : t1;
+  const path = pathFromProps ?? name;
+  const schemaPath = schemaPathFromProps ?? name;
+  const minRows = minRowsProp ?? required ? 1 : 0;
+  const {
+    setDocFieldPreferences
+  } = useDocumentInfo();
+  const {
+    addFieldRow,
+    dispatchFields,
+    setModified
+  } = useForm();
+  const submitted = useFormSubmitted();
+  const {
+    code: locale
+  } = useLocale();
+  const {
+    i18n,
+    t
+  } = useTranslation();
+  const {
+    config: t5
+  } = useConfig();
+  const {
+    localization
+  } = t5;
+  let t6;
+  bb0: {
+    if (localization && localization.fallback) {
+      const defaultLocale = localization.defaultLocale || "en";
+      t6 = locale === defaultLocale;
+      break bb0;
+    }
+    t6 = true;
+  }
+  const editingDefaultLocale = t6;
+  let t7;
+  if ($[2] !== t) {
+    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: t('general:rows'),
-            singular: t('general:row')
+          plural: undefined,
+          singular: p.field.label
         };
+      }
+      return {
+        plural: t("general:rows"),
+        singular: t("general:row")
+      };
     };
-    const labels = getLabels(props);
-    const memoizedValidate = useCallback((value, options)=>{
-        // alternative locales can be null
-        if (!editingDefaultLocale && value === null) {
-            return true;
-        }
-        if (typeof validate === 'function') {
-            return validate(value, {
-                ...options,
-                maxRows,
-                minRows,
-                required
-            });
-        }
-    }, [
-        maxRows,
-        minRows,
-        required,
-        validate,
-        editingDefaultLocale
-    ]);
-    const { path: pathFromContext } = useFieldProps();
-    const { errorPaths, formInitializing, formProcessing, path, rows = [], schemaPath, showError, valid, value } = useField({
-        hasRows: true,
-        path: pathFromContext || pathFromProps || name,
-        validate: memoizedValidate
-    });
-    const disabled = readOnlyFromProps || readOnlyFromContext || formProcessing || formInitializing;
-    const addRow = useCallback(async (rowIndex)=>{
-        await addFieldRow({
-            path,
-            rowIndex,
-            schemaPath
+    $[2] = t;
+    $[3] = t7;
+  } else {
+    t7 = $[3];
+  }
+  const getLabels = t7;
+  const labels = getLabels(props);
+  let t8;
+  if ($[4] !== editingDefaultLocale || $[5] !== validate || $[6] !== maxRows || $[7] !== minRows || $[8] !== required) {
+    t8 = (value, options) => {
+      if (!editingDefaultLocale && value === null) {
+        return true;
+      }
+      if (typeof validate === "function") {
+        return validate(value, {
+          ...options,
+          maxRows,
+          minRows,
+          required
         });
-        setModified(true);
-        setTimeout(()=>{
-            scrollToID(`${path}-row-${rowIndex + 1}`);
-        }, 0);
-    }, [
-        addFieldRow,
+      }
+    };
+    $[4] = editingDefaultLocale;
+    $[5] = validate;
+    $[6] = maxRows;
+    $[7] = minRows;
+    $[8] = required;
+    $[9] = t8;
+  } else {
+    t8 = $[9];
+  }
+  const memoizedValidate = t8;
+  let t9;
+  if ($[10] !== path || $[11] !== memoizedValidate) {
+    t9 = {
+      hasRows: true,
+      path,
+      validate: memoizedValidate
+    };
+    $[10] = path;
+    $[11] = memoizedValidate;
+    $[12] = t9;
+  } else {
+    t9 = $[12];
+  }
+  const {
+    customComponents: t10,
+    errorPaths,
+    rows: t11,
+    showError,
+    valid,
+    value: value_0
+  } = 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 ($[15] !== t11) {
+    t13 = t11 === undefined ? [] : t11;
+    $[15] = t11;
+    $[16] = t13;
+  } else {
+    t13 = $[16];
+  }
+  const rowsData = t13;
+  let t14;
+  if ($[17] !== addFieldRow || $[18] !== path || $[19] !== schemaPath || $[20] !== setModified) {
+    t14 = rowIndex => {
+      addFieldRow({
         path,
-        setModified,
+        rowIndex,
         schemaPath
-    ]);
-    const duplicateRow = useCallback((rowIndex)=>{
-        dispatchFields({
-            type: 'DUPLICATE_ROW',
-            path,
-            rowIndex
-        });
-        setModified(true);
-        setTimeout(()=>{
-            scrollToID(`${path}-row-${rowIndex}`);
-        }, 0);
-    }, [
-        dispatchFields,
+      });
+      setModified(true);
+      setTimeout(() => {
+        scrollToID(`${path}-row-${rowIndex}`);
+      }, 0);
+    };
+    $[17] = addFieldRow;
+    $[18] = path;
+    $[19] = schemaPath;
+    $[20] = setModified;
+    $[21] = t14;
+  } else {
+    t14 = $[21];
+  }
+  const addRow = t14;
+  let t15;
+  if ($[22] !== dispatchFields || $[23] !== path || $[24] !== setModified) {
+    t15 = rowIndex_0 => {
+      dispatchFields({
+        type: "DUPLICATE_ROW",
         path,
-        setModified
-    ]);
-    const removeRow = useCallback((rowIndex)=>{
-        dispatchFields({
-            type: 'REMOVE_ROW',
-            path,
-            rowIndex
-        });
-        setModified(true);
-    }, [
-        dispatchFields,
+        rowIndex: rowIndex_0
+      });
+      setModified(true);
+      setTimeout(() => {
+        scrollToID(`${path}-row-${rowIndex_0}`);
+      }, 0);
+    };
+    $[22] = dispatchFields;
+    $[23] = path;
+    $[24] = setModified;
+    $[25] = t15;
+  } else {
+    t15 = $[25];
+  }
+  const duplicateRow = t15;
+  let t16;
+  if ($[26] !== dispatchFields || $[27] !== path || $[28] !== setModified) {
+    t16 = rowIndex_1 => {
+      dispatchFields({
+        type: "REMOVE_ROW",
         path,
-        setModified
-    ]);
-    const moveRow = useCallback((moveFromIndex, moveToIndex)=>{
-        dispatchFields({
-            type: 'MOVE_ROW',
-            moveFromIndex,
-            moveToIndex,
-            path
-        });
-        setModified(true);
-    }, [
-        dispatchFields,
+        rowIndex: rowIndex_1
+      });
+      setModified(true);
+    };
+    $[26] = dispatchFields;
+    $[27] = path;
+    $[28] = setModified;
+    $[29] = t16;
+  } else {
+    t16 = $[29];
+  }
+  const removeRow = t16;
+  let t17;
+  if ($[30] !== dispatchFields || $[31] !== path || $[32] !== setModified) {
+    t17 = (moveFromIndex, moveToIndex) => {
+      dispatchFields({
+        type: "MOVE_ROW",
+        moveFromIndex,
+        moveToIndex,
+        path
+      });
+      setModified(true);
+    };
+    $[30] = dispatchFields;
+    $[31] = path;
+    $[32] = setModified;
+    $[33] = t17;
+  } else {
+    t17 = $[33];
+  }
+  const moveRow = t17;
+  let t18;
+  if ($[34] !== rowsData || $[35] !== setDocFieldPreferences || $[36] !== path || $[37] !== dispatchFields) {
+    t18 = collapsed => {
+      const {
+        collapsedIDs,
+        updatedRows
+      } = toggleAllRows({
+        collapsed,
+        rows: rowsData
+      });
+      setDocFieldPreferences(path, {
+        collapsed: collapsedIDs
+      });
+      dispatchFields({
+        type: "SET_ALL_ROWS_COLLAPSED",
         path,
-        setModified
-    ]);
-    const toggleCollapseAll = useCallback((collapsed)=>{
-        dispatchFields({
-            type: 'SET_ALL_ROWS_COLLAPSED',
-            collapsed,
-            path,
-            setDocFieldPreferences
-        });
-    }, [
-        dispatchFields,
+        updatedRows
+      });
+    };
+    $[34] = rowsData;
+    $[35] = setDocFieldPreferences;
+    $[36] = path;
+    $[37] = dispatchFields;
+    $[38] = t18;
+  } else {
+    t18 = $[38];
+  }
+  const toggleCollapseAll = t18;
+  let t19;
+  if ($[39] !== rowsData || $[40] !== dispatchFields || $[41] !== path || $[42] !== setDocFieldPreferences) {
+    t19 = (rowID, collapsed_0) => {
+      const {
+        collapsedIDs: collapsedIDs_0,
+        updatedRows: updatedRows_0
+      } = extractRowsAndCollapsedIDs({
+        collapsed: collapsed_0,
+        rowID,
+        rows: rowsData
+      });
+      dispatchFields({
+        type: "SET_ROW_COLLAPSED",
         path,
-        setDocFieldPreferences
-    ]);
-    const setCollapse = useCallback((rowID, collapsed)=>{
-        dispatchFields({
-            type: 'SET_ROW_COLLAPSED',
-            collapsed,
-            path,
-            rowID,
-            setDocFieldPreferences
-        });
-    }, [
-        dispatchFields,
+        updatedRows: updatedRows_0
+      });
+      setDocFieldPreferences(path, {
+        collapsed: collapsedIDs_0
+      });
+    };
+    $[39] = rowsData;
+    $[40] = dispatchFields;
+    $[41] = path;
+    $[42] = setDocFieldPreferences;
+    $[43] = t19;
+  } else {
+    t19 = $[43];
+  }
+  const setCollapse = t19;
+  const hasMaxRows = maxRows && rowsData.length >= maxRows;
+  const fieldErrorCount = errorPaths.length;
+  const fieldHasErrors = submitted && errorPaths.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 ($[44] !== className || $[45] !== t20) {
+    t21 = [fieldBaseClass, baseClass, className, t20].filter(Boolean);
+    $[44] = className;
+    $[45] = t20;
+    $[46] = t21;
+  } else {
+    t21 = $[46];
+  }
+  let t22;
+  if ($[47] !== showError || $[48] !== path || $[49] !== Error) {
+    t22 = showError && _jsx(RenderCustomComponent, {
+      CustomComponent: Error,
+      Fallback: _jsx(FieldError, {
         path,
-        setDocFieldPreferences
-    ]);
-    const hasMaxRows = maxRows && rows.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;
-    return /*#__PURE__*/ _jsxs("div", {
-        className: [
-            fieldBaseClass,
-            baseClass,
-            className,
-            fieldHasErrors ? `${baseClass}--has-error` : `${baseClass}--has-no-error`
-        ].filter(Boolean).join(' '),
-        id: `field-${path.replace(/\./g, '__')}`,
-        children: [
-            showError && /*#__PURE__*/ _jsx(FieldError, {
-                CustomError: CustomError,
-                path: path,
-                ...errorProps || {}
-            }),
-            /*#__PURE__*/ _jsxs("header", {
-                className: `${baseClass}__header`,
-                children: [
-                    /*#__PURE__*/ _jsxs("div", {
-                        className: `${baseClass}__header-wrap`,
-                        children: [
-                            /*#__PURE__*/ _jsxs("div", {
-                                className: `${baseClass}__header-content`,
-                                children: [
-                                    /*#__PURE__*/ _jsx("h3", {
-                                        className: `${baseClass}__title`,
-                                        children: /*#__PURE__*/ _jsx(FieldLabel, {
-                                            CustomLabel: CustomLabel,
-                                            as: "span",
-                                            label: label,
-                                            required: required,
-                                            unstyled: true,
-                                            ...labelProps || {}
-                                        })
-                                    }),
-                                    fieldHasErrors && fieldErrorCount > 0 && /*#__PURE__*/ _jsx(ErrorPill, {
-                                        count: fieldErrorCount,
-                                        i18n: i18n,
-                                        withMessage: true
-                                    })
-                                ]
-                            }),
-                            rows.length > 0 && /*#__PURE__*/ _jsxs("ul", {
-                                className: `${baseClass}__header-actions`,
-                                children: [
-                                    /*#__PURE__*/ _jsx("li", {
-                                        children: /*#__PURE__*/ _jsx("button", {
-                                            className: `${baseClass}__header-action`,
-                                            onClick: ()=>toggleCollapseAll(true),
-                                            type: "button",
-                                            children: t('fields:collapseAll')
-                                        })
-                                    }),
-                                    /*#__PURE__*/ _jsx("li", {
-                                        children: /*#__PURE__*/ _jsx("button", {
-                                            className: `${baseClass}__header-action`,
-                                            onClick: ()=>toggleCollapseAll(false),
-                                            type: "button",
-                                            children: t('fields:showAll')
-                                        })
-                                    })
-                                ]
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ _jsx(FieldDescription, {
-                        CustomDescription: CustomDescription,
-                        ...descriptionProps || {}
-                    })
-                ]
-            }),
-            /*#__PURE__*/ _jsx(NullifyLocaleField, {
-                fieldValue: value,
-                localized: localized,
-                path: path
-            }),
-            (rows.length > 0 || !valid && (showRequired || showMinRows)) && /*#__PURE__*/ _jsxs(DraggableSortable, {
-                className: `${baseClass}__draggable-rows`,
-                ids: rows.map((row)=>row.id),
-                onDragEnd: ({ moveFromIndex, moveToIndex })=>moveRow(moveFromIndex, moveToIndex),
-                children: [
-                    rows.map((row, i)=>{
-                        const rowErrorCount = errorPaths?.filter((errorPath)=>errorPath.startsWith(`${path}.${i}.`)).length;
-                        return /*#__PURE__*/ _jsx(DraggableSortableItem, {
-                            disabled: disabled || !isSortable,
-                            id: row.id,
-                            children: (draggableSortableItemProps)=>/*#__PURE__*/ _jsx(ArrayRow, {
-                                    ...draggableSortableItemProps,
-                                    CustomRowLabel: CustomRowLabel,
-                                    addRow: addRow,
-                                    duplicateRow: duplicateRow,
-                                    errorCount: rowErrorCount,
-                                    fieldMap: fieldMap,
-                                    forceRender: forceRender,
-                                    hasMaxRows: hasMaxRows,
-                                    indexPath: indexPath,
-                                    isSortable: isSortable,
-                                    labels: labels,
-                                    moveRow: moveRow,
-                                    path: path,
-                                    permissions: permissions,
-                                    readOnly: disabled,
-                                    removeRow: removeRow,
-                                    row: row,
-                                    rowCount: rows.length,
-                                    rowIndex: i,
-                                    schemaPath: schemaPath,
-                                    setCollapse: setCollapse
-                                })
-                        }, row.id);
-                    }),
-                    !valid && /*#__PURE__*/ _jsxs(React.Fragment, {
-                        children: [
-                            showRequired && /*#__PURE__*/ _jsx(Banner, {
-                                children: t('validation:fieldHasNo', {
-                                    label: getTranslation(labels.plural, i18n)
-                                })
-                            }),
-                            showMinRows && /*#__PURE__*/ _jsx(Banner, {
-                                type: "error",
-                                children: t('validation:requiresAtLeast', {
-                                    count: minRows,
-                                    label: getTranslation(minRows > 1 ? labels.plural : labels.singular, i18n) || t(minRows > 1 ? 'general:row' : 'general:rows')
-                                })
-                            })
-                        ]
-                    })
-                ]
-            }),
-            !disabled && !hasMaxRows && /*#__PURE__*/ _jsx(Button, {
-                buttonStyle: "icon-label",
-                className: `${baseClass}__add-row`,
-                icon: "plus",
-                iconPosition: "left",
-                iconStyle: "with-border",
-                onClick: ()=>addRow(value || 0),
-                children: t('fields:addLabel', {
-                    label: getTranslation(labels.singular, i18n)
-                })
-            })
-        ]
+        showError
+      })
     });
+    $[47] = showError;
+    $[48] = path;
+    $[49] = Error;
+    $[50] = t22;
+  } else {
+    t22 = $[50];
+  }
+  let t23;
+  if ($[51] !== fieldHasErrors || $[52] !== fieldErrorCount || $[53] !== i18n) {
+    t23 = fieldHasErrors && fieldErrorCount > 0 && _jsx(ErrorPill, {
+      count: fieldErrorCount,
+      i18n,
+      withMessage: true
+    });
+    $[51] = fieldHasErrors;
+    $[52] = fieldErrorCount;
+    $[53] = i18n;
+    $[54] = t23;
+  } else {
+    t23 = $[54];
+  }
+  return _jsxs("div", {
+    className: t21.join(" "),
+    id: `field-${path.replace(/\./g, "__")}`,
+    children: [t22, _jsxs("header", {
+      className: `${baseClass}__header`,
+      children: [_jsxs("div", {
+        className: `${baseClass}__header-wrap`,
+        children: [_jsxs("div", {
+          className: `${baseClass}__header-content`,
+          children: [_jsx("h3", {
+            className: `${baseClass}__title`,
+            children: _jsx(RenderCustomComponent, {
+              CustomComponent: Label,
+              Fallback: _jsx(FieldLabel, {
+                as: "span",
+                label,
+                localized,
+                path,
+                required
+              })
+            })
+          }), t23]
+        }), rowsData?.length > 0 && _jsxs("ul", {
+          className: `${baseClass}__header-actions`,
+          children: [_jsx("li", {
+            children: _jsx("button", {
+              className: `${baseClass}__header-action`,
+              onClick: () => toggleCollapseAll(true),
+              type: "button",
+              children: t("fields:collapseAll")
+            })
+          }), _jsx("li", {
+            children: _jsx("button", {
+              className: `${baseClass}__header-action`,
+              onClick: () => toggleCollapseAll(false),
+              type: "button",
+              children: t("fields:showAll")
+            })
+          })]
+        })]
+      }), _jsx(RenderCustomComponent, {
+        CustomComponent: Description,
+        Fallback: _jsx(FieldDescription, {
+          description,
+          path
+        })
+      })]
+    }), _jsx(NullifyLocaleField, {
+      fieldValue: value_0,
+      localized,
+      path
+    }), (rowsData?.length > 0 || !valid && (showRequired || showMinRows)) && _jsxs(DraggableSortable, {
+      className: `${baseClass}__draggable-rows`,
+      ids: rowsData.map(_temp),
+      onDragEnd: t24 => {
+        const {
+          moveFromIndex: moveFromIndex_0,
+          moveToIndex: moveToIndex_0
+        } = t24;
+        return moveRow(moveFromIndex_0, moveToIndex_0);
+      },
+      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: readOnly || !isSortable,
+          id: rowID_0,
+          children: draggableSortableItemProps => _jsx(ArrayRow, {
+            ...draggableSortableItemProps,
+            addRow,
+            CustomRowLabel: RowLabels?.[i],
+            duplicateRow,
+            errorCount: rowErrorCount,
+            fields,
+            forceRender,
+            hasMaxRows,
+            isSortable,
+            labels,
+            moveRow,
+            parentPath: path,
+            path: rowPath,
+            permissions,
+            readOnly,
+            removeRow,
+            row: rowData,
+            rowCount: rowsData?.length,
+            rowIndex: i,
+            schemaPath,
+            setCollapse
+          })
+        }, rowID_0);
+      }), !valid && _jsxs(React.Fragment, {
+        children: [showRequired && _jsx(Banner, {
+          children: t("validation:fieldHasNo", {
+            label: getTranslation(labels.plural, i18n)
+          })
+        }), showMinRows && _jsx(Banner, {
+          type: "error",
+          children: t("validation:requiresAtLeast", {
+            count: minRows,
+            label: getTranslation(minRows > 1 ? labels.plural : labels.singular, i18n) || t(minRows > 1 ? "general:rows" : "general:row")
+          })
+        })]
+      })]
+    }), !readOnly && !hasMaxRows && _jsx(Button, {
+      buttonStyle: "icon-label",
+      className: `${baseClass}__add-row`,
+      icon: "plus",
+      iconPosition: "left",
+      iconStyle: "with-border",
+      onClick: () => {
+        addRow(value_0 || 0);
+      },
+      children: t("fields:addLabel", {
+        label: getTranslation(labels.singular, i18n)
+      })
+    })]
+  });
 };
-export const ArrayField = withCondition(_ArrayField);
-
+export const ArrayField = withCondition(ArrayFieldComponent);
+function _temp(row) {
+  return row.id;
+}
 //# sourceMappingURL=index.js.map