@payloadcms/ui 3.70.0-canary.9 → 3.71.0-internal-debug.80dab4c

package/dist/fields/Array/index.js

@@ -1,8 +1,7 @@
 'use client';
-
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import { getTranslation } from '@payloadcms/translations';
-import React, { Fragment, useCallback, useMemo } from 'react';
+import React, { Fragment, useCallback, useId, useMemo } from 'react';
 import { toast } from 'sonner';
 import { Banner } from '../../elements/Banner/index.js';
 import { Button } from '../../elements/Button/index.js';
@@ -31,410 +30,548 @@ import { fieldBaseClass } from '../shared/index.js';
 import { ArrayRow } from './ArrayRow.js';
 import './index.scss';
 const baseClass = 'array-field';
-export const ArrayFieldComponent = props => {
-  const {
-    field,
-    field: {
-      name,
-      type,
-      admin: {
-        className,
-        description,
-        isSortable = true
-      } = {},
-      fields,
-      label,
-      localized,
-      maxRows,
-      minRows: minRowsProp,
-      required
-    },
-    forceRender = false,
-    path: pathFromProps,
-    permissions,
-    readOnly,
-    schemaPath: schemaPathFromProps,
-    validate
-  } = props;
-  const schemaPath = schemaPathFromProps ?? name;
-  const minRows = minRowsProp ?? (required ? 1 : 0);
-  const {
-    setDocFieldPreferences
-  } = useDocumentInfo();
-  const {
-    addFieldRow,
-    dispatchFields,
-    getFields,
-    moveFieldRow,
-    removeFieldRow,
-    replaceState,
-    setModified
-  } = useForm();
-  const submitted = useFormSubmitted();
-  const {
-    code: locale
-  } = useLocale();
-  const {
-    i18n,
-    t
-  } = useTranslation();
-  const {
-    config: {
-      localization
-    }
-  } = useConfig();
-  const editingDefaultLocale = (() => {
-    if (localization && localization.fallback) {
-      const defaultLocale = localization.defaultLocale;
-      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 ('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,
-        singular: p.field.label
-      };
-    }
-    return {
-      plural: t('general:rows'),
-      singular: t('general:row')
+export const ArrayFieldComponent = (props)=>{
+    const { field, field: { name, type, admin: { className, description, isSortable = true } = {}, fields, label, localized, maxRows, minRows: minRowsProp, required }, forceRender = false, path: pathFromProps, permissions, readOnly, schemaPath: schemaPathFromProps, validate } = props;
+    const schemaPath = schemaPathFromProps ?? name;
+    const minRows = minRowsProp ?? (required ? 1 : 0);
+    const { setDocFieldPreferences } = useDocumentInfo();
+    const { addFieldRow, dispatchFields, getFields, moveFieldRow, removeFieldRow, replaceState, setModified } = useForm();
+    const submitted = useFormSubmitted();
+    const { code: locale } = useLocale();
+    const { i18n, t } = useTranslation();
+    const { config: { localization } } = useConfig();
+    const editingDefaultLocale = (()=>{
+        if (localization && localization.fallback) {
+            const defaultLocale = localization.defaultLocale;
+            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 ('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,
+                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,
+    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
-      });
-    }
-  }, [maxRows, minRows, required, validate, editingDefaultLocale]);
-  const {
-    customComponents: {
-      AfterInput,
-      BeforeInput,
-      Description,
-      Error,
-      Label
-    } = {},
-    disabled,
-    errorPaths,
-    path,
-    rows = [],
-    showError,
-    valid,
-    value: value_0
-  } = useField({
-    hasRows: true,
-    potentiallyStalePath: pathFromProps,
-    validate: memoizedValidate
-  });
-  const addRow = useCallback(rowIndex => {
-    addFieldRow({
-      path,
-      rowIndex,
-      schemaPath
-    });
-    setTimeout(() => {
-      scrollToID(`${path}-row-${rowIndex}`);
-    }, 0);
-  }, [addFieldRow, path, schemaPath]);
-  const duplicateRow = useCallback(rowIndex_0 => {
-    dispatchFields({
-      type: 'DUPLICATE_ROW',
-      path,
-      rowIndex: rowIndex_0
-    });
-    setModified(true);
-    setTimeout(() => {
-      scrollToID(`${path}-row-${rowIndex_0}`);
-    }, 0);
-  }, [dispatchFields, path, setModified]);
-  const removeRow = useCallback(rowIndex_1 => {
-    removeFieldRow({
-      path,
-      rowIndex: rowIndex_1
-    });
-  }, [removeFieldRow, path]);
-  const moveRow = useCallback((moveFromIndex, moveToIndex) => {
-    moveFieldRow({
-      moveFromIndex,
-      moveToIndex,
-      path
-    });
-  }, [path, moveFieldRow]);
-  const toggleCollapseAll = useCallback(collapsed => {
-    const {
-      collapsedIDs,
-      updatedRows
-    } = toggleAllRows({
-      collapsed,
-      rows
-    });
-    setDocFieldPreferences(path, {
-      collapsed: collapsedIDs
-    });
-    dispatchFields({
-      type: 'SET_ALL_ROWS_COLLAPSED',
-      path,
-      updatedRows
-    });
-  }, [dispatchFields, path, rows, setDocFieldPreferences]);
-  const setCollapse = useCallback((rowID, collapsed_0) => {
-    const {
-      collapsedIDs: collapsedIDs_0,
-      updatedRows: updatedRows_0
-    } = extractRowsAndCollapsedIDs({
-      collapsed: collapsed_0,
-      rowID,
-      rows
-    });
-    dispatchFields({
-      type: 'SET_ROW_COLLAPSED',
-      path,
-      updatedRows: updatedRows_0
+        required,
+        validate,
+        editingDefaultLocale
+    ]);
+    const { customComponents: { AfterInput, BeforeInput, Description, Error, Label } = {}, disabled, errorPaths, path, rows = [], showError, valid, value } = useField({
+        hasRows: true,
+        potentiallyStalePath: pathFromProps,
+        validate: memoizedValidate
     });
-    setDocFieldPreferences(path, {
-      collapsed: collapsedIDs_0
-    });
-  }, [dispatchFields, path, rows, setDocFieldPreferences]);
-  const copyRow = useCallback(rowIndex_2 => {
-    const formState = {
-      ...getFields()
-    };
-    const clipboardResult = clipboardCopy({
-      type,
-      fields,
-      getDataToCopy: () => reduceFormStateByPath({
-        formState,
+    const componentId = useId();
+    const scrollIdPrefix = useMemo(()=>`scroll-${componentId}`, [
+        componentId
+    ]);
+    const addRow = useCallback((rowIndex)=>{
+        addFieldRow({
+            path,
+            rowIndex,
+            schemaPath
+        });
+        setTimeout(()=>{
+            scrollToID(`${scrollIdPrefix}-row-${rowIndex}`);
+        }, 0);
+    }, [
+        addFieldRow,
         path,
-        rowIndex: rowIndex_2
-      }),
-      path,
-      rowIndex: rowIndex_2,
-      t
-    });
-    if (typeof clipboardResult === 'string') {
-      toast.error(clipboardResult);
-    } else {
-      toast.success(t('general:copied'));
-    }
-  }, [fields, getFields, path, t, type]);
-  const pasteRow = useCallback(rowIndex_3 => {
-    const formState_0 = {
-      ...getFields()
-    };
-    const pasteArgs = {
-      onPaste: dataFromClipboard => {
+        schemaPath,
+        scrollIdPrefix
+    ]);
+    const duplicateRow = useCallback((rowIndex)=>{
+        dispatchFields({
+            type: 'DUPLICATE_ROW',
+            path,
+            rowIndex
+        });
+        setModified(true);
+        setTimeout(()=>{
+            scrollToID(`${scrollIdPrefix}-row-${rowIndex}`);
+        }, 0);
+    }, [
+        dispatchFields,
+        path,
+        scrollIdPrefix,
+        setModified
+    ]);
+    const removeRow = useCallback((rowIndex)=>{
+        removeFieldRow({
+            path,
+            rowIndex
+        });
+    }, [
+        removeFieldRow,
+        path
+    ]);
+    const moveRow = useCallback((moveFromIndex, moveToIndex)=>{
+        moveFieldRow({
+            moveFromIndex,
+            moveToIndex,
+            path
+        });
+    }, [
+        path,
+        moveFieldRow
+    ]);
+    const toggleCollapseAll = useCallback((collapsed)=>{
+        const { collapsedIDs, updatedRows } = toggleAllRows({
+            collapsed,
+            rows
+        });
+        setDocFieldPreferences(path, {
+            collapsed: collapsedIDs
+        });
+        dispatchFields({
+            type: 'SET_ALL_ROWS_COLLAPSED',
+            path,
+            updatedRows
+        });
+    }, [
+        dispatchFields,
+        path,
+        rows,
+        setDocFieldPreferences
+    ]);
+    const setCollapse = useCallback((rowID, collapsed)=>{
+        const { collapsedIDs, updatedRows } = extractRowsAndCollapsedIDs({
+            collapsed,
+            rowID,
+            rows
+        });
+        dispatchFields({
+            type: 'SET_ROW_COLLAPSED',
+            path,
+            updatedRows
+        });
+        setDocFieldPreferences(path, {
+            collapsed: collapsedIDs
+        });
+    }, [
+        dispatchFields,
+        path,
+        rows,
+        setDocFieldPreferences
+    ]);
+    const copyRow = useCallback((rowIndex)=>{
+        const formState = {
+            ...getFields()
+        };
+        const clipboardResult = clipboardCopy({
+            type,
+            fields,
+            getDataToCopy: ()=>reduceFormStateByPath({
+                    formState,
+                    path,
+                    rowIndex
+                }),
+            path,
+            rowIndex,
+            t
+        });
+        if (typeof clipboardResult === 'string') {
+            toast.error(clipboardResult);
+        } else {
+            toast.success(t('general:copied'));
+        }
+    }, [
+        fields,
+        getFields,
+        path,
+        t,
+        type
+    ]);
+    const pasteRow = useCallback((rowIndex)=>{
+        const formState = {
+            ...getFields()
+        };
+        const pasteArgs = {
+            onPaste: (dataFromClipboard)=>{
+                const newState = mergeFormStateFromClipboard({
+                    dataFromClipboard,
+                    formState,
+                    path,
+                    rowIndex
+                });
+                replaceState(newState);
+                setModified(true);
+            },
+            path,
+            schemaFields: fields,
+            t
+        };
+        const clipboardResult = clipboardPaste(pasteArgs);
+        if (typeof clipboardResult === 'string') {
+            toast.error(clipboardResult);
+        }
+    }, [
+        fields,
+        getFields,
+        path,
+        replaceState,
+        setModified,
+        t
+    ]);
+    const pasteField = useCallback((dataFromClipboard)=>{
+        const formState = {
+            ...getFields()
+        };
         const newState = mergeFormStateFromClipboard({
-          dataFromClipboard,
-          formState: formState_0,
-          path,
-          rowIndex: rowIndex_3
+            dataFromClipboard,
+            formState,
+            path
         });
         replaceState(newState);
         setModified(true);
-      },
-      path,
-      schemaFields: fields,
-      t
-    };
-    const clipboardResult_0 = clipboardPaste(pasteArgs);
-    if (typeof clipboardResult_0 === 'string') {
-      toast.error(clipboardResult_0);
-    }
-  }, [fields, getFields, path, replaceState, setModified, t]);
-  const pasteField = useCallback(dataFromClipboard_0 => {
-    const formState_1 = {
-      ...getFields()
-    };
-    const newState_0 = mergeFormStateFromClipboard({
-      dataFromClipboard: dataFromClipboard_0,
-      formState: formState_1,
-      path
-    });
-    replaceState(newState_0);
-    setModified(true);
-  }, [getFields, path, replaceState, setModified]);
-  const getDataToCopy = useCallback(() => reduceFormStateByPath({
-    formState: {
-      ...getFields()
-    },
-    path
-  }), [getFields, path]);
-  const hasMaxRows = maxRows && rows.length >= maxRows;
-  const fieldErrorCount = errorPaths.length;
-  const fieldHasErrors = submitted && errorPaths.length > 0;
-  const showRequired = (readOnly || disabled) && rows.length === 0;
-  const showMinRows = rows.length && rows.length < minRows || required && rows.length === 0;
-  const styles = useMemo(() => mergeFieldStyles(field), [field]);
-  return /*#__PURE__*/_jsxs("div", {
-    className: [fieldBaseClass, baseClass, className, fieldHasErrors ? `${baseClass}--has-error` : `${baseClass}--has-no-error`].filter(Boolean).join(' '),
-    id: `field-${path.replace(/\./g, '__')}`,
-    style: styles,
-    children: [showError && /*#__PURE__*/_jsx(RenderCustomComponent, {
-      CustomComponent: Error,
-      Fallback: /*#__PURE__*/_jsx(FieldError, {
-        path: path,
-        showError: showError
-      })
-    }), /*#__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(RenderCustomComponent, {
-              CustomComponent: Label,
-              Fallback: /*#__PURE__*/_jsx(FieldLabel, {
-                as: "span",
-                label: label,
+    }, [
+        getFields,
+        path,
+        replaceState,
+        setModified
+    ]);
+    const getDataToCopy = useCallback(()=>reduceFormStateByPath({
+            formState: {
+                ...getFields()
+            },
+            path
+        }), [
+        getFields,
+        path
+    ]);
+    const hasMaxRows = maxRows && rows.length >= maxRows;
+    const fieldErrorCount = errorPaths.length;
+    const fieldHasErrors = submitted && errorPaths.length > 0;
+    const showRequired = (readOnly || disabled) && rows.length === 0;
+    const showMinRows = rows.length && rows.length < minRows || required && rows.length === 0;
+    const styles = useMemo(()=>mergeFieldStyles(field), [
+        field
+    ]);
+    return /*#__PURE__*/ _jsxDEV("div", {
+        className: [
+            fieldBaseClass,
+            baseClass,
+            className,
+            fieldHasErrors ? `${baseClass}--has-error` : `${baseClass}--has-no-error`
+        ].filter(Boolean).join(' '),
+        id: `field-${path.replace(/\./g, '__')}`,
+        style: styles,
+        children: [
+            showError && /*#__PURE__*/ _jsxDEV(RenderCustomComponent, {
+                CustomComponent: Error,
+                Fallback: /*#__PURE__*/ _jsxDEV(FieldError, {
+                    path: path,
+                    showError: showError
+                }, void 0, false, {
+                    fileName: "src/fields/Array/index.tsx",
+                    lineNumber: 325,
+                    columnNumber: 21
+                }, void 0)
+            }, void 0, false, {
+                fileName: "src/fields/Array/index.tsx",
+                lineNumber: 323,
+                columnNumber: 9
+            }, this),
+            /*#__PURE__*/ _jsxDEV("header", {
+                className: `${baseClass}__header`,
+                children: [
+                    /*#__PURE__*/ _jsxDEV("div", {
+                        className: `${baseClass}__header-wrap`,
+                        children: [
+                            /*#__PURE__*/ _jsxDEV("div", {
+                                className: `${baseClass}__header-content`,
+                                children: [
+                                    /*#__PURE__*/ _jsxDEV("h3", {
+                                        className: `${baseClass}__title`,
+                                        children: /*#__PURE__*/ _jsxDEV(RenderCustomComponent, {
+                                            CustomComponent: Label,
+                                            Fallback: /*#__PURE__*/ _jsxDEV(FieldLabel, {
+                                                as: "span",
+                                                label: label,
+                                                localized: localized,
+                                                path: path,
+                                                required: required
+                                            }, void 0, false, {
+                                                fileName: "src/fields/Array/index.tsx",
+                                                lineNumber: 335,
+                                                columnNumber: 19
+                                            }, void 0)
+                                        }, void 0, false, {
+                                            fileName: "src/fields/Array/index.tsx",
+                                            lineNumber: 332,
+                                            columnNumber: 15
+                                        }, this)
+                                    }, void 0, false, {
+                                        fileName: "src/fields/Array/index.tsx",
+                                        lineNumber: 331,
+                                        columnNumber: 13
+                                    }, this),
+                                    fieldHasErrors && fieldErrorCount > 0 && /*#__PURE__*/ _jsxDEV(ErrorPill, {
+                                        count: fieldErrorCount,
+                                        i18n: i18n,
+                                        withMessage: true
+                                    }, void 0, false, {
+                                        fileName: "src/fields/Array/index.tsx",
+                                        lineNumber: 346,
+                                        columnNumber: 15
+                                    }, this)
+                                ]
+                            }, void 0, true, {
+                                fileName: "src/fields/Array/index.tsx",
+                                lineNumber: 330,
+                                columnNumber: 11
+                            }, this),
+                            /*#__PURE__*/ _jsxDEV("ul", {
+                                className: `${baseClass}__header-actions`,
+                                children: [
+                                    rows?.length > 0 && /*#__PURE__*/ _jsxDEV(Fragment, {
+                                        children: [
+                                            /*#__PURE__*/ _jsxDEV("li", {
+                                                children: /*#__PURE__*/ _jsxDEV("button", {
+                                                    className: `${baseClass}__header-action`,
+                                                    onClick: ()=>toggleCollapseAll(true),
+                                                    type: "button",
+                                                    children: t('fields:collapseAll')
+                                                }, void 0, false, {
+                                                    fileName: "src/fields/Array/index.tsx",
+                                                    lineNumber: 353,
+                                                    columnNumber: 19
+                                                }, this)
+                                            }, void 0, false, {
+                                                fileName: "src/fields/Array/index.tsx",
+                                                lineNumber: 352,
+                                                columnNumber: 17
+                                            }, this),
+                                            /*#__PURE__*/ _jsxDEV("li", {
+                                                children: /*#__PURE__*/ _jsxDEV("button", {
+                                                    className: `${baseClass}__header-action`,
+                                                    onClick: ()=>toggleCollapseAll(false),
+                                                    type: "button",
+                                                    children: t('fields:showAll')
+                                                }, void 0, false, {
+                                                    fileName: "src/fields/Array/index.tsx",
+                                                    lineNumber: 362,
+                                                    columnNumber: 19
+                                                }, this)
+                                            }, void 0, false, {
+                                                fileName: "src/fields/Array/index.tsx",
+                                                lineNumber: 361,
+                                                columnNumber: 17
+                                            }, this)
+                                        ]
+                                    }, void 0, true, {
+                                        fileName: "src/fields/Array/index.tsx",
+                                        lineNumber: 351,
+                                        columnNumber: 15
+                                    }, this),
+                                    /*#__PURE__*/ _jsxDEV("li", {
+                                        children: /*#__PURE__*/ _jsxDEV(ClipboardAction, {
+                                            allowCopy: rows?.length > 0,
+                                            allowPaste: !readOnly,
+                                            className: `${baseClass}__header-action`,
+                                            disabled: disabled,
+                                            fields: fields,
+                                            getDataToCopy: getDataToCopy,
+                                            onPaste: pasteField,
+                                            path: path,
+                                            type: type
+                                        }, void 0, false, {
+                                            fileName: "src/fields/Array/index.tsx",
+                                            lineNumber: 373,
+                                            columnNumber: 15
+                                        }, this)
+                                    }, void 0, false, {
+                                        fileName: "src/fields/Array/index.tsx",
+                                        lineNumber: 372,
+                                        columnNumber: 13
+                                    }, this)
+                                ]
+                            }, void 0, true, {
+                                fileName: "src/fields/Array/index.tsx",
+                                lineNumber: 349,
+                                columnNumber: 11
+                            }, this)
+                        ]
+                    }, void 0, true, {
+                        fileName: "src/fields/Array/index.tsx",
+                        lineNumber: 329,
+                        columnNumber: 9
+                    }, this),
+                    /*#__PURE__*/ _jsxDEV(RenderCustomComponent, {
+                        CustomComponent: Description,
+                        Fallback: /*#__PURE__*/ _jsxDEV(FieldDescription, {
+                            description: description,
+                            path: path
+                        }, void 0, false, {
+                            fileName: "src/fields/Array/index.tsx",
+                            lineNumber: 389,
+                            columnNumber: 21
+                        }, void 0)
+                    }, void 0, false, {
+                        fileName: "src/fields/Array/index.tsx",
+                        lineNumber: 387,
+                        columnNumber: 9
+                    }, this)
+                ]
+            }, void 0, true, {
+                fileName: "src/fields/Array/index.tsx",
+                lineNumber: 328,
+                columnNumber: 7
+            }, this),
+            /*#__PURE__*/ _jsxDEV(NullifyLocaleField, {
+                fieldValue: value,
                 localized: localized,
                 path: path,
-                required: required
-              })
-            })
-          }), fieldHasErrors && fieldErrorCount > 0 && /*#__PURE__*/_jsx(ErrorPill, {
-            count: fieldErrorCount,
-            i18n: i18n,
-            withMessage: true
-          })]
-        }), /*#__PURE__*/_jsxs("ul", {
-          className: `${baseClass}__header-actions`,
-          children: [rows?.length > 0 && /*#__PURE__*/_jsxs(Fragment, {
-            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("li", {
-            children: /*#__PURE__*/_jsx(ClipboardAction, {
-              allowCopy: rows?.length > 0,
-              allowPaste: !readOnly,
-              className: `${baseClass}__header-action`,
-              disabled: disabled,
-              fields: fields,
-              getDataToCopy: getDataToCopy,
-              onPaste: pasteField,
-              path: path,
-              type: type
-            })
-          })]
-        })]
-      }), /*#__PURE__*/_jsx(RenderCustomComponent, {
-        CustomComponent: Description,
-        Fallback: /*#__PURE__*/_jsx(FieldDescription, {
-          description: description,
-          path: path
-        })
-      })]
-    }), /*#__PURE__*/_jsx(NullifyLocaleField, {
-      fieldValue: value_0,
-      localized: localized,
-      path: path,
-      readOnly: readOnly
-    }), BeforeInput, (rows?.length > 0 || !valid && (showRequired || showMinRows)) && /*#__PURE__*/_jsxs(DraggableSortable, {
-      className: `${baseClass}__draggable-rows`,
-      ids: rows.map(row => row.id),
-      onDragEnd: ({
-        moveFromIndex: moveFromIndex_0,
-        moveToIndex: moveToIndex_0
-      }) => moveRow(moveFromIndex_0, moveToIndex_0),
-      children: [rows.map((rowData, i) => {
-        const {
-          id: rowID_0,
-          isLoading
-        } = rowData;
-        const rowPath = `${path}.${i}`;
-        const rowErrorCount = errorPaths?.filter(errorPath => errorPath.startsWith(rowPath + '.')).length;
-        return /*#__PURE__*/_jsx(DraggableSortableItem, {
-          disabled: readOnly || disabled || !isSortable,
-          id: rowID_0,
-          children: draggableSortableItemProps => /*#__PURE__*/_jsx(ArrayRow, {
-            ...draggableSortableItemProps,
-            addRow: addRow,
-            copyRow: copyRow,
-            CustomRowLabel: rows?.[i]?.customComponents?.RowLabel,
-            duplicateRow: duplicateRow,
-            errorCount: rowErrorCount,
-            fields: fields,
-            forceRender: forceRender,
-            hasMaxRows: hasMaxRows,
-            isLoading: isLoading,
-            isSortable: isSortable,
-            labels: labels,
-            moveRow: moveRow,
-            parentPath: path,
-            pasteRow: pasteRow,
-            path: rowPath,
-            permissions: permissions,
-            readOnly: readOnly || disabled,
-            removeRow: removeRow,
-            row: rowData,
-            rowCount: rows?.length,
-            rowIndex: i,
-            schemaPath: schemaPath,
-            setCollapse: setCollapse
-          })
-        }, rowID_0);
-      }), !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:rows' : 'general:row')
-          })
-        })]
-      })]
-    }), !hasMaxRows && !readOnly && /*#__PURE__*/_jsx(Button, {
-      buttonStyle: "icon-label",
-      className: `${baseClass}__add-row`,
-      disabled: disabled,
-      icon: "plus",
-      iconPosition: "left",
-      iconStyle: "with-border",
-      onClick: () => {
-        void addRow(value_0 || 0);
-      },
-      children: t('fields:addLabel', {
-        label: getTranslation(labels.singular, i18n)
-      })
-    }), AfterInput]
-  });
+                readOnly: readOnly
+            }, void 0, false, {
+                fileName: "src/fields/Array/index.tsx",
+                lineNumber: 392,
+                columnNumber: 7
+            }, this),
+            BeforeInput,
+            (rows?.length > 0 || !valid && (showRequired || showMinRows)) && /*#__PURE__*/ _jsxDEV(DraggableSortable, {
+                className: `${baseClass}__draggable-rows`,
+                ids: rows.map((row)=>row.id),
+                onDragEnd: ({ moveFromIndex, moveToIndex })=>moveRow(moveFromIndex, moveToIndex),
+                children: [
+                    rows.map((rowData, i)=>{
+                        const { id: rowID, isLoading } = rowData;
+                        const rowPath = `${path}.${i}`;
+                        const rowErrorCount = errorPaths?.filter((errorPath)=>errorPath.startsWith(rowPath + '.')).length;
+                        return /*#__PURE__*/ _jsxDEV(DraggableSortableItem, {
+                            disabled: readOnly || disabled || !isSortable,
+                            id: rowID,
+                            children: (draggableSortableItemProps)=>/*#__PURE__*/ _jsxDEV(ArrayRow, {
+                                    ...draggableSortableItemProps,
+                                    addRow: addRow,
+                                    copyRow: copyRow,
+                                    CustomRowLabel: rows?.[i]?.customComponents?.RowLabel,
+                                    duplicateRow: duplicateRow,
+                                    errorCount: rowErrorCount,
+                                    fields: fields,
+                                    forceRender: forceRender,
+                                    hasMaxRows: hasMaxRows,
+                                    isLoading: isLoading,
+                                    isSortable: isSortable,
+                                    labels: labels,
+                                    moveRow: moveRow,
+                                    parentPath: path,
+                                    pasteRow: pasteRow,
+                                    path: rowPath,
+                                    permissions: permissions,
+                                    readOnly: readOnly || disabled,
+                                    removeRow: removeRow,
+                                    row: rowData,
+                                    rowCount: rows?.length,
+                                    rowIndex: i,
+                                    schemaPath: schemaPath,
+                                    scrollIdPrefix: scrollIdPrefix,
+                                    setCollapse: setCollapse
+                                }, void 0, false, {
+                                    fileName: "src/fields/Array/index.tsx",
+                                    lineNumber: 421,
+                                    columnNumber: 19
+                                }, this)
+                        }, rowID, false, {
+                            fileName: "src/fields/Array/index.tsx",
+                            lineNumber: 415,
+                            columnNumber: 15
+                        }, this);
+                    }),
+                    !valid && /*#__PURE__*/ _jsxDEV(React.Fragment, {
+                        children: [
+                            showRequired && /*#__PURE__*/ _jsxDEV(Banner, {
+                                children: t('validation:fieldHasNo', {
+                                    label: getTranslation(labels.plural, i18n)
+                                })
+                            }, void 0, false, {
+                                fileName: "src/fields/Array/index.tsx",
+                                lineNumber: 455,
+                                columnNumber: 17
+                            }, this),
+                            showMinRows && /*#__PURE__*/ _jsxDEV(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')
+                                })
+                            }, void 0, false, {
+                                fileName: "src/fields/Array/index.tsx",
+                                lineNumber: 460,
+                                columnNumber: 17
+                            }, this)
+                        ]
+                    }, void 0, true, {
+                        fileName: "src/fields/Array/index.tsx",
+                        lineNumber: 453,
+                        columnNumber: 13
+                    }, this)
+                ]
+            }, void 0, true, {
+                fileName: "src/fields/Array/index.tsx",
+                lineNumber: 400,
+                columnNumber: 9
+            }, this),
+            !hasMaxRows && !readOnly && /*#__PURE__*/ _jsxDEV(Button, {
+                buttonStyle: "icon-label",
+                className: `${baseClass}__add-row`,
+                disabled: disabled,
+                icon: "plus",
+                iconPosition: "left",
+                iconStyle: "with-border",
+                onClick: ()=>{
+                    void addRow(value || 0);
+                },
+                children: t('fields:addLabel', {
+                    label: getTranslation(labels.singular, i18n)
+                })
+            }, void 0, false, {
+                fileName: "src/fields/Array/index.tsx",
+                lineNumber: 474,
+                columnNumber: 9
+            }, this),
+            AfterInput
+        ]
+    }, void 0, true, {
+        fileName: "src/fields/Array/index.tsx",
+        lineNumber: 310,
+        columnNumber: 5
+    }, this);
 };
 export const ArrayField = withCondition(ArrayFieldComponent);
+
 //# sourceMappingURL=index.js.map