@payloadcms/ui 3.0.0-canary.ff8c8fd → 3.0.0

package/dist/fields/Array/ArrayRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"ArrayRow.js","names":["c","_c","getTranslation","React","ArrayAction","Collapsible","ErrorPill","useFormSubmitted","RenderFields","RowLabel","useTranslation","baseClass","ArrayRow","t0","$","CustomRowLabel","addRow","attributes","duplicateRow","errorCount","fields","forceRender","t1","hasMaxRows","indexPath","isDragging","isSortable","labels","listeners","moveRow","path","parentPath","permissions","readOnly","removeRow","row","rowCount","rowIndex","schemaPath","setCollapse","setNodeRef","transform","transition","undefined","i18n","hasSubmitted","fallbackLabel","singular","String","padStart","fieldHasErrors","t2","t3","filter","Boolean","classNames","join","t4","split","t5","t6","id","collapsed","t7","_jsx","count","withMessage","t8","ref","style","zIndex","children","actions","index","className","collapsibleStyle","dragHandleProps","header","_jsxs","rowLabel","rowNumber","onToggle","margins"],"sources":["../../../src/fields/Array/ArrayRow.tsx"],"sourcesContent":["'use client'\nimport type { ArrayField, ClientField, FieldPermissions, MappedComponent, Row } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport type { UseDraggableSortableReturn } from '../../elements/DraggableSortable/useDraggableSortable/types.js'\n\nimport { ArrayAction } from '../../elements/ArrayAction/index.js'\nimport { Collapsible } from '../../elements/Collapsible/index.js'\nimport { ErrorPill } from '../../elements/ErrorPill/index.js'\nimport { useFormSubmitted } from '../../forms/Form/context.js'\nimport { RenderFields } from '../../forms/RenderFields/index.js'\nimport { RowLabel } from '../../forms/RowLabel/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'array-field'\n\ntype ArrayRowProps = {\n  readonly RowLabel?: MappedComponent\n  readonly addRow: (rowIndex: number) => Promise<void> | void\n  readonly duplicateRow: (rowIndex: number) => void\n  readonly errorCount: number\n  readonly fields: ClientField[]\n  readonly forceRender?: boolean\n  readonly hasMaxRows?: boolean\n  readonly indexPath: string\n  readonly isSortable?: boolean\n  readonly labels: Partial<ArrayField['labels']>\n  readonly moveRow: (fromIndex: number, toIndex: number) => void\n  readonly path: string\n  readonly permissions: FieldPermissions\n  readonly readOnly?: boolean\n  readonly removeRow: (rowIndex: number) => void\n  readonly row: Row\n  readonly rowCount: number\n  readonly rowIndex: number\n  readonly schemaPath: string\n  readonly setCollapse: (rowID: string, collapsed: boolean) => void\n} & UseDraggableSortableReturn\n\nexport const ArrayRow: React.FC<ArrayRowProps> = ({\n  RowLabel: CustomRowLabel,\n  addRow,\n  attributes,\n  duplicateRow,\n  errorCount,\n  fields,\n  forceRender = false,\n  hasMaxRows,\n  indexPath,\n  isDragging,\n  isSortable,\n  labels,\n  listeners,\n  moveRow,\n  path: parentPath,\n  permissions,\n  readOnly,\n  removeRow,\n  row,\n  rowCount,\n  rowIndex,\n  schemaPath,\n  setCollapse,\n  setNodeRef,\n  transform,\n  transition,\n}) => {\n  const path = `${parentPath}.${rowIndex}`\n  const { i18n } = useTranslation()\n  const hasSubmitted = useFormSubmitted()\n\n  const fallbackLabel = `${getTranslation(labels.singular, i18n)} ${String(rowIndex + 1).padStart(\n    2,\n    '0',\n  )}`\n\n  const fieldHasErrors = errorCount > 0 && hasSubmitted\n\n  const classNames = [\n    `${baseClass}__row`,\n    fieldHasErrors ? `${baseClass}__row--has-errors` : `${baseClass}__row--no-errors`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  return (\n    <div\n      id={`${parentPath.split('.').join('-')}-row-${rowIndex}`}\n      key={`${parentPath}-row-${row.id}`}\n      ref={setNodeRef}\n      style={{\n        transform,\n        transition,\n        zIndex: isDragging ? 1 : undefined,\n      }}\n    >\n      <Collapsible\n        actions={\n          !readOnly ? (\n            <ArrayAction\n              addRow={addRow}\n              duplicateRow={duplicateRow}\n              hasMaxRows={hasMaxRows}\n              index={rowIndex}\n              isSortable={isSortable}\n              moveRow={moveRow}\n              removeRow={removeRow}\n              rowCount={rowCount}\n            />\n          ) : undefined\n        }\n        className={classNames}\n        collapsibleStyle={fieldHasErrors ? 'error' : 'default'}\n        dragHandleProps={\n          isSortable\n            ? {\n                id: row.id,\n                attributes,\n                listeners,\n              }\n            : undefined\n        }\n        header={\n          <div className={`${baseClass}__row-header`}>\n            <RowLabel\n              RowLabel={CustomRowLabel}\n              i18n={i18n}\n              path={path}\n              rowLabel={fallbackLabel}\n              rowNumber={rowIndex + 1}\n            />\n            {fieldHasErrors && <ErrorPill count={errorCount} i18n={i18n} withMessage />}\n          </div>\n        }\n        isCollapsed={row.collapsed}\n        onToggle={(collapsed) => setCollapse(row.id, collapsed)}\n      >\n        <RenderFields\n          className={`${baseClass}__fields`}\n          fields={fields}\n          forceRender={forceRender}\n          indexPath={indexPath}\n          margins=\"small\"\n          path={path}\n          permissions={permissions?.fields}\n          readOnly={readOnly}\n          schemaPath={schemaPath}\n        />\n      </Collapsible>\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,SAASC,cAAc,QAAQ;AAC/B,OAAOC,KAAA,MAAW;AAIlB,SAASC,WAAW,QAAQ;AAC5B,SAASC,WAAW,QAAQ;AAC5B,SAASC,SAAS,QAAQ;AAC1B,SAASC,gBAAgB,QAAQ;AACjC,SAASC,YAAY,QAAQ;AAC7B,SAASC,QAAQ,QAAQ;AACzB,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAyBlB,OAAO,MAAMC,QAAA,GAAoCC,EAAA;EAAA,MAAAC,CAAA,GAAAb,EAAA;EAAC;IAAAQ,QAAA,EAAAM,cAAA;IAAAC,MAAA;IAAAC,UAAA;IAAAC,YAAA;IAAAC,UAAA;IAAAC,MAAA;IAAAC,WAAA,EAAAC,EAAA;IAAAC,UAAA;IAAAC,SAAA;IAAAC,UAAA;IAAAC,UAAA;IAAAC,MAAA;IAAAC,SAAA;IAAAC,OAAA;IAAAC,IAAA,EAAAC,UAAA;IAAAC,WAAA;IAAAC,QAAA;IAAAC,SAAA;IAAAC,GAAA;IAAAC,QAAA;IAAAC,QAAA;IAAAC,UAAA;IAAAC,WAAA;IAAAC,UAAA;IAAAC,SAAA;IAAAC;EAAA,IAAA7B,EA2BjD;EApBC,MAAAQ,WAAA,GAAAC,EAAmB,KAAAqB,SAAA,WAAnBrB,EAAmB;EAqBnB,MAAAQ,IAAA,GAAa,GAAGC,UAAA,IAAcM,QAAA,EAAU;EACxC;IAAAO;EAAA,IAAiBlC,cAAA;EACjB,MAAAmC,YAAA,GAAqBtC,gBAAA;EAErB,MAAAuC,aAAA,GAAsB,GAAG5C,cAAA,CAAeyB,MAAA,CAAAoB,QAAA,EAAiBH,IAAA,KAASI,MAAA,CAAOX,QAAA,IAAW,EAAAY,QAAA,IAElF,MACC;EAEH,MAAAC,cAAA,GAAuB/B,UAAA,IAAa,IAAK0B,YAAA;EAIvC,MAAAM,EAAA,GAAAD,cAAA,GAAiB,GAAAvC,SAAA,mBAA+B,GAAG,GAAAA,SAAA,kBAA8B;EAAA,IAAAyC,EAAA;EAAA,IAAAtC,CAAA,QAAAqC,EAAA;IAFhEC,EAAA,IACjB,GAAAzC,SAAA,OAAmB,EACnBwC,EAAiF,EAAAE,MAAA,CAAAC,OAEzE;IAAAxC,CAAA,MAAAqC,EAAA;IAAArC,CAAA,MAAAsC,EAAA;EAAA;IAAAA,EAAA,GAAAtC,CAAA;EAAA;EAJV,MAAAyC,UAAA,GAAmBH,EAIT,CAAAI,IAAA,CACF;EAIA,MAAAC,EAAA,MAAG1B,UAAA,CAAA2B,KAAA,CAAiB,KAAAF,IAAA,CAAU,YAAYnB,QAAA,EAAU;EAM9C,MAAAsB,EAAA,GAAAlC,UAAA,OAAAkB,SAAiB;EAAA,IAAAiB,EAAA;EAAA,IAAA9C,CAAA,QAAA2B,SAAA,IAAA3B,CAAA,QAAA4B,UAAA,IAAA5B,CAAA,QAAA6C,EAAA,IAAA7C,CAAA,QAAAmB,QAAA,IAAAnB,CAAA,QAAAE,MAAA,IAAAF,CAAA,QAAAI,YAAA,IAAAJ,CAAA,QAAAS,UAAA,IAAAT,CAAA,QAAAuB,QAAA,IAAAvB,CAAA,SAAAY,UAAA,IAAAZ,CAAA,SAAAe,OAAA,IAAAf,CAAA,SAAAoB,SAAA,IAAApB,CAAA,SAAAsB,QAAA,IAAAtB,CAAA,SAAAoC,cAAA,IAAApC,CAAA,SAAAqB,GAAA,CAAA0B,EAAA,IAAA/C,CAAA,SAAAqB,GAAA,CAAA2B,SAAA,IAAAhD,CAAA,SAAAG,UAAA,IAAAH,CAAA,SAAAc,SAAA,IAAAd,CAAA,SAAAC,cAAA,IAAAD,CAAA,SAAA8B,IAAA,IAAA9B,CAAA,SAAAgB,IAAA,IAAAhB,CAAA,SAAAgC,aAAA,IAAAhC,CAAA,SAAAK,UAAA,IAAAL,CAAA,SAAAyB,WAAA,IAAAzB,CAAA,SAAAkB,WAAA,IAAAlB,CAAA,SAAAM,MAAA,IAAAN,CAAA,SAAAO,WAAA,IAAAP,CAAA,SAAAU,SAAA,IAAAV,CAAA,SAAAwB,UAAA,IAAAxB,CAAA,SAAAyC,UAAA,IAAAzC,CAAA,SAAA2C,EAAA,IAAA3C,CAAA,SAAA0B,UAAA,IAAA1B,CAAA,SAAAiB,UAAA;IAAA,IAAAgC,EAAA;IAAA,IAAAjD,CAAA,SAAAoC,cAAA,IAAApC,CAAA,SAAAK,UAAA,IAAAL,CAAA,SAAA8B,IAAA;MAsCpBmB,EAAA,GAAAb,cAAA,IAAkBc,IAAA,CAAA1D,SAAA;QAAA2D,KAAA,EAAkB9C,UAAA;QAAAyB,IAAA;QAAAsB,WAAA;MAAA,C;;;;;;;;;;MAI/BC,EAAA,GAAAL,SAAA,IAAevB,WAAA,CAAYJ,GAAA,CAAA0B,EAAA,EAAQC,SAAA;MAAAhD,CAAA,OAAAyB,WAAA;MAAAzB,CAAA,OAAAqB,GAAA,CAAA0B,EAAA;MAAA/C,CAAA,OAAAqD,EAAA;IAAA;MAAAA,EAAA,GAAArD,CAAA;IAAA;IAjDjD8C,EAAA,GAAAI,IAAA,CAAC;MAAAH,EAAA,EACKJ,EAAoD;MAAAW,GAAA,EAEnD5B,UAAA;MAAA6B,KAAA;QAAA5B,SAAA;QAAAC,UAAA;QAAA4B,MAAA,EAIKX;MAAiB;MAAAY,QAAA,EAG3BP,IAAA,CAAA3D,WAAA;QAAAmE,OAAA,EAEI,CAACvC,QAAA,GACC+B,IAAA,CAAA5D,WAAA;UAAAY,MAAA;UAAAE,YAAA;UAAAK,UAAA;UAAAkD,KAAA,EAISpC,QAAA;UAAAX,UAAA;UAAAG,OAAA;UAAAK,SAAA;UAAAE;QAAA,C,aAMP;QAAAsC,SAAA,EAEKnB,UAAA;QAAAoB,gBAAA,EACOzB,cAAA,GAAiB,UAAU;QAAA0B,eAAA,EAE3ClD,UAAA;UAAAmC,EAAA,EAEU1B,GAAA,CAAA0B,EAAA;UAAA5C,UAAA;UAAAW;QAAA,IAAAe,SAIN;QAAAkC,MAAA,EAGJC,KAAA,CAAC;UAAAJ,SAAA,EAAe,GAAA/D,SAAA,cAA0B;UAAA4D,QAAA,GACxCP,IAAA,CAAAvD,QAAA;YAAAA,QAAA,EACYM,cAAA;YAAA6B,IAAA;YAAAd,IAAA;YAAAiD,QAAA,EAGAjC,aAAA;YAAAkC,SAAA,EACC3C,QAAA;UAAW,C,GAEvB0B,E;;qBAGQ5B,GAAA,CAAA2B,SAAA;QAAAmB,QAAA,EACHd,EAAmC;QAAAI,QAAA,EAE7CP,IAAA,CAAAxD,YAAA;UAAAkE,SAAA,EACa,GAAA/D,SAAA,UAAsB;UAAAS,MAAA;UAAAC,WAAA;UAAAG,SAAA;UAAA0D,OAAA,EAIzB;UAAApD,IAAA;UAAAE,WAAA,EAEKA,WAAA,EAAAZ,MAAA;UAAAa,QAAA;UAAAK;QAAA,C;;OAxDZ,GAAGP,UAAA,QAAkBI,GAAA,CAAA0B,EAAA,EAAQ;IAAA/C,CAAA,MAAA2B,SAAA;IAAA3B,CAAA,MAAA4B,UAAA;IAAA5B,CAAA,MAAA6C,EAAA;IAAA7C,CAAA,MAAAmB,QAAA;IAAAnB,CAAA,MAAAE,MAAA;IAAAF,CAAA,MAAAI,YAAA;IAAAJ,CAAA,MAAAS,UAAA;IAAAT,CAAA,MAAAuB,QAAA;IAAAvB,CAAA,OAAAY,UAAA;IAAAZ,CAAA,OAAAe,OAAA;IAAAf,CAAA,OAAAoB,SAAA;IAAApB,CAAA,OAAAsB,QAAA;IAAAtB,CAAA,OAAAoC,cAAA;IAAApC,CAAA,OAAAqB,GAAA,CAAA0B,EAAA;IAAA/C,CAAA,OAAAqB,GAAA,CAAA2B,SAAA;IAAAhD,CAAA,OAAAG,UAAA;IAAAH,CAAA,OAAAc,SAAA;IAAAd,CAAA,OAAAC,cAAA;IAAAD,CAAA,OAAA8B,IAAA;IAAA9B,CAAA,OAAAgB,IAAA;IAAAhB,CAAA,OAAAgC,aAAA;IAAAhC,CAAA,OAAAK,UAAA;IAAAL,CAAA,OAAAyB,WAAA;IAAAzB,CAAA,OAAAkB,WAAA;IAAAlB,CAAA,OAAAM,MAAA;IAAAN,CAAA,OAAAO,WAAA;IAAAP,CAAA,OAAAU,SAAA;IAAAV,CAAA,OAAAwB,UAAA;IAAAxB,CAAA,OAAAyC,UAAA;IAAAzC,CAAA,OAAA2C,EAAA;IAAA3C,CAAA,OAAA0B,UAAA;IAAA1B,CAAA,OAAAiB,UAAA;IAAAjB,CAAA,OAAA8C,EAAA;EAAA;IAAAA,EAAA,GAAA9C,CAAA;EAAA;EAAA,OAFpC8C,EAEoC;AAAA,CA+DxC","ignoreList":[]}
+{"version":3,"file":"ArrayRow.js","names":["c","_c","getTranslation","React","ArrayAction","Collapsible","ErrorPill","useFormSubmitted","RenderFields","RowLabel","useTranslation","baseClass","ArrayRow","t0","$","addRow","attributes","CustomRowLabel","duplicateRow","errorCount","fields","forceRender","t1","hasMaxRows","isDragging","isSortable","labels","listeners","moveRow","parentPath","path","permissions","readOnly","removeRow","row","rowCount","rowIndex","schemaPath","setCollapse","setNodeRef","transform","transition","undefined","i18n","hasSubmitted","fallbackLabel","singular","String","padStart","fieldHasErrors","t2","t3","filter","Boolean","classNames","join","t4","split","t5","t6","id","collapsed","t7","_jsx","count","withMessage","t8","ref","style","zIndex","children","actions","index","className","collapsibleStyle","dragHandleProps","header","_jsxs","CustomComponent","label","rowNumber","onToggle","margins","parentIndexPath","parentSchemaPath"],"sources":["../../../src/fields/Array/ArrayRow.tsx"],"sourcesContent":["'use client'\nimport type { ArrayField, ClientField, Row, SanitizedFieldPermissions } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport type { UseDraggableSortableReturn } from '../../elements/DraggableSortable/useDraggableSortable/types.js'\n\nimport { ArrayAction } from '../../elements/ArrayAction/index.js'\nimport { Collapsible } from '../../elements/Collapsible/index.js'\nimport { ErrorPill } from '../../elements/ErrorPill/index.js'\nimport { useFormSubmitted } from '../../forms/Form/context.js'\nimport { RenderFields } from '../../forms/RenderFields/index.js'\nimport { RowLabel } from '../../forms/RowLabel/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'array-field'\n\ntype ArrayRowProps = {\n  readonly addRow: (rowIndex: number) => Promise<void> | void\n  readonly CustomRowLabel?: React.ReactNode\n  readonly duplicateRow: (rowIndex: number) => void\n  readonly errorCount: number\n  readonly fields: ClientField[]\n  readonly forceRender?: boolean\n  readonly hasMaxRows?: boolean\n  readonly isSortable?: boolean\n  readonly labels: Partial<ArrayField['labels']>\n  readonly moveRow: (fromIndex: number, toIndex: number) => void\n  readonly parentPath: string\n  readonly path: string\n  readonly permissions: SanitizedFieldPermissions\n  readonly readOnly?: boolean\n  readonly removeRow: (rowIndex: number) => void\n  readonly row: Row\n  readonly rowCount: number\n  readonly rowIndex: number\n  readonly schemaPath: string\n  readonly setCollapse: (rowID: string, collapsed: boolean) => void\n} & UseDraggableSortableReturn\n\nexport const ArrayRow: React.FC<ArrayRowProps> = ({\n  addRow,\n  attributes,\n  CustomRowLabel,\n  duplicateRow,\n  errorCount,\n  fields,\n  forceRender = false,\n  hasMaxRows,\n  isDragging,\n  isSortable,\n  labels,\n  listeners,\n  moveRow,\n  parentPath,\n  path,\n  permissions,\n  readOnly,\n  removeRow,\n  row,\n  rowCount,\n  rowIndex,\n  schemaPath,\n  setCollapse,\n  setNodeRef,\n  transform,\n  transition,\n}) => {\n  const { i18n } = useTranslation()\n  const hasSubmitted = useFormSubmitted()\n\n  const fallbackLabel = `${getTranslation(labels.singular, i18n)} ${String(rowIndex + 1).padStart(\n    2,\n    '0',\n  )}`\n\n  const fieldHasErrors = errorCount > 0 && hasSubmitted\n\n  const classNames = [\n    `${baseClass}__row`,\n    fieldHasErrors ? `${baseClass}__row--has-errors` : `${baseClass}__row--no-errors`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  return (\n    <div\n      id={`${parentPath.split('.').join('-')}-row-${rowIndex}`}\n      key={`${parentPath}-row-${row.id}`}\n      ref={setNodeRef}\n      style={{\n        transform,\n        transition,\n        zIndex: isDragging ? 1 : undefined,\n      }}\n    >\n      <Collapsible\n        actions={\n          !readOnly ? (\n            <ArrayAction\n              addRow={addRow}\n              duplicateRow={duplicateRow}\n              hasMaxRows={hasMaxRows}\n              index={rowIndex}\n              isSortable={isSortable}\n              moveRow={moveRow}\n              removeRow={removeRow}\n              rowCount={rowCount}\n            />\n          ) : undefined\n        }\n        className={classNames}\n        collapsibleStyle={fieldHasErrors ? 'error' : 'default'}\n        dragHandleProps={\n          isSortable\n            ? {\n                id: row.id,\n                attributes,\n                listeners,\n              }\n            : undefined\n        }\n        header={\n          <div className={`${baseClass}__row-header`}>\n            <RowLabel\n              CustomComponent={CustomRowLabel}\n              label={fallbackLabel}\n              path={path}\n              rowNumber={rowIndex}\n            />\n            {fieldHasErrors && <ErrorPill count={errorCount} i18n={i18n} withMessage />}\n          </div>\n        }\n        isCollapsed={row.collapsed}\n        onToggle={(collapsed) => setCollapse(row.id, collapsed)}\n      >\n        <RenderFields\n          className={`${baseClass}__fields`}\n          fields={fields}\n          forceRender={forceRender}\n          margins=\"small\"\n          parentIndexPath=\"\"\n          parentPath={path}\n          parentSchemaPath={schemaPath}\n          permissions={permissions === true ? permissions : permissions?.fields}\n          readOnly={readOnly}\n        />\n      </Collapsible>\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,SAASC,cAAc,QAAQ;AAC/B,OAAOC,KAAA,MAAW;AAIlB,SAASC,WAAW,QAAQ;AAC5B,SAASC,WAAW,QAAQ;AAC5B,SAASC,SAAS,QAAQ;AAC1B,SAASC,gBAAgB,QAAQ;AACjC,SAASC,YAAY,QAAQ;AAC7B,SAASC,QAAQ,QAAQ;AACzB,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAyBlB,OAAO,MAAMC,QAAA,GAAoCC,EAAA;EAAA,MAAAC,CAAA,GAAAb,EAAA;EAAC;IAAAc,MAAA;IAAAC,UAAA;IAAAC,cAAA;IAAAC,YAAA;IAAAC,UAAA;IAAAC,MAAA;IAAAC,WAAA,EAAAC,EAAA;IAAAC,UAAA;IAAAC,UAAA;IAAAC,UAAA;IAAAC,MAAA;IAAAC,SAAA;IAAAC,OAAA;IAAAC,UAAA;IAAAC,IAAA;IAAAC,WAAA;IAAAC,QAAA;IAAAC,SAAA;IAAAC,GAAA;IAAAC,QAAA;IAAAC,QAAA;IAAAC,UAAA;IAAAC,WAAA;IAAAC,UAAA;IAAAC,SAAA;IAAAC;EAAA,IAAA5B,EA2BjD;EApBC,MAAAQ,WAAA,GAAAC,EAAmB,KAAAoB,SAAA,WAAnBpB,EAAmB;EAqBnB;IAAAqB;EAAA,IAAiBjC,cAAA;EACjB,MAAAkC,YAAA,GAAqBrC,gBAAA;EAErB,MAAAsC,aAAA,GAAsB,GAAG3C,cAAA,CAAewB,MAAA,CAAAoB,QAAA,EAAiBH,IAAA,KAASI,MAAA,CAAOX,QAAA,IAAW,EAAAY,QAAA,IAElF,MACC;EAEH,MAAAC,cAAA,GAAuB9B,UAAA,IAAa,IAAKyB,YAAA;EAIvC,MAAAM,EAAA,GAAAD,cAAA,GAAiB,GAAAtC,SAAA,mBAA+B,GAAG,GAAAA,SAAA,kBAA8B;EAAA,IAAAwC,EAAA;EAAA,IAAArC,CAAA,QAAAoC,EAAA;IAFhEC,EAAA,IACjB,GAAAxC,SAAA,OAAmB,EACnBuC,EAAiF,EAAAE,MAAA,CAAAC,OAEzE;IAAAvC,CAAA,MAAAoC,EAAA;IAAApC,CAAA,MAAAqC,EAAA;EAAA;IAAAA,EAAA,GAAArC,CAAA;EAAA;EAJV,MAAAwC,UAAA,GAAmBH,EAIT,CAAAI,IAAA,CACF;EAIA,MAAAC,EAAA,MAAG3B,UAAA,CAAA4B,KAAA,CAAiB,KAAAF,IAAA,CAAU,YAAYnB,QAAA,EAAU;EAM9C,MAAAsB,EAAA,GAAAlC,UAAA,OAAAkB,SAAiB;EAAA,IAAAiB,EAAA;EAAA,IAAA7C,CAAA,QAAA0B,SAAA,IAAA1B,CAAA,QAAA2B,UAAA,IAAA3B,CAAA,QAAA4C,EAAA,IAAA5C,CAAA,QAAAkB,QAAA,IAAAlB,CAAA,QAAAC,MAAA,IAAAD,CAAA,QAAAI,YAAA,IAAAJ,CAAA,QAAAS,UAAA,IAAAT,CAAA,QAAAsB,QAAA,IAAAtB,CAAA,SAAAW,UAAA,IAAAX,CAAA,SAAAc,OAAA,IAAAd,CAAA,SAAAmB,SAAA,IAAAnB,CAAA,SAAAqB,QAAA,IAAArB,CAAA,SAAAmC,cAAA,IAAAnC,CAAA,SAAAoB,GAAA,CAAA0B,EAAA,IAAA9C,CAAA,SAAAoB,GAAA,CAAA2B,SAAA,IAAA/C,CAAA,SAAAE,UAAA,IAAAF,CAAA,SAAAa,SAAA,IAAAb,CAAA,SAAAG,cAAA,IAAAH,CAAA,SAAA+B,aAAA,IAAA/B,CAAA,SAAAgB,IAAA,IAAAhB,CAAA,SAAAK,UAAA,IAAAL,CAAA,SAAA6B,IAAA,IAAA7B,CAAA,SAAAwB,WAAA,IAAAxB,CAAA,SAAAiB,WAAA,IAAAjB,CAAA,SAAAM,MAAA,IAAAN,CAAA,SAAAO,WAAA,IAAAP,CAAA,SAAAuB,UAAA,IAAAvB,CAAA,SAAAwC,UAAA,IAAAxC,CAAA,SAAA0C,EAAA,IAAA1C,CAAA,SAAAyB,UAAA,IAAAzB,CAAA,SAAAe,UAAA;IAAA,IAAAiC,EAAA;IAAA,IAAAhD,CAAA,SAAAmC,cAAA,IAAAnC,CAAA,SAAAK,UAAA,IAAAL,CAAA,SAAA6B,IAAA;MAqCpBmB,EAAA,GAAAb,cAAA,IAAkBc,IAAA,CAAAzD,SAAA;QAAA0D,KAAA,EAAkB7C,UAAA;QAAAwB,IAAA;QAAAsB,WAAA;MAAA,C;;;;;;;;;;MAI/BC,EAAA,GAAAL,SAAA,IAAevB,WAAA,CAAYJ,GAAA,CAAA0B,EAAA,EAAQC,SAAA;MAAA/C,CAAA,OAAAwB,WAAA;MAAAxB,CAAA,OAAAoB,GAAA,CAAA0B,EAAA;MAAA9C,CAAA,OAAAoD,EAAA;IAAA;MAAAA,EAAA,GAAApD,CAAA;IAAA;IAhDjD6C,EAAA,GAAAI,IAAA,CAAC;MAAAH,EAAA,EACKJ,EAAoD;MAAAW,GAAA,EAEnD5B,UAAA;MAAA6B,KAAA;QAAA5B,SAAA;QAAAC,UAAA;QAAA4B,MAAA,EAIKX;MAAiB;MAAAY,QAAA,EAG3BP,IAAA,CAAA1D,WAAA;QAAAkE,OAAA,EAEI,CAACvC,QAAA,GACC+B,IAAA,CAAA3D,WAAA;UAAAW,MAAA;UAAAG,YAAA;UAAAK,UAAA;UAAAiD,KAAA,EAISpC,QAAA;UAAAX,UAAA;UAAAG,OAAA;UAAAK,SAAA;UAAAE;QAAA,C,aAMP;QAAAsC,SAAA,EAEKnB,UAAA;QAAAoB,gBAAA,EACOzB,cAAA,GAAiB,UAAU;QAAA0B,eAAA,EAE3ClD,UAAA;UAAAmC,EAAA,EAEU1B,GAAA,CAAA0B,EAAA;UAAA5C,UAAA;UAAAW;QAAA,IAAAe,SAIN;QAAAkC,MAAA,EAGJC,KAAA,CAAC;UAAAJ,SAAA,EAAe,GAAA9D,SAAA,cAA0B;UAAA2D,QAAA,GACxCP,IAAA,CAAAtD,QAAA;YAAAqE,eAAA,EACmB7D,cAAA;YAAA8D,KAAA,EACVlC,aAAA;YAAAf,IAAA;YAAAkD,SAAA,EAEI5C;UAAA,C,GAEZ0B,E;;qBAGQ5B,GAAA,CAAA2B,SAAA;QAAAoB,QAAA,EACHf,EAAmC;QAAAI,QAAA,EAE7CP,IAAA,CAAAvD,YAAA;UAAAiE,SAAA,EACa,GAAA9D,SAAA,UAAsB;UAAAS,MAAA;UAAAC,WAAA;UAAA6D,OAAA,EAGzB;UAAAC,eAAA,EACQ;UAAAtD,UAAA,EACJC,IAAA;UAAAsD,gBAAA,EACM/C,UAAA;UAAAN,WAAA,EACLA,WAAA,SAAgB,GAAOA,WAAA,GAAcA,WAAA,EAAAX,MAAa;UAAAY;QAAA,C;;OAxD9D,GAAGH,UAAA,QAAkBK,GAAA,CAAA0B,EAAA,EAAQ;IAAA9C,CAAA,MAAA0B,SAAA;IAAA1B,CAAA,MAAA2B,UAAA;IAAA3B,CAAA,MAAA4C,EAAA;IAAA5C,CAAA,MAAAkB,QAAA;IAAAlB,CAAA,MAAAC,MAAA;IAAAD,CAAA,MAAAI,YAAA;IAAAJ,CAAA,MAAAS,UAAA;IAAAT,CAAA,MAAAsB,QAAA;IAAAtB,CAAA,OAAAW,UAAA;IAAAX,CAAA,OAAAc,OAAA;IAAAd,CAAA,OAAAmB,SAAA;IAAAnB,CAAA,OAAAqB,QAAA;IAAArB,CAAA,OAAAmC,cAAA;IAAAnC,CAAA,OAAAoB,GAAA,CAAA0B,EAAA;IAAA9C,CAAA,OAAAoB,GAAA,CAAA2B,SAAA;IAAA/C,CAAA,OAAAE,UAAA;IAAAF,CAAA,OAAAa,SAAA;IAAAb,CAAA,OAAAG,cAAA;IAAAH,CAAA,OAAA+B,aAAA;IAAA/B,CAAA,OAAAgB,IAAA;IAAAhB,CAAA,OAAAK,UAAA;IAAAL,CAAA,OAAA6B,IAAA;IAAA7B,CAAA,OAAAwB,WAAA;IAAAxB,CAAA,OAAAiB,WAAA;IAAAjB,CAAA,OAAAM,MAAA;IAAAN,CAAA,OAAAO,WAAA;IAAAP,CAAA,OAAAuB,UAAA;IAAAvB,CAAA,OAAAwC,UAAA;IAAAxC,CAAA,OAAA0C,EAAA;IAAA1C,CAAA,OAAAyB,UAAA;IAAAzB,CAAA,OAAAe,UAAA;IAAAf,CAAA,OAAA6C,EAAA;EAAA;IAAAA,EAAA,GAAA7C,CAAA;EAAA;EAAA,OAFpC6C,EAEoC;AAAA,CA8DxC","ignoreList":[]}

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

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

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

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

package/dist/fields/Array/index.js

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