@payloadcms/ui 3.0.0-beta.9 → 3.0.0-beta.91

package/dist/fields/Array/index.js

@@ -1,270 +1,515 @@
 '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 { FieldDescription } from '@payloadcms/ui/forms/FieldDescription';
-import { FieldError } from '@payloadcms/ui/forms/FieldError';
-import { FieldLabel } from '@payloadcms/ui/forms/FieldLabel';
-import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider';
-import { withCondition } from '@payloadcms/ui/forms/withCondition';
 import React, { useCallback } from 'react';
 import { Banner } from '../../elements/Banner/index.js';
 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 { 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';
 import { useConfig } from '../../providers/Config/index.js';
 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 _ArrayField = (props)=>{
-    const { name, CustomDescription, CustomError, CustomLabel, CustomRowLabel, className, descriptionProps, errorProps, fieldMap, forceRender = false, label, labelProps, localized, maxRows, minRows: minRowsProp, path: pathFromProps, permissions, readOnly: readOnlyFromProps, required, validate } = props;
-    const { indexPath, readOnly: readOnlyFromContext } = useFieldProps();
-    const readOnly = readOnlyFromProps || readOnlyFromContext;
-    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(58);
+  const {
+    descriptionProps,
+    errorProps,
+    field,
+    field: t0,
+    forceRender: t1,
+    labelProps,
+    readOnly: readOnlyFromTopLevelProps,
+    validate
+  } = props;
+  const {
+    name,
+    _path: pathFromProps,
+    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,
+    components: t4,
+    description,
+    isSortable: t5,
+    readOnly: readOnlyFromAdmin
+  } = t3;
+  const {
+    RowLabel
+  } = t4;
+  const isSortable = t5 === undefined ? true : t5;
+  const forceRender = t1 === undefined ? false : t1;
+  const readOnlyFromProps = readOnlyFromTopLevelProps || readOnlyFromAdmin;
+  const {
+    indexPath,
+    path: pathFromContext,
+    permissions,
+    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 {
+    config: t6
+  } = useConfig();
+  const {
+    localization
+  } = t6;
+  let t7;
+  bb0: {
+    if (localization && localization.fallback) {
+      const defaultLocale = localization.defaultLocale || "en";
+      t7 = locale === defaultLocale;
+      break bb0;
+    }
+    t7 = true;
+  }
+  const editingDefaultLocale = t7;
+  let t8;
+  if ($[2] !== t) {
+    t8 = p => {
+      if ("labels" in p && p?.labels) {
+        return p.labels;
+      }
+      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, path, rows = [], schemaPath, showError, valid, value } = useField({
-        hasRows: true,
-        path: pathFromContext || pathFromProps || name,
-        validate: memoizedValidate
-    });
-    const addRow = useCallback(async (rowIndex)=>{
-        await addFieldRow({
-            path,
-            rowIndex,
-            schemaPath
+    $[2] = t;
+    $[3] = t8;
+  } else {
+    t8 = $[3];
+  }
+  const getLabels = t8;
+  const labels = getLabels(props);
+  let t9;
+  if ($[4] !== editingDefaultLocale || $[5] !== validate || $[6] !== maxRows || $[7] !== minRows || $[8] !== required) {
+    t9 = (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] = t9;
+  } else {
+    t9 = $[9];
+  }
+  const memoizedValidate = t9;
+  const t10 = pathFromContext ?? pathFromProps ?? name;
+  let t11;
+  if ($[10] !== t10 || $[11] !== memoizedValidate) {
+    t11 = {
+      hasRows: true,
+      path: t10,
+      validate: memoizedValidate
+    };
+    $[10] = t10;
+    $[11] = memoizedValidate;
+    $[12] = t11;
+  } else {
+    t11 = $[12];
+  }
+  const {
+    errorPaths,
+    formInitializing,
+    formProcessing,
+    path,
+    rows: t12,
+    schemaPath,
+    showError,
+    valid,
+    value: value_0
+  } = useField(t11);
+  let t13;
+  if ($[13] !== t12) {
+    t13 = t12 === undefined ? [] : t12;
+    $[13] = t12;
+    $[14] = t13;
+  } else {
+    t13 = $[14];
+  }
+  const rows = t13;
+  const disabled = readOnlyFromProps || readOnlyFromContext || formProcessing || formInitializing;
+  let t14;
+  if ($[15] !== addFieldRow || $[16] !== path || $[17] !== schemaPath || $[18] !== setModified) {
+    t14 = async rowIndex => {
+      await 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 + 1}`);
+      }, 0);
+    };
+    $[15] = addFieldRow;
+    $[16] = path;
+    $[17] = schemaPath;
+    $[18] = setModified;
+    $[19] = t14;
+  } else {
+    t14 = $[19];
+  }
+  const addRow = t14;
+  let t15;
+  if ($[20] !== dispatchFields || $[21] !== path || $[22] !== 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);
+    };
+    $[20] = dispatchFields;
+    $[21] = path;
+    $[22] = setModified;
+    $[23] = t15;
+  } else {
+    t15 = $[23];
+  }
+  const duplicateRow = t15;
+  let t16;
+  if ($[24] !== dispatchFields || $[25] !== path || $[26] !== 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);
+    };
+    $[24] = dispatchFields;
+    $[25] = path;
+    $[26] = setModified;
+    $[27] = t16;
+  } else {
+    t16 = $[27];
+  }
+  const removeRow = t16;
+  let t17;
+  if ($[28] !== dispatchFields || $[29] !== path || $[30] !== setModified) {
+    t17 = (moveFromIndex, moveToIndex) => {
+      dispatchFields({
+        type: "MOVE_ROW",
+        moveFromIndex,
+        moveToIndex,
+        path
+      });
+      setModified(true);
+    };
+    $[28] = dispatchFields;
+    $[29] = path;
+    $[30] = setModified;
+    $[31] = t17;
+  } else {
+    t17 = $[31];
+  }
+  const moveRow = t17;
+  let t18;
+  if ($[32] !== rows || $[33] !== dispatchFields || $[34] !== path || $[35] !== setDocFieldPreferences) {
+    t18 = collapsed => {
+      const {
+        collapsedIDs,
+        updatedRows
+      } = toggleAllRows({
+        collapsed,
+        rows
+      });
+      dispatchFields({
+        type: "SET_ALL_ROWS_COLLAPSED",
         path,
-        setModified
-    ]);
-    const toggleCollapseAll = useCallback((collapsed)=>{
-        dispatchFields({
-            type: 'SET_ALL_ROWS_COLLAPSED',
-            collapsed,
-            path,
-            setDocFieldPreferences
-        });
-    }, [
-        dispatchFields,
+        updatedRows
+      });
+      setDocFieldPreferences(path, {
+        collapsed: collapsedIDs
+      });
+    };
+    $[32] = rows;
+    $[33] = dispatchFields;
+    $[34] = path;
+    $[35] = setDocFieldPreferences;
+    $[36] = t18;
+  } else {
+    t18 = $[36];
+  }
+  const toggleCollapseAll = t18;
+  let t19;
+  if ($[37] !== rows || $[38] !== dispatchFields || $[39] !== path || $[40] !== setDocFieldPreferences) {
+    t19 = (rowID, collapsed_0) => {
+      const {
+        collapsedIDs: collapsedIDs_0,
+        updatedRows: updatedRows_0
+      } = extractRowsAndCollapsedIDs({
+        collapsed: collapsed_0,
+        rowID,
+        rows
+      });
+      dispatchFields({
+        type: "SET_ROW_COLLAPSED",
         path,
-        setDocFieldPreferences
-    ]);
-    const setCollapse = useCallback((rowID, collapsed)=>{
-        dispatchFields({
-            type: 'SET_ROW_COLLAPSED',
-            collapsed,
+        updatedRows: updatedRows_0
+      });
+      setDocFieldPreferences(path, {
+        collapsed: collapsedIDs_0
+      });
+    };
+    $[37] = rows;
+    $[38] = dispatchFields;
+    $[39] = path;
+    $[40] = setDocFieldPreferences;
+    $[41] = t19;
+  } else {
+    t19 = $[41];
+  }
+  const setCollapse = t19;
+  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;
+  const t20 = fieldHasErrors ? `${baseClass}--has-error` : `${baseClass}--has-no-error`;
+  let t21;
+  if ($[42] !== className || $[43] !== t20) {
+    t21 = [fieldBaseClass, baseClass, className, t20].filter(Boolean);
+    $[42] = className;
+    $[43] = t20;
+    $[44] = t21;
+  } else {
+    t21 = $[44];
+  }
+  let t22;
+  if ($[45] !== showError || $[46] !== field || $[47] !== errorProps || $[48] !== path) {
+    t22 = showError && _jsx(FieldError, {
+      CustomError: field?.admin?.components?.Error,
+      field,
+      path,
+      ...(errorProps || {})
+    });
+    $[45] = showError;
+    $[46] = field;
+    $[47] = errorProps;
+    $[48] = path;
+    $[49] = t22;
+  } else {
+    t22 = $[49];
+  }
+  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, {
+      count: fieldErrorCount,
+      i18n,
+      withMessage: true
+    });
+    $[52] = fieldHasErrors;
+    $[53] = fieldErrorCount;
+    $[54] = i18n;
+    $[55] = t24;
+  } else {
+    t24 = $[55];
+  }
+  let t25;
+  if ($[56] !== descriptionProps) {
+    t25 = descriptionProps || {};
+    $[56] = descriptionProps;
+    $[57] = t25;
+  } else {
+    t25 = $[57];
+  }
+  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(FieldLabel, {
+              Label: field?.admin?.components?.Label,
+              as: "span",
+              field,
+              label,
+              required,
+              unstyled: true,
+              ...t23
+            })
+          }), t24]
+        }), rows.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(FieldDescription, {
+        Description: field?.admin?.components?.Description,
+        description,
+        field,
+        ...t25
+      })]
+    }), _jsx(NullifyLocaleField, {
+      fieldValue: value_0,
+      localized,
+      path
+    }), (rows.length > 0 || !valid && (showRequired || showMinRows)) && _jsxs(DraggableSortable, {
+      className: `${baseClass}__draggable-rows`,
+      ids: rows.map(_temp),
+      onDragEnd: t26 => {
+        const {
+          moveFromIndex: moveFromIndex_0,
+          moveToIndex: moveToIndex_0
+        } = t26;
+        return moveRow(moveFromIndex_0, moveToIndex_0);
+      },
+      children: [rows.map((row_0, i) => {
+        const rowErrorCount = errorPaths?.filter(errorPath => errorPath.startsWith(`${path}.${i}.`)).length;
+        return _jsx(DraggableSortableItem, {
+          disabled: disabled || !isSortable,
+          id: row_0.id,
+          children: draggableSortableItemProps => _jsx(ArrayRow, {
+            ...draggableSortableItemProps,
+            RowLabel,
+            addRow,
+            duplicateRow,
+            errorCount: rowErrorCount,
+            fields,
+            forceRender,
+            hasMaxRows,
+            indexPath,
+            isSortable,
+            labels,
+            moveRow,
             path,
-            rowID,
-            setDocFieldPreferences
-        });
-    }, [
-        dispatchFields,
-        path,
-        setDocFieldPreferences
-    ]);
-    const hasMaxRows = maxRows && rows.length >= maxRows;
-    const fieldErrorCount = errorPaths.length;
-    const fieldHasErrors = submitted && errorPaths.length > 0;
-    const showRequired = readOnly && rows.length === 0;
-    const showMinRows = rows.length < minRows || required && rows.length === 0;
-    return /*#__PURE__*/ React.createElement("div", {
-        className: [
-            fieldBaseClass,
-            baseClass,
-            className,
-            fieldHasErrors ? `${baseClass}--has-error` : `${baseClass}--has-no-error`
-        ].filter(Boolean).join(' '),
-        id: `field-${path.replace(/\./g, '__')}`
-    }, showError && /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__error-wrap`
-    }, /*#__PURE__*/ React.createElement(FieldError, {
-        CustomError: CustomError,
-        path: path,
-        ...errorProps || {}
-    })), /*#__PURE__*/ React.createElement("header", {
-        className: `${baseClass}__header`
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__header-wrap`
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__header-content`
-    }, /*#__PURE__*/ React.createElement("h3", {
-        className: `${baseClass}__title`
-    }, /*#__PURE__*/ React.createElement(FieldLabel, {
-        CustomLabel: CustomLabel,
-        as: "span",
-        label: label,
-        required: required,
-        unstyled: true,
-        ...labelProps || {}
-    })), fieldHasErrors && fieldErrorCount > 0 && /*#__PURE__*/ React.createElement(ErrorPill, {
-        count: fieldErrorCount,
-        i18n: i18n,
-        withMessage: true
-    })), rows.length > 0 && /*#__PURE__*/ React.createElement("ul", {
-        className: `${baseClass}__header-actions`
-    }, /*#__PURE__*/ React.createElement("li", null, /*#__PURE__*/ React.createElement("button", {
-        className: `${baseClass}__header-action`,
-        onClick: ()=>toggleCollapseAll(true),
-        type: "button"
-    }, t('fields:collapseAll'))), /*#__PURE__*/ React.createElement("li", null, /*#__PURE__*/ React.createElement("button", {
-        className: `${baseClass}__header-action`,
-        onClick: ()=>toggleCollapseAll(false),
-        type: "button"
-    }, t('fields:showAll'))))), /*#__PURE__*/ React.createElement(FieldDescription, {
-        CustomDescription: CustomDescription,
-        ...descriptionProps || {}
-    })), /*#__PURE__*/ React.createElement(NullifyLocaleField, {
-        fieldValue: value,
-        localized: localized,
-        path: path
-    }), (rows.length > 0 || !valid && (showRequired || showMinRows)) && /*#__PURE__*/ React.createElement(DraggableSortable, {
-        className: `${baseClass}__draggable-rows`,
-        ids: rows.map((row)=>row.id),
-        onDragEnd: ({ moveFromIndex, moveToIndex })=>moveRow(moveFromIndex, moveToIndex)
-    }, rows.map((row, i)=>{
-        const rowErrorCount = errorPaths?.filter((errorPath)=>errorPath.startsWith(`${path}.${i}.`)).length;
-        return /*#__PURE__*/ React.createElement(DraggableSortableItem, {
-            disabled: readOnly,
-            id: row.id,
-            key: row.id
-        }, (draggableSortableItemProps)=>/*#__PURE__*/ React.createElement(ArrayRow, {
-                ...draggableSortableItemProps,
-                CustomRowLabel: CustomRowLabel,
-                addRow: addRow,
-                duplicateRow: duplicateRow,
-                errorCount: rowErrorCount,
-                fieldMap: fieldMap,
-                forceRender: forceRender,
-                hasMaxRows: hasMaxRows,
-                indexPath: indexPath,
-                labels: labels,
-                moveRow: moveRow,
-                path: path,
-                permissions: permissions,
-                readOnly: readOnly,
-                removeRow: removeRow,
-                row: row,
-                rowCount: rows.length,
-                rowIndex: i,
-                schemaPath: schemaPath,
-                setCollapse: setCollapse
-            }));
-    }), !valid && /*#__PURE__*/ React.createElement(React.Fragment, null, showRequired && /*#__PURE__*/ React.createElement(Banner, null, t('validation:fieldHasNo', {
-        label: getTranslation(labels.plural, i18n)
-    })), showMinRows && /*#__PURE__*/ React.createElement(Banner, {
-        type: "error"
-    }, t('validation:requiresAtLeast', {
-        count: minRows,
-        label: getTranslation(minRows > 1 ? labels.plural : labels.singular, i18n) || t(minRows > 1 ? 'general:row' : 'general:rows')
-    })))), !readOnly && !hasMaxRows && /*#__PURE__*/ React.createElement(Button, {
-        buttonStyle: "icon-label",
-        className: `${baseClass}__add-row`,
-        icon: "plus",
-        iconPosition: "left",
-        iconStyle: "with-border",
-        onClick: ()=>addRow(value || 0)
-    }, t('fields:addLabel', {
+            permissions,
+            readOnly: disabled,
+            removeRow,
+            row: row_0,
+            rowCount: rows.length,
+            rowIndex: i,
+            schemaPath,
+            setCollapse
+          })
+        }, row_0.id);
+      }), !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")
+          })
+        })]
+      })]
+    }), !disabled && !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