@payloadcms/ui 4.0.0-internal.9496957 → 4.0.0-internal.970009e

package/dist/fields/Array/index.js

@@ -1,5 +1,6 @@
 'use client';
 
+import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { getTranslation } from '@payloadcms/translations';
@@ -33,34 +34,40 @@ import { useTranslation } from '../../providers/Translation/index.js';
 import { scrollToID } from '../../utilities/scrollToID.js';
 import { mergeFieldStyles } from '../mergeFieldStyles.js';
 import { fieldBaseClass } from '../shared/index.js';
+import { useRowFocus } from '../shared/useRowFocus.js';
 import { ArrayRow } from './ArrayRow.js';
 import './index.css';
 const baseClass = 'array-field';
 export const ArrayFieldComponent = props => {
+  const $ = _c(78);
   const {
     field,
-    field: {
-      name,
-      type,
-      admin: {
-        className,
-        description,
-        isSortable = true
-      } = {},
-      fields,
-      label,
-      localized,
-      maxRows,
-      minRows: minRowsProp,
-      required
-    },
-    forceRender = false,
+    field: t0,
+    forceRender: t1,
     path: pathFromProps,
     permissions,
     readOnly,
     schemaPath: schemaPathFromProps,
     validate
   } = props;
+  const {
+    name,
+    type,
+    admin: t2,
+    fields,
+    label,
+    localized,
+    maxRows,
+    minRows: minRowsProp,
+    required
+  } = t0;
+  const {
+    className,
+    description,
+    isSortable: t3
+  } = t2 === undefined ? {} : t2;
+  const isSortable = t3 === undefined ? true : t3;
+  const forceRender = t1 === undefined ? false : t1;
   const schemaPath = schemaPathFromProps ?? name;
   const minRows = minRowsProp ?? (required ? 1 : 0);
   const {
@@ -78,241 +85,406 @@ export const ArrayFieldComponent = props => {
   const submitted = useFormSubmitted();
   const currentLocale = useLocale();
   const locale = currentLocale?.code;
+  const rowsID = useId();
   const {
     i18n,
     t
   } = useTranslation();
   const {
-    config: {
-      localization
-    }
+    config: t4
   } = useConfig();
-  const editingDefaultLocale = (() => {
+  const {
+    localization
+  } = t4;
+  let t5;
+  bb0: {
     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;
+      t5 = locale === defaultLocale;
+      break bb0;
     }
-    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) {
+    t5 = true;
+  }
+  const editingDefaultLocale = t5;
+  let t6;
+  if ($[0] !== t) {
+    t6 = 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: undefined,
-        singular: p.field.label
+        plural: t("general:rows"),
+        singular: t("general:row")
       };
-    }
-    return {
-      plural: t('general:rows'),
-      singular: t('general:row')
     };
-  };
+    $[0] = t;
+    $[1] = t6;
+  } else {
+    t6 = $[1];
+  }
+  const getLabels = t6;
   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]);
+  let t7;
+  if ($[2] !== editingDefaultLocale || $[3] !== maxRows || $[4] !== minRows || $[5] !== required || $[6] !== validate) {
+    t7 = (value, options) => {
+      if (!editingDefaultLocale && value === null) {
+        return true;
+      }
+      if (typeof validate === "function") {
+        return validate(value, {
+          ...options,
+          maxRows,
+          minRows,
+          required
+        });
+      }
+    };
+    $[2] = editingDefaultLocale;
+    $[3] = maxRows;
+    $[4] = minRows;
+    $[5] = required;
+    $[6] = validate;
+    $[7] = t7;
+  } else {
+    t7 = $[7];
+  }
+  const memoizedValidate = t7;
+  let t8;
+  if ($[8] !== memoizedValidate || $[9] !== pathFromProps) {
+    t8 = {
+      hasRows: true,
+      potentiallyStalePath: pathFromProps,
+      validate: memoizedValidate
+    };
+    $[8] = memoizedValidate;
+    $[9] = pathFromProps;
+    $[10] = t8;
+  } else {
+    t8 = $[10];
+  }
   const {
-    customComponents: {
-      AfterInput,
-      BeforeInput,
-      Description,
-      Error,
-      Label
-    } = {},
+    customComponents: t9,
     disabled,
     errorPaths,
     path,
-    rows = [],
+    rows: t10,
     showError,
     valid,
     value: value_0
-  } = useField({
-    hasRows: true,
-    potentiallyStalePath: pathFromProps,
-    validate: memoizedValidate
-  });
+  } = useField(t8);
+  const {
+    AfterInput,
+    BeforeInput,
+    Description,
+    Error,
+    Label
+  } = t9 === undefined ? {} : t9;
+  let t11;
+  if ($[11] !== t10) {
+    t11 = t10 === undefined ? [] : t10;
+    $[11] = t10;
+    $[12] = t11;
+  } else {
+    t11 = $[12];
+  }
+  const rows = t11;
   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, schemaPath, scrollIdPrefix]);
-  const duplicateRow = useCallback(rowIndex_0 => {
-    dispatchFields({
-      type: 'DUPLICATE_ROW',
-      path,
-      rowIndex: rowIndex_0
-    });
-    setModified(true);
-    setTimeout(() => {
-      scrollToID(`${scrollIdPrefix}-row-${rowIndex_0}`);
-    }, 0);
-  }, [dispatchFields, path, scrollIdPrefix, 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
-    });
-    setDocFieldPreferences(path, {
-      collapsed: collapsedIDs_0
-    });
-  }, [dispatchFields, path, rows, setDocFieldPreferences]);
-  const copyRow = useCallback(rowIndex_2 => {
-    const formState = {
-      ...getFields()
+  const scrollIdPrefix = `scroll-${componentId}`;
+  const {
+    fieldRef,
+    focusRow
+  } = useRowFocus();
+  let t12;
+  if ($[13] !== addFieldRow || $[14] !== focusRow || $[15] !== path || $[16] !== schemaPath) {
+    t12 = rowIndex => {
+      addFieldRow({
+        path,
+        rowIndex,
+        schemaPath
+      });
+      focusRow(`${path.split(".").join("-")}-row-${rowIndex}`);
     };
-    const clipboardResult = clipboardCopy({
-      type,
-      fields,
-      getDataToCopy: () => reduceFormStateByPath({
-        formState,
+    $[13] = addFieldRow;
+    $[14] = focusRow;
+    $[15] = path;
+    $[16] = schemaPath;
+    $[17] = t12;
+  } else {
+    t12 = $[17];
+  }
+  const addRow = t12;
+  let t13;
+  if ($[18] !== dispatchFields || $[19] !== path || $[20] !== scrollIdPrefix || $[21] !== setModified) {
+    t13 = rowIndex_0 => {
+      dispatchFields({
+        type: "DUPLICATE_ROW",
         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 pasteArgs = {
-      onPaste: dataFromClipboard => {
-        const formState_0 = {
-          ...getFields()
-        };
-        const newState = mergeFormStateFromClipboard({
-          dataFromClipboard,
-          formState: formState_0,
-          path,
-          rowIndex: rowIndex_3
-        });
-        replaceState(newState);
-        setModified(true);
-      },
-      path,
-      schemaFields: fields,
-      t
+        rowIndex: rowIndex_0
+      });
+      setModified(true);
+      setTimeout(() => {
+        scrollToID(`${scrollIdPrefix}-row-${rowIndex_0}`);
+      }, 0);
     };
-    const clipboardResult_0 = clipboardPaste(pasteArgs);
-    if (typeof clipboardResult_0 === 'string') {
-      toast.error(clipboardResult_0);
-    }
-  }, [fields, getFields, path, replaceState, setModified, t]);
-  const pasteRowBelow = useCallback(rowIndex_4 => {
-    const pasteArgs_0 = {
-      onPaste: dataFromClipboard_0 => {
-        const formState_1 = {
-          ...getFields()
-        };
-        const newState_0 = insertRowFromClipboard({
-          dataFromClipboard: dataFromClipboard_0,
-          formState: formState_1,
+    $[18] = dispatchFields;
+    $[19] = path;
+    $[20] = scrollIdPrefix;
+    $[21] = setModified;
+    $[22] = t13;
+  } else {
+    t13 = $[22];
+  }
+  const duplicateRow = t13;
+  let t14;
+  if ($[23] !== path || $[24] !== removeFieldRow) {
+    t14 = rowIndex_1 => {
+      removeFieldRow({
+        path,
+        rowIndex: rowIndex_1
+      });
+    };
+    $[23] = path;
+    $[24] = removeFieldRow;
+    $[25] = t14;
+  } else {
+    t14 = $[25];
+  }
+  const removeRow = t14;
+  let t15;
+  if ($[26] !== moveFieldRow || $[27] !== path) {
+    t15 = (moveFromIndex, moveToIndex) => {
+      moveFieldRow({
+        moveFromIndex,
+        moveToIndex,
+        path
+      });
+    };
+    $[26] = moveFieldRow;
+    $[27] = path;
+    $[28] = t15;
+  } else {
+    t15 = $[28];
+  }
+  const moveRow = t15;
+  let t16;
+  if ($[29] !== dispatchFields || $[30] !== path || $[31] !== rows || $[32] !== setDocFieldPreferences) {
+    t16 = collapsed => {
+      const {
+        collapsedIDs,
+        updatedRows
+      } = toggleAllRows({
+        collapsed,
+        rows
+      });
+      setDocFieldPreferences(path, {
+        collapsed: collapsedIDs
+      });
+      dispatchFields({
+        type: "SET_ALL_ROWS_COLLAPSED",
+        path,
+        updatedRows
+      });
+    };
+    $[29] = dispatchFields;
+    $[30] = path;
+    $[31] = rows;
+    $[32] = setDocFieldPreferences;
+    $[33] = t16;
+  } else {
+    t16 = $[33];
+  }
+  const toggleCollapseAll = t16;
+  let t17;
+  if ($[34] !== dispatchFields || $[35] !== path || $[36] !== rows || $[37] !== setDocFieldPreferences) {
+    t17 = (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
+      });
+      setDocFieldPreferences(path, {
+        collapsed: collapsedIDs_0
+      });
+    };
+    $[34] = dispatchFields;
+    $[35] = path;
+    $[36] = rows;
+    $[37] = setDocFieldPreferences;
+    $[38] = t17;
+  } else {
+    t17 = $[38];
+  }
+  const setCollapse = t17;
+  let t18;
+  if ($[39] !== fields || $[40] !== getFields || $[41] !== path || $[42] !== t || $[43] !== type) {
+    t18 = rowIndex_2 => {
+      const formState = {
+        ...getFields()
+      };
+      const clipboardResult = clipboardCopy({
+        type,
+        fields,
+        getDataToCopy: () => reduceFormStateByPath({
+          formState,
           path,
-          rowIndex: rowIndex_4 + 1
-        });
-        replaceState(newState_0);
-        setModified(true);
-        setTimeout(() => {
-          scrollToID(`${scrollIdPrefix}-row-${rowIndex_4 + 1}`);
-        }, 0);
-      },
-      path,
-      schemaFields: fields,
-      t
+          rowIndex: rowIndex_2
+        }),
+        path,
+        rowIndex: rowIndex_2,
+        t
+      });
+      if (typeof clipboardResult === "string") {
+        toast.error(clipboardResult);
+      } else {
+        toast.success(t("general:copied"));
+      }
     };
-    const clipboardResult_1 = clipboardPaste(pasteArgs_0);
-    if (typeof clipboardResult_1 === 'string') {
-      toast.error(clipboardResult_1);
-    }
-  }, [fields, getFields, path, replaceState, scrollIdPrefix, setModified, t]);
-  const pasteField = useCallback(dataFromClipboard_1 => {
-    const formState_2 = {
-      ...getFields()
+    $[39] = fields;
+    $[40] = getFields;
+    $[41] = path;
+    $[42] = t;
+    $[43] = type;
+    $[44] = t18;
+  } else {
+    t18 = $[44];
+  }
+  const copyRow = t18;
+  let t19;
+  if ($[45] !== fields || $[46] !== getFields || $[47] !== path || $[48] !== replaceState || $[49] !== setModified || $[50] !== t) {
+    t19 = rowIndex_3 => {
+      const pasteArgs = {
+        onPaste: dataFromClipboard => {
+          const formState_0 = {
+            ...getFields()
+          };
+          const newState = mergeFormStateFromClipboard({
+            dataFromClipboard,
+            formState: formState_0,
+            path,
+            rowIndex: rowIndex_3
+          });
+          replaceState(newState);
+          setModified(true);
+        },
+        path,
+        schemaFields: fields,
+        t
+      };
+      const clipboardResult_0 = clipboardPaste(pasteArgs);
+      if (typeof clipboardResult_0 === "string") {
+        toast.error(clipboardResult_0);
+      }
+    };
+    $[45] = fields;
+    $[46] = getFields;
+    $[47] = path;
+    $[48] = replaceState;
+    $[49] = setModified;
+    $[50] = t;
+    $[51] = t19;
+  } else {
+    t19 = $[51];
+  }
+  const pasteRow = t19;
+  let t20;
+  if ($[52] !== fields || $[53] !== getFields || $[54] !== path || $[55] !== replaceState || $[56] !== scrollIdPrefix || $[57] !== setModified || $[58] !== t) {
+    t20 = rowIndex_4 => {
+      const pasteArgs_0 = {
+        onPaste: dataFromClipboard_0 => {
+          const formState_1 = {
+            ...getFields()
+          };
+          const newState_0 = insertRowFromClipboard({
+            dataFromClipboard: dataFromClipboard_0,
+            formState: formState_1,
+            path,
+            rowIndex: rowIndex_4 + 1
+          });
+          replaceState(newState_0);
+          setModified(true);
+          setTimeout(() => {
+            scrollToID(`${scrollIdPrefix}-row-${rowIndex_4 + 1}`);
+          }, 0);
+        },
+        path,
+        schemaFields: fields,
+        t
+      };
+      const clipboardResult_1 = clipboardPaste(pasteArgs_0);
+      if (typeof clipboardResult_1 === "string") {
+        toast.error(clipboardResult_1);
+      }
+    };
+    $[52] = fields;
+    $[53] = getFields;
+    $[54] = path;
+    $[55] = replaceState;
+    $[56] = scrollIdPrefix;
+    $[57] = setModified;
+    $[58] = t;
+    $[59] = t20;
+  } else {
+    t20 = $[59];
+  }
+  const pasteRowBelow = t20;
+  let t21;
+  if ($[60] !== getFields || $[61] !== path || $[62] !== replaceState || $[63] !== setModified) {
+    t21 = dataFromClipboard_1 => {
+      const formState_2 = {
+        ...getFields()
+      };
+      const newState_1 = mergeFormStateFromClipboard({
+        dataFromClipboard: dataFromClipboard_1,
+        formState: formState_2,
+        path
+      });
+      replaceState(newState_1);
+      setModified(true);
     };
-    const newState_1 = mergeFormStateFromClipboard({
-      dataFromClipboard: dataFromClipboard_1,
-      formState: formState_2,
+    $[60] = getFields;
+    $[61] = path;
+    $[62] = replaceState;
+    $[63] = setModified;
+    $[64] = t21;
+  } else {
+    t21 = $[64];
+  }
+  const pasteField = t21;
+  let t22;
+  if ($[65] !== getFields || $[66] !== path) {
+    t22 = () => reduceFormStateByPath({
+      formState: {
+        ...getFields()
+      },
       path
     });
-    replaceState(newState_1);
-    setModified(true);
-  }, [getFields, path, replaceState, setModified]);
-  const getDataToCopy = useCallback(() => reduceFormStateByPath({
-    formState: {
-      ...getFields()
-    },
-    path
-  }), [getFields, path]);
+    $[65] = getFields;
+    $[66] = path;
+    $[67] = t22;
+  } else {
+    t22 = $[67];
+  }
+  const getDataToCopy = t22;
   const hasMaxRows = maxRows && rows.length >= maxRows;
   const fieldErrorCount = errorPaths.length;
   const fieldHasErrors = submitted && (fieldErrorCount > 0 || !valid);
@@ -321,91 +493,135 @@ export const ArrayFieldComponent = props => {
   const showMinRows = rows.length && rows.length < minRows || required && rows.length === 0;
   const shouldShowSummaryBanner = !valid && (showRequired || showMinRows);
   const shouldShowFieldError = showError && !shouldShowSummaryBanner;
-  const styles = useMemo(() => mergeFieldStyles(field), [field]);
-  const renderDragOverlay = useCallback(activeId => {
-    const activeIndex = rows.findIndex(row => row.id === activeId);
-    if (activeIndex === -1) {
-      return null;
+  let t23;
+  if ($[68] !== field) {
+    t23 = mergeFieldStyles(field);
+    $[68] = field;
+    $[69] = t23;
+  } else {
+    t23 = $[69];
+  }
+  const styles = t23;
+  let t24;
+  if ($[70] !== i18n || $[71] !== label || $[72] !== path || $[73] !== rows) {
+    t24 = activeId => {
+      const activeIndex = rows.findIndex(row => row.id === activeId);
+      if (activeIndex === -1) {
+        return null;
+      }
+      return _jsx(DragOverlayPreview, {
+        header: _jsx(RowLabel, {
+          CustomComponent: rows?.[activeIndex]?.customComponents?.RowLabel,
+          label: `${getTranslation(label, i18n)} ${String(activeIndex + 1).padStart(2, "0")}`,
+          path: `${path}.${activeIndex}`,
+          rowNumber: activeIndex
+        })
+      });
+    };
+    $[70] = i18n;
+    $[71] = label;
+    $[72] = path;
+    $[73] = rows;
+    $[74] = t24;
+  } else {
+    t24 = $[74];
+  }
+  const renderDragOverlay = t24;
+  const t25 = [fieldBaseClass, baseClass, className, fieldHasErrors ? `${baseClass}--has-error` : `${baseClass}--has-no-error`].filter(Boolean).join(" ");
+  let t26;
+  if ($[75] !== path) {
+    let t27;
+    if ($[77] === Symbol.for("react.memo_cache_sentinel")) {
+      t27 = /\./g;
+      $[77] = t27;
+    } else {
+      t27 = $[77];
     }
-    return /*#__PURE__*/_jsx(DragOverlayPreview, {
-      header: /*#__PURE__*/_jsx(RowLabel, {
-        CustomComponent: rows?.[activeIndex]?.customComponents?.RowLabel,
-        label: `${getTranslation(label, i18n)} ${String(activeIndex + 1).padStart(2, '0')}`,
-        path: `${path}.${activeIndex}`,
-        rowNumber: activeIndex
-      })
-    });
-  }, [rows, label, i18n, path]);
-  return /*#__PURE__*/_jsxs("div", {
-    className: [fieldBaseClass, baseClass, className, fieldHasErrors ? `${baseClass}--has-error` : `${baseClass}--has-no-error`].filter(Boolean).join(' '),
-    id: `field-${path.replace(/\./g, '__')}`,
+    t26 = path.replace(t27, "__");
+    $[75] = path;
+    $[76] = t26;
+  } else {
+    t26 = $[76];
+  }
+  return _jsxs("div", {
+    className: t25,
+    id: `field-${t26}`,
+    ref: fieldRef,
     style: styles,
-    children: [shouldShowFieldError && /*#__PURE__*/_jsx(RenderCustomComponent, {
+    children: [shouldShowFieldError && _jsx(RenderCustomComponent, {
       CustomComponent: Error,
-      Fallback: /*#__PURE__*/_jsx(FieldError, {
-        path: path,
-        showError: showError
+      Fallback: _jsx(FieldError, {
+        path,
+        showError
       })
-    }), /*#__PURE__*/_jsxs("header", {
+    }), _jsxs("header", {
       className: `${baseClass}__header`,
-      children: [/*#__PURE__*/_jsxs("div", {
+      children: [_jsxs("div", {
         className: `${baseClass}__header-wrap`,
-        children: [/*#__PURE__*/_jsxs("div", {
+        children: [_jsxs("div", {
           className: `${baseClass}__header-content`,
-          children: [/*#__PURE__*/_jsx("h3", {
+          children: [_jsx("h3", {
             className: `${baseClass}__title`,
-            children: /*#__PURE__*/_jsx(RenderCustomComponent, {
+            children: _jsx(RenderCustomComponent, {
               CustomComponent: Label,
-              Fallback: /*#__PURE__*/_jsx(FieldLabel, {
+              Fallback: _jsx(FieldLabel, {
                 as: "span",
-                label: label,
-                localized: localized,
-                path: path,
-                required: required
+                label,
+                localized,
+                path,
+                required
               })
             })
-          }), displayedErrorCount > 0 && /*#__PURE__*/_jsx(ErrorPill, {
+          }), displayedErrorCount > 0 && _jsx(ErrorPill, {
             count: displayedErrorCount,
-            i18n: i18n,
+            i18n,
             withMessage: true
           })]
-        }), /*#__PURE__*/_jsxs("ul", {
+        }), _jsxs("ul", {
           className: `${baseClass}__header-actions`,
-          children: [rows?.length > 0 && /*#__PURE__*/_jsx(CollapseAllToggle, {
+          children: [rows?.length > 0 && _jsx(CollapseAllToggle, {
+            controls: rowsID,
+            isExpanded: rows.some(_temp),
+            label: getTranslation(label || labels?.plural || name, i18n),
             onClick: toggleCollapseAll
-          }), /*#__PURE__*/_jsx("li", {
-            children: /*#__PURE__*/_jsx(ClipboardAction, {
+          }), _jsx("li", {
+            children: _jsx(ClipboardAction, {
               allowCopy: rows?.length > 0,
               allowPaste: !readOnly,
               className: `${baseClass}__header-action`,
-              disabled: disabled,
-              fields: fields,
-              getDataToCopy: getDataToCopy,
+              disabled,
+              fields,
+              getDataToCopy,
               onPaste: pasteField,
-              path: path,
-              type: type
+              path,
+              type
             })
           })]
         })]
-      }), /*#__PURE__*/_jsx(RenderCustomComponent, {
+      }), _jsx(RenderCustomComponent, {
         CustomComponent: Description,
-        Fallback: /*#__PURE__*/_jsx(FieldDescription, {
-          description: description,
-          path: path
+        Fallback: _jsx(FieldDescription, {
+          description,
+          path
         })
       })]
-    }), /*#__PURE__*/_jsx(NullifyLocaleField, {
+    }), _jsx(NullifyLocaleField, {
       fieldValue: value_0,
-      localized: localized,
-      path: path,
-      readOnly: readOnly
-    }), BeforeInput, (rows?.length > 0 || !valid && (showRequired || showMinRows)) && /*#__PURE__*/_jsxs(DraggableSortable, {
+      localized,
+      path,
+      readOnly
+    }), BeforeInput, (rows?.length > 0 || !valid && (showRequired || showMinRows)) && _jsxs(DraggableSortable, {
+      announceRows: true,
       className: `${baseClass}__draggable-rows`,
-      ids: rows.map(row_0 => row_0.id),
-      onDragEnd: ({
-        moveFromIndex: moveFromIndex_0,
-        moveToIndex: moveToIndex_0
-      }) => moveRow(moveFromIndex_0, moveToIndex_0),
+      id: rowsID,
+      ids: rows.map(_temp2),
+      onDragEnd: t27 => {
+        const {
+          moveFromIndex: moveFromIndex_0,
+          moveToIndex: moveToIndex_0
+        } = t27;
+        return moveRow(moveFromIndex_0, moveToIndex_0);
+      },
       renderDragOverlay: isSortable && !readOnly && !disabled ? renderDragOverlay : undefined,
       sortingStrategy: verticalListSortingStrategy,
       children: [rows.map((rowData, i) => {
@@ -414,66 +630,72 @@ export const ArrayFieldComponent = props => {
           isLoading
         } = rowData;
         const rowPath = `${path}.${i}`;
-        const rowErrorCount = errorPaths?.filter(errorPath => errorPath.startsWith(rowPath + '.')).length;
-        return /*#__PURE__*/_jsx(DraggableSortableItem, {
+        const rowErrorCount = errorPaths?.filter(errorPath => errorPath.startsWith(rowPath + ".")).length;
+        return _jsx(DraggableSortableItem, {
           disabled: readOnly || disabled || !isSortable,
           id: rowID_0,
-          children: draggableSortableItemProps => /*#__PURE__*/_jsx(ArrayRow, {
+          children: draggableSortableItemProps => _jsx(ArrayRow, {
             ...draggableSortableItemProps,
-            addRow: addRow,
-            copyRow: copyRow,
+            addRow,
+            copyRow,
             CustomRowLabel: rows?.[i]?.customComponents?.RowLabel,
-            duplicateRow: duplicateRow,
+            duplicateRow,
             errorCount: rowErrorCount,
-            fields: fields,
-            forceRender: forceRender,
-            hasMaxRows: hasMaxRows,
-            isLoading: isLoading,
-            isSortable: isSortable,
-            labels: labels,
-            moveRow: moveRow,
+            fields,
+            forceRender,
+            hasMaxRows,
+            isLoading,
+            isSortable,
+            labels,
+            moveRow,
             parentPath: path,
-            pasteRow: pasteRow,
-            pasteRowBelow: pasteRowBelow,
+            pasteRow,
+            pasteRowBelow,
             path: rowPath,
-            permissions: permissions,
+            permissions,
             readOnly: readOnly || disabled,
-            removeRow: removeRow,
+            removeRow,
             row: rowData,
             rowCount: rows?.length,
             rowIndex: i,
-            schemaPath: schemaPath,
-            scrollIdPrefix: scrollIdPrefix,
-            setCollapse: setCollapse
+            schemaPath,
+            scrollIdPrefix,
+            setCollapse
           })
         }, rowID_0);
-      }), !valid && /*#__PURE__*/_jsxs(React.Fragment, {
-        children: [showRequired && /*#__PURE__*/_jsx(Banner, {
-          children: t('validation:fieldHasNo', {
+      }), !valid && _jsxs(React.Fragment, {
+        children: [showRequired && _jsx(Banner, {
+          children: t("validation:fieldHasNo", {
             label: getTranslation(labels.plural, i18n)
           })
-        }), showMinRows && /*#__PURE__*/_jsx(Banner, {
+        }), showMinRows && _jsx(Banner, {
           type: "danger",
-          children: t('validation:requiresAtLeast', {
+          children: t("validation:requiresAtLeast", {
             count: minRows,
-            label: getTranslation(minRows > 1 ? labels.plural : labels.singular, i18n) || t(minRows > 1 ? 'general:rows' : 'general:row')
+            label: getTranslation(minRows > 1 ? labels.plural : labels.singular, i18n) || t(minRows > 1 ? "general:rows" : "general:row")
           })
         })]
       })]
-    }), !hasMaxRows && !readOnly && /*#__PURE__*/_jsx(Button, {
+    }), !hasMaxRows && !readOnly && _jsx(Button, {
       buttonStyle: "ghost",
       className: `${baseClass}__add-row`,
-      disabled: disabled,
-      icon: /*#__PURE__*/_jsx(CirclePlusIcon, {}),
+      disabled,
+      icon: _jsx(CirclePlusIcon, {}),
       iconPosition: "left",
       onClick: () => {
-        void addRow(value_0 || 0);
+        addRow(value_0 || 0);
       },
-      children: t('fields:addLabel', {
+      children: t("fields:addLabel", {
         label: getTranslation(labels.singular, i18n)
       })
     }), AfterInput]
   });
 };
 export const ArrayField = withCondition(ArrayFieldComponent);
+function _temp(row_0) {
+  return !row_0.collapsed;
+}
+function _temp2(row_1) {
+  return row_1.id;
+}
 //# sourceMappingURL=index.js.map