@payloadcms/ui 4.0.0-internal.5b1e7cd → 4.0.0-internal.c2b57ce

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

@@ -1,7 +1,7 @@
 import type { ArrayField, ClientComponentProps, ClientField, Row, SanitizedFieldPermissions } from 'payload';
 import React from 'react';
 import type { UseDraggableSortableReturn } from '../../elements/DraggableSortable/useDraggableSortable/types.js';
-import './index.scss';
+import './index.css';
 type ArrayRowProps = {
     readonly addRow: (rowIndex: number) => Promise<void> | void;
     readonly copyRow: (rowIndex: number) => void;

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

@@ -1 +1 @@
-{"version":3,"file":"ArrayRow.d.ts","sourceRoot":"","sources":["../../../src/fields/Array/ArrayRow.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,UAAU,EACV,oBAAoB,EACpB,WAAW,EACX,GAAG,EACH,yBAAyB,EAC1B,MAAM,SAAS,CAAA;AAGhB,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,gEAAgE,CAAA;AAWhH,OAAO,cAAc,CAAA;AAIrB,KAAK,aAAa,GAAG;IACnB,QAAQ,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;IAC3D,QAAQ,CAAC,OAAO,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IAC5C,QAAQ,CAAC,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzC,QAAQ,CAAC,YAAY,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IACjD,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,MAAM,EAAE,WAAW,EAAE,CAAA;IAC9B,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAA;IAC7B,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;IAC5B,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAA;IAC7B,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,CAAA;IAC9C,QAAQ,CAAC,OAAO,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IAC9D,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7C,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,WAAW,EAAE,yBAAyB,CAAA;IAC/C,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,SAAS,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IAC9C,QAAQ,CAAC,GAAG,EAAE,GAAG,CAAA;IACjB,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAA;IACzB,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAA;IACzB,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAA;IAC/B,QAAQ,CAAC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,KAAK,IAAI,CAAA;CAClE,GAAG,IAAI,CAAC,oBAAoB,EAAE,aAAa,CAAC,GAC3C,0BAA0B,CAAA;AAE5B,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAiI5C,CAAA"}
+{"version":3,"file":"ArrayRow.d.ts","sourceRoot":"","sources":["../../../src/fields/Array/ArrayRow.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,UAAU,EACV,oBAAoB,EACpB,WAAW,EACX,GAAG,EACH,yBAAyB,EAC1B,MAAM,SAAS,CAAA;AAGhB,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,gEAAgE,CAAA;AAWhH,OAAO,aAAa,CAAA;AAIpB,KAAK,aAAa,GAAG;IACnB,QAAQ,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;IAC3D,QAAQ,CAAC,OAAO,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IAC5C,QAAQ,CAAC,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzC,QAAQ,CAAC,YAAY,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IACjD,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,MAAM,EAAE,WAAW,EAAE,CAAA;IAC9B,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAA;IAC7B,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;IAC5B,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAA;IAC7B,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,CAAA;IAC9C,QAAQ,CAAC,OAAO,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IAC9D,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7C,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,WAAW,EAAE,yBAAyB,CAAA;IAC/C,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,SAAS,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IAC9C,QAAQ,CAAC,GAAG,EAAE,GAAG,CAAA;IACjB,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAA;IACzB,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAA;IACzB,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAA;IAC/B,QAAQ,CAAC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,KAAK,IAAI,CAAA;CAClE,GAAG,IAAI,CAAC,oBAAoB,EAAE,aAAa,CAAC,GAC3C,0BAA0B,CAAA;AAE5B,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA8H5C,CAAA"}

package/dist/fields/Array/ArrayRow.js

@@ -13,10 +13,10 @@ import { RenderFields } from '../../forms/RenderFields/index.js';
 import { RowLabel } from '../../forms/RowLabel/index.js';
 import { useThrottledValue } from '../../hooks/useThrottledValue.js';
 import { useTranslation } from '../../providers/Translation/index.js';
-import './index.scss';
+import './index.css';
 const baseClass = 'array-field';
 export const ArrayRow = t0 => {
-  const $ = _c(41);
+  const $ = _c(42);
   const {
     addRow,
     attributes,
@@ -58,35 +58,37 @@ export const ArrayRow = t0 => {
   const fallbackLabel = `${getTranslation(labels.singular, i18n)} ${String(rowIndex + 1).padStart(2, "0")}`;
   const fieldHasErrors = errorCount > 0 && hasSubmitted;
   const t2 = fieldHasErrors ? `${baseClass}__row--has-errors` : `${baseClass}__row--no-errors`;
-  let t3;
-  if ($[0] !== t2) {
-    t3 = [`${baseClass}__row`, t2].filter(Boolean);
+  const t3 = isDragging && `${baseClass}__row--is-dragging`;
+  let t4;
+  if ($[0] !== t2 || $[1] !== t3) {
+    t4 = [`${baseClass}__row`, t2, t3].filter(Boolean);
     $[0] = t2;
     $[1] = t3;
+    $[2] = t4;
   } else {
-    t3 = $[1];
+    t4 = $[2];
   }
-  const classNames = t3.join(" ");
-  const t4 = `${parentPath.split(".").join("-")}-row-${rowIndex}`;
-  const t5 = isDragging ? 1 : undefined;
-  let t6;
-  if ($[2] !== CustomRowLabel || $[3] !== addRow || $[4] !== attributes || $[5] !== classNames || $[6] !== copyRow || $[7] !== duplicateRow || $[8] !== errorCount || $[9] !== fallbackLabel || $[10] !== fieldHasErrors || $[11] !== fields || $[12] !== forceRender || $[13] !== hasMaxRows || $[14] !== i18n || $[15] !== isLoading || $[16] !== isSortable || $[17] !== listeners || $[18] !== moveRow || $[19] !== parentPath || $[20] !== pasteRow || $[21] !== path || $[22] !== permissions || $[23] !== readOnly || $[24] !== removeRow || $[25] !== row.collapsed || $[26] !== row.id || $[27] !== rowCount || $[28] !== rowIndex || $[29] !== schemaPath || $[30] !== scrollIdPrefix || $[31] !== setCollapse || $[32] !== setNodeRef || $[33] !== t4 || $[34] !== t5 || $[35] !== transform || $[36] !== transition) {
-    let t7;
-    if ($[38] !== row.id || $[39] !== setCollapse) {
-      t7 = collapsed => setCollapse(row.id, collapsed);
-      $[38] = row.id;
-      $[39] = setCollapse;
-      $[40] = t7;
+  const classNames = t4.join(" ");
+  const t5 = `${parentPath.split(".").join("-")}-row-${rowIndex}`;
+  const t6 = isDragging ? 1 : undefined;
+  let t7;
+  if ($[3] !== CustomRowLabel || $[4] !== addRow || $[5] !== attributes || $[6] !== classNames || $[7] !== copyRow || $[8] !== duplicateRow || $[9] !== errorCount || $[10] !== fallbackLabel || $[11] !== fieldHasErrors || $[12] !== fields || $[13] !== forceRender || $[14] !== hasMaxRows || $[15] !== i18n || $[16] !== isLoading || $[17] !== isSortable || $[18] !== listeners || $[19] !== moveRow || $[20] !== parentPath || $[21] !== pasteRow || $[22] !== path || $[23] !== permissions || $[24] !== readOnly || $[25] !== removeRow || $[26] !== row.collapsed || $[27] !== row.id || $[28] !== rowCount || $[29] !== rowIndex || $[30] !== schemaPath || $[31] !== scrollIdPrefix || $[32] !== setCollapse || $[33] !== setNodeRef || $[34] !== t5 || $[35] !== t6 || $[36] !== transform || $[37] !== transition) {
+    let t8;
+    if ($[39] !== row.id || $[40] !== setCollapse) {
+      t8 = collapsed => setCollapse(row.id, collapsed);
+      $[39] = row.id;
+      $[40] = setCollapse;
+      $[41] = t8;
     } else {
-      t7 = $[40];
+      t8 = $[41];
     }
-    t6 = _jsx("div", {
-      id: t4,
+    t7 = _jsx("div", {
+      id: t5,
       ref: setNodeRef,
       style: {
         transform,
         transition,
-        zIndex: t5
+        zIndex: t6
       },
       children: _jsx(Collapsible, {
         actions: !readOnly ? _jsx(ArrayAction, {
@@ -126,12 +128,11 @@ export const ArrayRow = t0 => {
           })]
         }),
         isCollapsed: row.collapsed,
-        onToggle: t7,
+        onToggle: t8,
         children: isLoading ? _jsx(ShimmerEffect, {}) : _jsx(RenderFields, {
           className: `${baseClass}__fields`,
           fields,
           forceRender,
-          margins: "small",
           parentIndexPath: "",
           parentPath: path,
           parentSchemaPath: schemaPath,
@@ -140,45 +141,45 @@ export const ArrayRow = t0 => {
         })
       })
     }, `${parentPath}-row-${row.id}`);
-    $[2] = CustomRowLabel;
-    $[3] = addRow;
-    $[4] = attributes;
-    $[5] = classNames;
-    $[6] = copyRow;
-    $[7] = duplicateRow;
-    $[8] = errorCount;
-    $[9] = fallbackLabel;
-    $[10] = fieldHasErrors;
-    $[11] = fields;
-    $[12] = forceRender;
-    $[13] = hasMaxRows;
-    $[14] = i18n;
-    $[15] = isLoading;
-    $[16] = isSortable;
-    $[17] = listeners;
-    $[18] = moveRow;
-    $[19] = parentPath;
-    $[20] = pasteRow;
-    $[21] = path;
-    $[22] = permissions;
-    $[23] = readOnly;
-    $[24] = removeRow;
-    $[25] = row.collapsed;
-    $[26] = row.id;
-    $[27] = rowCount;
-    $[28] = rowIndex;
-    $[29] = schemaPath;
-    $[30] = scrollIdPrefix;
-    $[31] = setCollapse;
-    $[32] = setNodeRef;
-    $[33] = t4;
+    $[3] = CustomRowLabel;
+    $[4] = addRow;
+    $[5] = attributes;
+    $[6] = classNames;
+    $[7] = copyRow;
+    $[8] = duplicateRow;
+    $[9] = errorCount;
+    $[10] = fallbackLabel;
+    $[11] = fieldHasErrors;
+    $[12] = fields;
+    $[13] = forceRender;
+    $[14] = hasMaxRows;
+    $[15] = i18n;
+    $[16] = isLoading;
+    $[17] = isSortable;
+    $[18] = listeners;
+    $[19] = moveRow;
+    $[20] = parentPath;
+    $[21] = pasteRow;
+    $[22] = path;
+    $[23] = permissions;
+    $[24] = readOnly;
+    $[25] = removeRow;
+    $[26] = row.collapsed;
+    $[27] = row.id;
+    $[28] = rowCount;
+    $[29] = rowIndex;
+    $[30] = schemaPath;
+    $[31] = scrollIdPrefix;
+    $[32] = setCollapse;
+    $[33] = setNodeRef;
     $[34] = t5;
-    $[35] = transform;
-    $[36] = transition;
-    $[37] = t6;
+    $[35] = t6;
+    $[36] = transform;
+    $[37] = transition;
+    $[38] = t7;
   } else {
-    t6 = $[37];
+    t7 = $[38];
   }
-  return t6;
+  return t7;
 };
 //# sourceMappingURL=ArrayRow.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ArrayRow.js","names":["c","_c","getTranslation","React","ArrayAction","Collapsible","ErrorPill","ShimmerEffect","useFormSubmitted","RenderFields","RowLabel","useThrottledValue","useTranslation","baseClass","ArrayRow","t0","$","addRow","attributes","copyRow","CustomRowLabel","duplicateRow","errorCount","fields","forceRender","t1","hasMaxRows","isDragging","isLoading","isLoadingFromProps","isSortable","labels","listeners","moveRow","parentPath","pasteRow","path","permissions","readOnly","removeRow","row","rowCount","rowIndex","schemaPath","scrollIdPrefix","setCollapse","setNodeRef","transform","transition","undefined","i18n","hasSubmitted","fallbackLabel","singular","String","padStart","fieldHasErrors","t2","t3","filter","Boolean","classNames","join","t4","split","t5","t6","collapsed","id","t7","_jsx","ref","style","zIndex","children","actions","index","className","collapsibleStyle","dragHandleProps","header","_jsxs","height","width","CustomComponent","label","rowNumber","count","withMessage","onToggle","margins","parentIndexPath","parentSchemaPath"],"sources":["../../../src/fields/Array/ArrayRow.tsx"],"sourcesContent":["'use client'\nimport type {\n  ArrayField,\n  ClientComponentProps,\n  ClientField,\n  Row,\n  SanitizedFieldPermissions,\n} 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 { ShimmerEffect } from '../../elements/ShimmerEffect/index.js'\nimport { useFormSubmitted } from '../../forms/Form/context.js'\nimport { RenderFields } from '../../forms/RenderFields/index.js'\nimport { RowLabel } from '../../forms/RowLabel/index.js'\nimport { useThrottledValue } from '../../hooks/useThrottledValue.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 copyRow: (rowIndex: number) => void\n  readonly CustomRowLabel?: React.ReactNode\n  readonly duplicateRow: (rowIndex: number) => void\n  readonly errorCount: number\n  readonly fields: ClientField[]\n  readonly hasMaxRows?: boolean\n  readonly isLoading?: 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 pasteRow: (rowIndex: number) => void\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 scrollIdPrefix: string\n  readonly setCollapse: (rowID: string, collapsed: boolean) => void\n} & Pick<ClientComponentProps, 'forceRender'> &\n  UseDraggableSortableReturn\n\nexport const ArrayRow: React.FC<ArrayRowProps> = ({\n  addRow,\n  attributes,\n  copyRow,\n  CustomRowLabel,\n  duplicateRow,\n  errorCount,\n  fields,\n  forceRender = false,\n  hasMaxRows,\n  isDragging,\n  isLoading: isLoadingFromProps,\n  isSortable,\n  labels,\n  listeners,\n  moveRow,\n  parentPath,\n  pasteRow,\n  path,\n  permissions,\n  readOnly,\n  removeRow,\n  row,\n  rowCount,\n  rowIndex,\n  schemaPath,\n  scrollIdPrefix,\n  setCollapse,\n  setNodeRef,\n  transform,\n  transition,\n}) => {\n  const isLoading = useThrottledValue(isLoadingFromProps, 500)\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              copyRow={copyRow}\n              duplicateRow={duplicateRow}\n              hasMaxRows={hasMaxRows}\n              index={rowIndex}\n              isSortable={isSortable}\n              moveRow={moveRow}\n              pasteRow={pasteRow}\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\n            className={`${baseClass}__row-header`}\n            id={`${scrollIdPrefix}-row-${rowIndex}`}\n          >\n            {isLoading ? (\n              <ShimmerEffect height=\"1rem\" width=\"8rem\" />\n            ) : (\n              <RowLabel\n                CustomComponent={CustomRowLabel}\n                label={fallbackLabel}\n                path={path}\n                rowNumber={rowIndex}\n              />\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        {isLoading ? (\n          <ShimmerEffect />\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        )}\n      </Collapsible>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ArrayRow.js","names":["c","_c","getTranslation","React","ArrayAction","Collapsible","ErrorPill","ShimmerEffect","useFormSubmitted","RenderFields","RowLabel","useThrottledValue","useTranslation","baseClass","ArrayRow","t0","$","addRow","attributes","copyRow","CustomRowLabel","duplicateRow","errorCount","fields","forceRender","t1","hasMaxRows","isDragging","isLoading","isLoadingFromProps","isSortable","labels","listeners","moveRow","parentPath","pasteRow","path","permissions","readOnly","removeRow","row","rowCount","rowIndex","schemaPath","scrollIdPrefix","setCollapse","setNodeRef","transform","transition","undefined","i18n","hasSubmitted","fallbackLabel","singular","String","padStart","fieldHasErrors","t2","t3","t4","filter","Boolean","classNames","join","t5","split","t6","t7","collapsed","id","t8","_jsx","ref","style","zIndex","children","actions","index","className","collapsibleStyle","dragHandleProps","header","_jsxs","height","width","CustomComponent","label","rowNumber","count","withMessage","onToggle","parentIndexPath","parentSchemaPath"],"sources":["../../../src/fields/Array/ArrayRow.tsx"],"sourcesContent":["'use client'\nimport type {\n  ArrayField,\n  ClientComponentProps,\n  ClientField,\n  Row,\n  SanitizedFieldPermissions,\n} 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 { ShimmerEffect } from '../../elements/ShimmerEffect/index.js'\nimport { useFormSubmitted } from '../../forms/Form/context.js'\nimport { RenderFields } from '../../forms/RenderFields/index.js'\nimport { RowLabel } from '../../forms/RowLabel/index.js'\nimport { useThrottledValue } from '../../hooks/useThrottledValue.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.css'\n\nconst baseClass = 'array-field'\n\ntype ArrayRowProps = {\n  readonly addRow: (rowIndex: number) => Promise<void> | void\n  readonly copyRow: (rowIndex: number) => void\n  readonly CustomRowLabel?: React.ReactNode\n  readonly duplicateRow: (rowIndex: number) => void\n  readonly errorCount: number\n  readonly fields: ClientField[]\n  readonly hasMaxRows?: boolean\n  readonly isLoading?: 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 pasteRow: (rowIndex: number) => void\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 scrollIdPrefix: string\n  readonly setCollapse: (rowID: string, collapsed: boolean) => void\n} & Pick<ClientComponentProps, 'forceRender'> &\n  UseDraggableSortableReturn\n\nexport const ArrayRow: React.FC<ArrayRowProps> = ({\n  addRow,\n  attributes,\n  copyRow,\n  CustomRowLabel,\n  duplicateRow,\n  errorCount,\n  fields,\n  forceRender = false,\n  hasMaxRows,\n  isDragging,\n  isLoading: isLoadingFromProps,\n  isSortable,\n  labels,\n  listeners,\n  moveRow,\n  parentPath,\n  pasteRow,\n  path,\n  permissions,\n  readOnly,\n  removeRow,\n  row,\n  rowCount,\n  rowIndex,\n  schemaPath,\n  scrollIdPrefix,\n  setCollapse,\n  setNodeRef,\n  transform,\n  transition,\n}) => {\n  const isLoading = useThrottledValue(isLoadingFromProps, 500)\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    isDragging && `${baseClass}__row--is-dragging`,\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              copyRow={copyRow}\n              duplicateRow={duplicateRow}\n              hasMaxRows={hasMaxRows}\n              index={rowIndex}\n              isSortable={isSortable}\n              moveRow={moveRow}\n              pasteRow={pasteRow}\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`} id={`${scrollIdPrefix}-row-${rowIndex}`}>\n            {isLoading ? (\n              <ShimmerEffect height=\"1rem\" width=\"8rem\" />\n            ) : (\n              <RowLabel\n                CustomComponent={CustomRowLabel}\n                label={fallbackLabel}\n                path={path}\n                rowNumber={rowIndex}\n              />\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        {isLoading ? (\n          <ShimmerEffect />\n        ) : (\n          <RenderFields\n            className={`${baseClass}__fields`}\n            fields={fields}\n            forceRender={forceRender}\n            parentIndexPath=\"\"\n            parentPath={path}\n            parentSchemaPath={schemaPath}\n            permissions={permissions === true ? permissions : permissions?.fields}\n            readOnly={readOnly}\n          />\n        )}\n      </Collapsible>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/fields/Array/index.css

@@ -0,0 +1,89 @@
+@layer payload-default {
+  .array-field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer-2);
+  }
+
+  .array-field__header {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer-1);
+  }
+
+  .array-field__header-wrap {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    gap: var(--spacer-2);
+  }
+
+  .array-field__header-content {
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-2);
+  }
+
+  .array-field__header-actions {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    color: var(--color-text);
+    gap: var(--spacer-1);
+
+    & > li:last-child .array-field__header-action {
+      padding: 0;
+    }
+
+    @media (max-width: 768px) {
+      & > li:not(:last-child) {
+        display: none;
+      }
+    }
+  }
+
+  .array-field__header-action {
+    cursor: pointer;
+    padding: var(--spacer-1) var(--spacer-2);
+    border-radius: var(--radius-medium);
+
+    &:hover,
+    &:focus-visible {
+      background: var(--color-bg-transparent-hover);
+    }
+
+    &:active {
+      background: var(--color-bg-transparent-pressed);
+    }
+  }
+
+  .array-field__row-header {
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-2);
+    pointer-events: none;
+  }
+
+  .array-field__draggable-rows {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer-2);
+  }
+
+  .array-field__title {
+    margin-bottom: 0;
+  }
+
+  .array-field__add-row.btn {
+    align-self: flex-start;
+    margin: 0;
+  }
+
+  .array-field__row--is-dragging {
+    opacity: 0.5;
+  }
+}

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

@@ -1,10 +1,10 @@
 import type { ArrayFieldClientComponent } from 'payload';
 import React from 'react';
-import './index.scss';
+import './index.css';
 export declare const ArrayFieldComponent: ArrayFieldClientComponent;
 export declare const ArrayField: React.FC<{
     readonly validate?: import("payload").ArrayFieldValidation;
 } & import("payload").FieldPaths & {
     readonly field: Omit<import("payload").ArrayFieldClient, "type"> & Partial<Pick<import("payload").ArrayFieldClient, "type">>;
-} & Omit<import("payload").ClientComponentProps, "customComponents" | "field">>;
+} & 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,EACV,yBAAyB,EAG1B,MAAM,SAAS,CAAA;AAGhB,OAAO,KAAgD,MAAM,OAAO,CAAA;AAiCpE,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,mBAAmB,EAAE,yBA6bjC,CAAA;AAED,eAAO,MAAM,UAAU;;;;+EAAqC,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;AAIhB,OAAO,KAAgD,MAAM,OAAO,CAAA;AAqCpE,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,mBAAmB,EAAE,yBAgcjC,CAAA;AAED,eAAO,MAAM,UAAU;;;;+EAAqC,CAAA"}

package/dist/fields/Array/index.js

@@ -1,15 +1,18 @@
 'use client';
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { getTranslation } from '@payloadcms/translations';
-import React, { Fragment, useCallback, useId, useMemo } from 'react';
+import React, { useCallback, useId, useMemo } from 'react';
 import { toast } from 'sonner';
 import { Banner } from '../../elements/Banner/index.js';
 import { Button } from '../../elements/Button/index.js';
 import { clipboardCopy, clipboardPaste } from '../../elements/ClipboardAction/clipboardUtilities.js';
 import { ClipboardAction } from '../../elements/ClipboardAction/index.js';
 import { mergeFormStateFromClipboard, reduceFormStateByPath } from '../../elements/ClipboardAction/mergeFormStateFromClipboard.js';
+import { CollapseAllToggle } from '../../elements/CollapseAllToggle/index.js';
 import { DraggableSortableItem } from '../../elements/DraggableSortable/DraggableSortableItem/index.js';
+import { DragOverlayPreview } from '../../elements/DraggableSortable/DragOverlayPreview/index.js';
 import { DraggableSortable } from '../../elements/DraggableSortable/index.js';
 import { ErrorPill } from '../../elements/ErrorPill/index.js';
 import { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js';
@@ -19,8 +22,10 @@ import { FieldLabel } from '../../fields/FieldLabel/index.js';
 import { useForm, useFormSubmitted } from '../../forms/Form/context.js';
 import { extractRowsAndCollapsedIDs, toggleAllRows } from '../../forms/Form/rowHelpers.js';
 import { NullifyLocaleField } from '../../forms/NullifyField/index.js';
+import { RowLabel } from '../../forms/RowLabel/index.js';
 import { useField } from '../../forms/useField/index.js';
 import { withCondition } from '../../forms/withCondition/index.js';
+import { CirclePlusIcon } from '../../icons/CirclePlus/index.js';
 import { useConfig } from '../../providers/Config/index.js';
 import { useDocumentInfo } from '../../providers/DocumentInfo/index.js';
 import { useLocale } from '../../providers/Locale/index.js';
@@ -29,7 +34,7 @@ import { scrollToID } from '../../utilities/scrollToID.js';
 import { mergeFieldStyles } from '../mergeFieldStyles.js';
 import { fieldBaseClass } from '../shared/index.js';
 import { ArrayRow } from './ArrayRow.js';
-import './index.scss';
+import './index.css';
 const baseClass = 'array-field';
 export const ArrayFieldComponent = props => {
   const {
@@ -288,6 +293,20 @@ export const ArrayFieldComponent = props => {
   const showRequired = (readOnly || disabled) && rows.length === 0;
   const showMinRows = rows.length && rows.length < minRows || required && rows.length === 0;
   const styles = useMemo(() => mergeFieldStyles(field), [field]);
+  const renderDragOverlay = useCallback(activeId => {
+    const activeIndex = rows.findIndex(row => row.id === activeId);
+    if (activeIndex === -1) {
+      return null;
+    }
+    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, '__')}`,
@@ -323,22 +342,8 @@ export const ArrayFieldComponent = props => {
           })]
         }), /*#__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')
-              })
-            })]
+          children: [rows?.length > 0 && /*#__PURE__*/_jsx(CollapseAllToggle, {
+            onClick: toggleCollapseAll
           }), /*#__PURE__*/_jsx("li", {
             children: /*#__PURE__*/_jsx(ClipboardAction, {
               allowCopy: rows?.length > 0,
@@ -367,11 +372,13 @@ export const ArrayFieldComponent = props => {
       readOnly: readOnly
     }), BeforeInput, (rows?.length > 0 || !valid && (showRequired || showMinRows)) && /*#__PURE__*/_jsxs(DraggableSortable, {
       className: `${baseClass}__draggable-rows`,
-      ids: rows.map(row => row.id),
+      ids: rows.map(row_0 => row_0.id),
       onDragEnd: ({
         moveFromIndex: moveFromIndex_0,
         moveToIndex: moveToIndex_0
       }) => moveRow(moveFromIndex_0, moveToIndex_0),
+      renderDragOverlay: isSortable && !readOnly && !disabled ? renderDragOverlay : undefined,
+      sortingStrategy: verticalListSortingStrategy,
       children: [rows.map((rowData, i) => {
         const {
           id: rowID_0,
@@ -416,7 +423,7 @@ export const ArrayFieldComponent = props => {
             label: getTranslation(labels.plural, i18n)
           })
         }), showMinRows && /*#__PURE__*/_jsx(Banner, {
-          type: "error",
+          type: "danger",
           children: t('validation:requiresAtLeast', {
             count: minRows,
             label: getTranslation(minRows > 1 ? labels.plural : labels.singular, i18n) || t(minRows > 1 ? 'general:rows' : 'general:row')
@@ -424,12 +431,11 @@ export const ArrayFieldComponent = props => {
         })]
       })]
     }), !hasMaxRows && !readOnly && /*#__PURE__*/_jsx(Button, {
-      buttonStyle: "icon-label",
+      buttonStyle: "ghost",
       className: `${baseClass}__add-row`,
       disabled: disabled,
-      icon: "plus",
+      icon: /*#__PURE__*/_jsx(CirclePlusIcon, {}),
       iconPosition: "left",
-      iconStyle: "with-border",
       onClick: () => {
         void addRow(value_0 || 0);
       },