@payloadcms/ui 4.0.0-internal.bc5cf8c → 4.0.0-internal.bf4bcce

package/dist/fields/Blocks/RowActions.js

@@ -3,12 +3,14 @@
 import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useModal } from '@faceless-ui/modal';
+import { getTranslation } from '@payloadcms/translations';
 import React from 'react';
 import { ArrayAction } from '../../elements/ArrayAction/index.js';
 import { useDrawerSlug } from '../../elements/Drawer/useDrawerSlug.js';
+import { useTranslation } from '../../providers/Translation/index.js';
 import { BlocksDrawer } from './BlocksDrawer/index.js';
 export const RowActions = props => {
-  const $ = _c(28);
+  const $ = _c(31);
   const {
     addRow,
     blocks,
@@ -19,7 +21,9 @@ export const RowActions = props => {
     isSortable,
     labels,
     moveRow,
+    pasteData,
     pasteRow,
+    pasteRowBelow,
     removeRow,
     rowCount,
     rowIndex
@@ -28,7 +32,12 @@ export const RowActions = props => {
     closeModal,
     openModal
   } = useModal();
+  const {
+    i18n
+  } = useTranslation();
   const drawerSlug = useDrawerSlug("blocks-drawer");
+  const block = blocks.find(candidate => typeof candidate !== "string" && candidate.slug === blockType);
+  const rowLabel = `${block ? getTranslation(block.labels.singular, i18n) : blockType} ${rowIndex + 1}`;
   const [indexToAdd, setIndexToAdd] = React.useState(null);
   let t0;
   if ($[0] !== addRow || $[1] !== closeModal || $[2] !== drawerSlug || $[3] !== indexToAdd) {
@@ -47,28 +56,28 @@ export const RowActions = props => {
     t0 = $[4];
   }
   let t1;
-  if ($[5] !== blockType || $[6] !== blocks || $[7] !== copyRow || $[8] !== drawerSlug || $[9] !== duplicateRow || $[10] !== hasMaxRows || $[11] !== isSortable || $[12] !== labels || $[13] !== moveRow || $[14] !== openModal || $[15] !== pasteRow || $[16] !== removeRow || $[17] !== rowCount || $[18] !== rowIndex || $[19] !== t0) {
+  if ($[5] !== blockType || $[6] !== blocks || $[7] !== copyRow || $[8] !== drawerSlug || $[9] !== duplicateRow || $[10] !== hasMaxRows || $[11] !== isSortable || $[12] !== labels || $[13] !== moveRow || $[14] !== openModal || $[15] !== pasteData || $[16] !== pasteRow || $[17] !== pasteRowBelow || $[18] !== removeRow || $[19] !== rowCount || $[20] !== rowIndex || $[21] !== rowLabel || $[22] !== t0) {
     let t2;
-    if ($[21] !== drawerSlug || $[22] !== openModal) {
+    if ($[24] !== drawerSlug || $[25] !== openModal) {
       t2 = index => {
         setIndexToAdd(index);
         openModal(drawerSlug);
       };
-      $[21] = drawerSlug;
-      $[22] = openModal;
-      $[23] = t2;
+      $[24] = drawerSlug;
+      $[25] = openModal;
+      $[26] = t2;
     } else {
-      t2 = $[23];
+      t2 = $[26];
     }
     let t3;
-    if ($[24] !== blockType || $[25] !== duplicateRow || $[26] !== rowIndex) {
+    if ($[27] !== blockType || $[28] !== duplicateRow || $[29] !== rowIndex) {
       t3 = () => duplicateRow(rowIndex, blockType);
-      $[24] = blockType;
-      $[25] = duplicateRow;
-      $[26] = rowIndex;
-      $[27] = t3;
+      $[27] = blockType;
+      $[28] = duplicateRow;
+      $[29] = rowIndex;
+      $[30] = t3;
     } else {
-      t3 = $[27];
+      t3 = $[30];
     }
     t1 = _jsxs(React.Fragment, {
       children: [_jsx(BlocksDrawer, {
@@ -84,8 +93,11 @@ export const RowActions = props => {
         hasMaxRows,
         index: rowIndex,
         isSortable,
+        label: rowLabel,
         moveRow,
+        pasteData,
         pasteRow,
+        pasteRowBelow,
         removeRow,
         rowCount
       })]
@@ -100,14 +112,17 @@ export const RowActions = props => {
     $[12] = labels;
     $[13] = moveRow;
     $[14] = openModal;
-    $[15] = pasteRow;
-    $[16] = removeRow;
-    $[17] = rowCount;
-    $[18] = rowIndex;
-    $[19] = t0;
-    $[20] = t1;
+    $[15] = pasteData;
+    $[16] = pasteRow;
+    $[17] = pasteRowBelow;
+    $[18] = removeRow;
+    $[19] = rowCount;
+    $[20] = rowIndex;
+    $[21] = rowLabel;
+    $[22] = t0;
+    $[23] = t1;
   } else {
-    t1 = $[20];
+    t1 = $[23];
   }
   return t1;
 };

package/dist/fields/Blocks/RowActions.js.map

@@ -1 +1 @@
-{"version":3,"file":"RowActions.js","names":["c","_c","useModal","React","ArrayAction","useDrawerSlug","BlocksDrawer","RowActions","props","$","addRow","blocks","blockType","copyRow","duplicateRow","hasMaxRows","isSortable","labels","moveRow","pasteRow","removeRow","rowCount","rowIndex","closeModal","openModal","drawerSlug","indexToAdd","setIndexToAdd","useState","t0","_","rowBlockType","t1","t2","index","t3","_jsxs","Fragment","children","_jsx","addRowIndex"],"sources":["../../../src/fields/Blocks/RowActions.tsx"],"sourcesContent":["'use client'\nimport type { ClientBlock, ClientField, Labels } from 'payload'\n\nimport { useModal } from '@faceless-ui/modal'\nimport React from 'react'\n\nimport { ArrayAction } from '../../elements/ArrayAction/index.js'\nimport { useDrawerSlug } from '../../elements/Drawer/useDrawerSlug.js'\nimport { BlocksDrawer } from './BlocksDrawer/index.js'\n\nexport const RowActions: React.FC<{\n  readonly addRow: (rowIndex: number, blockType: string) => Promise<void> | void\n  readonly blocks: (ClientBlock | string)[]\n  readonly blockType: string\n  readonly copyRow: (rowIndex: number) => void\n  readonly duplicateRow: (rowIndex: number, blockType: string) => void\n  readonly fields: ClientField[]\n  readonly hasMaxRows?: boolean\n  readonly isSortable?: boolean\n  readonly labels: Labels\n  readonly moveRow: (fromIndex: number, toIndex: number) => void\n  readonly pasteRow: (rowIndex: number) => void\n  readonly removeRow: (rowIndex: number) => void\n  readonly rowCount: number\n  readonly rowIndex: number\n}> = (props) => {\n  const {\n    addRow,\n    blocks,\n    blockType,\n    copyRow,\n    duplicateRow,\n    hasMaxRows,\n    isSortable,\n    labels,\n    moveRow,\n    pasteRow,\n    removeRow,\n    rowCount,\n    rowIndex,\n  } = props\n\n  const { closeModal, openModal } = useModal()\n  const drawerSlug = useDrawerSlug('blocks-drawer')\n\n  const [indexToAdd, setIndexToAdd] = React.useState<null | number>(null)\n\n  return (\n    <React.Fragment>\n      <BlocksDrawer\n        addRow={(_, rowBlockType) => {\n          if (typeof addRow === 'function') {\n            void addRow(indexToAdd, rowBlockType)\n          }\n          closeModal(drawerSlug)\n        }}\n        addRowIndex={rowIndex}\n        blocks={blocks}\n        drawerSlug={drawerSlug}\n        labels={labels}\n      />\n      <ArrayAction\n        addRow={(index) => {\n          setIndexToAdd(index)\n          openModal(drawerSlug)\n        }}\n        copyRow={copyRow}\n        duplicateRow={() => duplicateRow(rowIndex, blockType)}\n        hasMaxRows={hasMaxRows}\n        index={rowIndex}\n        isSortable={isSortable}\n        moveRow={moveRow}\n        pasteRow={pasteRow}\n        removeRow={removeRow}\n        rowCount={rowCount}\n      />\n    </React.Fragment>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"RowActions.js","names":["c","_c","useModal","getTranslation","React","ArrayAction","useDrawerSlug","useTranslation","BlocksDrawer","RowActions","props","$","addRow","blocks","blockType","copyRow","duplicateRow","hasMaxRows","isSortable","labels","moveRow","pasteData","pasteRow","pasteRowBelow","removeRow","rowCount","rowIndex","closeModal","openModal","i18n","drawerSlug","block","find","candidate","slug","rowLabel","singular","indexToAdd","setIndexToAdd","useState","t0","_","rowBlockType","t1","t2","index","t3","_jsxs","Fragment","children","_jsx","addRowIndex","label"],"sources":["../../../src/fields/Blocks/RowActions.tsx"],"sourcesContent":["'use client'\nimport type { ClientBlock, ClientField, Labels } from 'payload'\n\nimport { useModal } from '@faceless-ui/modal'\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport type { ClipboardPasteEligibilityArgs } from '../../elements/ClipboardAction/types.js'\n\nimport { ArrayAction } from '../../elements/ArrayAction/index.js'\nimport { useDrawerSlug } from '../../elements/Drawer/useDrawerSlug.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { BlocksDrawer } from './BlocksDrawer/index.js'\n\nexport const RowActions: React.FC<{\n  readonly addRow: (rowIndex: number, blockType: string) => Promise<void> | void\n  readonly blocks: (ClientBlock | string)[]\n  readonly blockType: string\n  readonly copyRow: (rowIndex: number) => void\n  readonly duplicateRow: (rowIndex: number, blockType: string) => void\n  readonly fields: ClientField[]\n  readonly hasMaxRows?: boolean\n  readonly isSortable?: boolean\n  readonly labels: Labels\n  readonly moveRow: (fromIndex: number, toIndex: number) => void\n  readonly pasteData: ClipboardPasteEligibilityArgs\n  readonly pasteRow: (rowIndex: number) => void\n  readonly pasteRowBelow: (rowIndex: number) => void\n  readonly removeRow: (rowIndex: number) => void\n  readonly rowCount: number\n  readonly rowIndex: number\n}> = (props) => {\n  const {\n    addRow,\n    blocks,\n    blockType,\n    copyRow,\n    duplicateRow,\n    hasMaxRows,\n    isSortable,\n    labels,\n    moveRow,\n    pasteData,\n    pasteRow,\n    pasteRowBelow,\n    removeRow,\n    rowCount,\n    rowIndex,\n  } = props\n\n  const { closeModal, openModal } = useModal()\n  const { i18n } = useTranslation()\n  const drawerSlug = useDrawerSlug('blocks-drawer')\n  const block = blocks.find(\n    (candidate): candidate is ClientBlock =>\n      typeof candidate !== 'string' && candidate.slug === blockType,\n  )\n  const rowLabel = `${block ? getTranslation(block.labels.singular, i18n) : blockType} ${rowIndex + 1}`\n\n  const [indexToAdd, setIndexToAdd] = React.useState<null | number>(null)\n\n  return (\n    <React.Fragment>\n      <BlocksDrawer\n        addRow={(_, rowBlockType) => {\n          if (typeof addRow === 'function') {\n            void addRow(indexToAdd, rowBlockType)\n          }\n          closeModal(drawerSlug)\n        }}\n        addRowIndex={rowIndex}\n        blocks={blocks}\n        drawerSlug={drawerSlug}\n        labels={labels}\n      />\n      <ArrayAction\n        addRow={(index) => {\n          setIndexToAdd(index)\n          openModal(drawerSlug)\n        }}\n        copyRow={copyRow}\n        duplicateRow={() => duplicateRow(rowIndex, blockType)}\n        hasMaxRows={hasMaxRows}\n        index={rowIndex}\n        isSortable={isSortable}\n        label={rowLabel}\n        moveRow={moveRow}\n        pasteData={pasteData}\n        pasteRow={pasteRow}\n        pasteRowBelow={pasteRowBelow}\n        removeRow={removeRow}\n        rowCount={rowCount}\n      />\n    </React.Fragment>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/fields/Blocks/SectionTitle/index.css

@@ -20,10 +20,9 @@
 
   .section-title:after,
   .section-title__input {
-    font-family: var(--text-body-medium-strong-font-family);
-    font-weight: var(--text-body-medium-strong-font-weight);
-    font-size: var(--text-body-medium-strong-font-size);
-    line-height: var(--text-body-medium-strong-line-height);
+    font-weight: var(--text-body-medium-bold-font-weight);
+    font-size: var(--text-body-medium-bold-font-size);
+    line-height: var(--text-body-medium-bold-line-height);
     letter-spacing: var(--text-body-medium-letter-spacing);
     padding: 0 var(--spacer-1);
     width: 100%;
@@ -36,7 +35,6 @@
 
     &::placeholder {
       color: var(--color-text-tertiary);
-      font-family: var(--text-body-medium-font-family);
       font-weight: var(--text-body-medium-font-weight);
     }
     min-width: min-content;

package/dist/fields/Blocks/SectionTitle/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/fields/Blocks/SectionTitle/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,aAAa,CAAA;AAIpB,MAAM,MAAM,KAAK,GAAG;IAClB,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IACjE,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,OAAO,CAAA;CAClB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA8BxC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/fields/Blocks/SectionTitle/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,aAAa,CAAA;AAIpB,MAAM,MAAM,KAAK,GAAG;IAClB,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IACjE,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,OAAO,CAAA;CAClB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA+BxC,CAAA"}

package/dist/fields/Blocks/SectionTitle/index.js

@@ -64,6 +64,7 @@ export const SectionTitle = props => {
       className: classes,
       "data-value": customValue || value || t("general:untitled"),
       children: _jsx("input", {
+        "aria-label": t("fields:blockName"),
         className: `${baseClass}__input`,
         id: path,
         name: path,

package/dist/fields/Blocks/SectionTitle/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","useField","useTranslation","baseClass","SectionTitle","props","$","customOnChange","customValue","path","readOnly","t0","setValue","value","t","t1","Symbol","for","filter","Boolean","classes","join","t2","e","stopPropagation","preventDefault","target","onChange","t3","_jsx","className","children","id","name","placeholder","type"],"sources":["../../../../src/fields/Blocks/SectionTitle/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { useField } from '../../../forms/useField/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport './index.css'\n\nconst baseClass = 'section-title'\n\nexport type Props = {\n  customOnChange?: (e: React.ChangeEvent<HTMLInputElement>) => void\n  customValue?: string\n  path: string\n  readOnly: boolean\n}\n\n/**\n * An input field representing the block's `blockName` property - responsible for reading and saving the `blockName`\n * property from/into the provided path.\n */\nexport const SectionTitle: React.FC<Props> = (props) => {\n  const { customOnChange, customValue, path, readOnly } = props\n\n  const { setValue, value } = useField({ path })\n  const { t } = useTranslation()\n\n  const classes = [baseClass].filter(Boolean).join(' ')\n\n  const onChange =\n    customOnChange ||\n    ((e) => {\n      e.stopPropagation()\n      e.preventDefault()\n      setValue(e.target.value)\n    })\n\n  return (\n    <div className={classes} data-value={customValue || value || t('general:untitled')}>\n      <input\n        className={`${baseClass}__input`}\n        id={path}\n        name={path}\n        onChange={onChange}\n        placeholder={t('general:untitled')}\n        readOnly={readOnly}\n        type=\"text\"\n        value={customValue || (value as string) || ''}\n      />\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,MAAW;AAElB,SAASC,QAAQ,QAAQ;AACzB,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAEP,MAAMC,SAAA,GAAY;AASlB;;;;AAIA,OAAO,MAAMC,YAAA,GAAgCC,KAAA;EAAA,MAAAC,CAAA,GAAAP,EAAA;EAC3C;IAAAQ,cAAA;IAAAC,WAAA;IAAAC,IAAA;IAAAC;EAAA,IAAwDL,KAAA;EAAA,IAAAM,EAAA;EAAA,IAAAL,CAAA,QAAAG,IAAA;IAEnBE,EAAA;MAAAF;IAAA;IAAOH,CAAA,MAAAG,IAAA;IAAAH,CAAA,MAAAK,EAAA;EAAA;IAAAA,EAAA,GAAAL,CAAA;EAAA;EAA5C;IAAAM,QAAA;IAAAC;EAAA,IAA4BZ,QAAA,CAASU,EAAO;EAC5C;IAAAG;EAAA,IAAcZ,cAAA;EAAA,IAAAa,EAAA;EAAA,IAAAT,CAAA,QAAAU,MAAA,CAAAC,GAAA;IAEEF,EAAA,IAAAZ,SAAA,EAAAe,MAAA,CAAAC,OAAmB;IAAAb,CAAA,MAAAS,EAAA;EAAA;IAAAA,EAAA,GAAAT,CAAA;EAAA;EAAnC,MAAAc,OAAA,GAAgBL,EAAmB,CAAAM,IAAA,CAAc;EAAA,IAAAC,EAAA;EAAA,IAAAhB,CAAA,QAAAC,cAAA,IAAAD,CAAA,QAAAM,QAAA;IAG/CU,EAAA,GAAAf,cAAA,KAAAgB,CAAA;MAEEA,CAAA,CAAAC,eAAA,CAAiB;MACjBD,CAAA,CAAAE,cAAA,CAAgB;MAChBb,QAAA,CAASW,CAAA,CAAAG,MAAA,CAAAb,KAAc;IAAA,EACzB;IAAAP,CAAA,MAAAC,cAAA;IAAAD,CAAA,MAAAM,QAAA;IAAAN,CAAA,MAAAgB,EAAA;EAAA;IAAAA,EAAA,GAAAhB,CAAA;EAAA;EANF,MAAAqB,QAAA,GACEL,EAKA;EAAA,IAAAM,EAAA;EAAA,IAAAtB,CAAA,QAAAE,WAAA,IAAAF,CAAA,QAAAqB,QAAA,IAAArB,CAAA,QAAAG,IAAA,IAAAH,CAAA,QAAAI,QAAA,IAAAJ,CAAA,SAAAQ,CAAA,IAAAR,CAAA,SAAAO,KAAA;IAGAe,EAAA,GAAAC,IAAA,CAAC;MAAAC,SAAA,EAAeV,OAAA;MAAA,cAAqBZ,WAAA,IAAeK,KAAA,IAASC,CAAA,CAAE;MAAAiB,QAAA,EAC7DF,IAAA,CAAC;QAAAC,SAAA,EACY,GAAA3B,SAAA,SAAqB;QAAA6B,EAAA,EAC5BvB,IAAA;QAAAwB,IAAA,EACExB,IAAA;QAAAkB,QAAA;QAAAO,WAAA,EAEOpB,CAAA,CAAE;QAAAJ,QAAA;QAAAyB,IAAA,EAEV;QAAAtB,KAAA,EACEL,WAAA,IAAgBK,KAAA,IAAoB;MAAA,C;;;;;;;;;;;;SAT/Ce,E;CAaJ","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","useField","useTranslation","baseClass","SectionTitle","props","$","customOnChange","customValue","path","readOnly","t0","setValue","value","t","t1","Symbol","for","filter","Boolean","classes","join","t2","e","stopPropagation","preventDefault","target","onChange","t3","_jsx","className","children","id","name","placeholder","type"],"sources":["../../../../src/fields/Blocks/SectionTitle/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { useField } from '../../../forms/useField/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport './index.css'\n\nconst baseClass = 'section-title'\n\nexport type Props = {\n  customOnChange?: (e: React.ChangeEvent<HTMLInputElement>) => void\n  customValue?: string\n  path: string\n  readOnly: boolean\n}\n\n/**\n * An input field representing the block's `blockName` property - responsible for reading and saving the `blockName`\n * property from/into the provided path.\n */\nexport const SectionTitle: React.FC<Props> = (props) => {\n  const { customOnChange, customValue, path, readOnly } = props\n\n  const { setValue, value } = useField({ path })\n  const { t } = useTranslation()\n\n  const classes = [baseClass].filter(Boolean).join(' ')\n\n  const onChange =\n    customOnChange ||\n    ((e) => {\n      e.stopPropagation()\n      e.preventDefault()\n      setValue(e.target.value)\n    })\n\n  return (\n    <div className={classes} data-value={customValue || value || t('general:untitled')}>\n      <input\n        aria-label={t('fields:blockName')}\n        className={`${baseClass}__input`}\n        id={path}\n        name={path}\n        onChange={onChange}\n        placeholder={t('general:untitled')}\n        readOnly={readOnly}\n        type=\"text\"\n        value={customValue || (value as string) || ''}\n      />\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,MAAW;AAElB,SAASC,QAAQ,QAAQ;AACzB,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAEP,MAAMC,SAAA,GAAY;AASlB;;;;AAIA,OAAO,MAAMC,YAAA,GAAgCC,KAAA;EAAA,MAAAC,CAAA,GAAAP,EAAA;EAC3C;IAAAQ,cAAA;IAAAC,WAAA;IAAAC,IAAA;IAAAC;EAAA,IAAwDL,KAAA;EAAA,IAAAM,EAAA;EAAA,IAAAL,CAAA,QAAAG,IAAA;IAEnBE,EAAA;MAAAF;IAAA;IAAOH,CAAA,MAAAG,IAAA;IAAAH,CAAA,MAAAK,EAAA;EAAA;IAAAA,EAAA,GAAAL,CAAA;EAAA;EAA5C;IAAAM,QAAA;IAAAC;EAAA,IAA4BZ,QAAA,CAASU,EAAO;EAC5C;IAAAG;EAAA,IAAcZ,cAAA;EAAA,IAAAa,EAAA;EAAA,IAAAT,CAAA,QAAAU,MAAA,CAAAC,GAAA;IAEEF,EAAA,IAAAZ,SAAA,EAAAe,MAAA,CAAAC,OAAmB;IAAAb,CAAA,MAAAS,EAAA;EAAA;IAAAA,EAAA,GAAAT,CAAA;EAAA;EAAnC,MAAAc,OAAA,GAAgBL,EAAmB,CAAAM,IAAA,CAAc;EAAA,IAAAC,EAAA;EAAA,IAAAhB,CAAA,QAAAC,cAAA,IAAAD,CAAA,QAAAM,QAAA;IAG/CU,EAAA,GAAAf,cAAA,KAAAgB,CAAA;MAEEA,CAAA,CAAAC,eAAA,CAAiB;MACjBD,CAAA,CAAAE,cAAA,CAAgB;MAChBb,QAAA,CAASW,CAAA,CAAAG,MAAA,CAAAb,KAAc;IAAA,EACzB;IAAAP,CAAA,MAAAC,cAAA;IAAAD,CAAA,MAAAM,QAAA;IAAAN,CAAA,MAAAgB,EAAA;EAAA;IAAAA,EAAA,GAAAhB,CAAA;EAAA;EANF,MAAAqB,QAAA,GACEL,EAKA;EAAA,IAAAM,EAAA;EAAA,IAAAtB,CAAA,QAAAE,WAAA,IAAAF,CAAA,QAAAqB,QAAA,IAAArB,CAAA,QAAAG,IAAA,IAAAH,CAAA,QAAAI,QAAA,IAAAJ,CAAA,SAAAQ,CAAA,IAAAR,CAAA,SAAAO,KAAA;IAGAe,EAAA,GAAAC,IAAA,CAAC;MAAAC,SAAA,EAAeV,OAAA;MAAA,cAAqBZ,WAAA,IAAeK,KAAA,IAASC,CAAA,CAAE;MAAAiB,QAAA,EAC7DF,IAAA,CAAC;QAAA,cACaf,CAAA,CAAE;QAAAgB,SAAA,EACH,GAAA3B,SAAA,SAAqB;QAAA6B,EAAA,EAC5BvB,IAAA;QAAAwB,IAAA,EACExB,IAAA;QAAAkB,QAAA;QAAAO,WAAA,EAEOpB,CAAA,CAAE;QAAAJ,QAAA;QAAAyB,IAAA,EAEV;QAAAtB,KAAA,EACEL,WAAA,IAAgBK,KAAA,IAAoB;MAAA,C;;;;;;;;;;;;SAV/Ce,E;CAcJ","ignoreList":[]}

package/dist/fields/Blocks/index.css

@@ -67,6 +67,7 @@
       padding: 0;
     }
 
+    /* stylelint-disable-next-line plugin/no-max-width-media-query -- TODO: pre-existing; migrate to a mobile-first min-width query */
     @media (max-width: 768px) {
       & > li:not(:last-child) {
         display: none;
@@ -86,7 +87,7 @@
   .blocks-field__title {
     margin-bottom: 0;
     color: var(--color-text);
-    font-weight: var(--text-body-medium-strong-font-weight);
+    font-weight: var(--text-body-medium-bold-font-weight);
   }
 
   .blocks-field__block-header {
@@ -107,7 +108,7 @@
 
   .blocks-field__block-number {
     flex-shrink: 0;
-    color: var(--color-text);
+    color: var(--color-text-secondary);
   }
 
   .blocks-field__block-pill {

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

@@ -1,8 +1,5 @@
+import type { BlocksFieldClientProps } from 'payload';
 import React from 'react';
 import './index.css';
-export declare const BlocksField: React.FC<{
-    readonly validate?: import("payload").BlocksFieldValidation;
-} & import("payload").FieldPaths & {
-    readonly field: Omit<import("payload").BlocksFieldClient, "type"> & Partial<Pick<import("payload").BlocksFieldClient, "type">>;
-} & Omit<import("payload").ClientComponentProps, "field" | "customComponents">>;
+export declare const BlocksField: React.FC<BlocksFieldClientProps>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Blocks/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAyC,MAAM,OAAO,CAAA;AAgC7D,OAAO,aAAa,CAAA;AA0gBpB,eAAO,MAAM,WAAW;;;;+EAAsC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Blocks/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAe,MAAM,SAAS,CAAA;AAIlE,OAAO,KAAgD,MAAM,OAAO,CAAA;AAiCpE,OAAO,aAAa,CAAA;AA0jBpB,eAAO,MAAM,WAAW,kCAAsC,CAAA"}

package/dist/fields/Blocks/index.js

@@ -3,13 +3,13 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { getTranslation } from '@payloadcms/translations';
-import React, { Fragment, useCallback, useMemo } from 'react';
+import React, { Fragment, useCallback, useId, useMemo } from 'react';
 import { toast } from 'sonner';
 import { Banner } from '../../elements/Banner/index.js';
 import { Button } from '../../elements/Button/index.js';
 import { clipboardCopy, clipboardPaste } from '../../elements/ClipboardAction/clipboardUtilities.js';
 import { ClipboardAction } from '../../elements/ClipboardAction/index.js';
-import { mergeFormStateFromClipboard, reduceFormStateByPath } from '../../elements/ClipboardAction/mergeFormStateFromClipboard.js';
+import { insertRowFromClipboard, 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';
@@ -37,10 +37,12 @@ import { FieldError } from '../FieldError/index.js';
 import { FieldLabel } from '../FieldLabel/index.js';
 import { mergeFieldStyles } from '../mergeFieldStyles.js';
 import { fieldBaseClass } from '../shared/index.js';
+import { useRowFocus } from '../shared/useRowFocus.js';
 import { BlockRow } from './BlockRow.js';
 import { BlocksDrawer } from './BlocksDrawer/index.js';
 const baseClass = 'blocks-field';
 const BlocksFieldComponent = props => {
+  const rowsID = useId();
   const {
     i18n,
     t
@@ -83,9 +85,8 @@ const BlocksFieldComponent = props => {
     replaceState,
     setModified
   } = useForm();
-  const {
-    code: locale
-  } = useLocale();
+  const currentLocale = useLocale();
+  const locale = currentLocale?.code;
   const {
     config: {
       localization
@@ -168,6 +169,10 @@ const BlocksFieldComponent = props => {
     };
   }, [blocks, blocksFilterOptions, config.blocksMap]);
   const getBlockConfig = blockType => config.blocksMap[blockType] ?? clientBlocks.find(block_1 => block_1.slug === blockType);
+  const {
+    fieldRef,
+    focusRow
+  } = useRowFocus();
   const addRow = useCallback((rowIndex, blockType_0) => {
     addFieldRow({
       blockType: blockType_0,
@@ -175,10 +180,8 @@ const BlocksFieldComponent = props => {
       rowIndex,
       schemaPath
     });
-    setTimeout(() => {
-      scrollToID(`${path}-row-${rowIndex + 1}`);
-    }, 0);
-  }, [addFieldRow, path, schemaPath]);
+    focusRow(`${path.split('.').join('-')}-row-${rowIndex}`);
+  }, [addFieldRow, focusRow, path, schemaPath]);
   const duplicateRow = useCallback(rowIndex_0 => {
     dispatchFields({
       type: 'DUPLICATE_ROW',
@@ -283,23 +286,53 @@ const BlocksFieldComponent = props => {
       toast.error(clipboardResult_0);
     }
   }, [clientBlocks, getFields, path, replaceState, setModified, t]);
-  const pasteBlocks = useCallback(dataFromClipboard_0 => {
-    const formState_0 = {
+  const pasteRowBelow = useCallback(rowIndex_4 => {
+    const pasteArgs_0 = {
+      onPaste: dataFromClipboard_0 => {
+        const formState_0 = {
+          ...getFields()
+        };
+        const newState_0 = insertRowFromClipboard({
+          dataFromClipboard: dataFromClipboard_0,
+          formState: formState_0,
+          path,
+          rowIndex: rowIndex_4 + 1
+        });
+        replaceState(newState_0);
+        setModified(true);
+        setTimeout(() => {
+          scrollToID(`${path?.split('.').join('-')}-row-${rowIndex_4 + 1}`);
+        }, 0);
+      },
+      path,
+      schemaBlocks: clientBlocks,
+      t
+    };
+    const clipboardResult_1 = clipboardPaste(pasteArgs_0);
+    if (typeof clipboardResult_1 === 'string') {
+      toast.error(clipboardResult_1);
+    }
+  }, [clientBlocks, getFields, path, replaceState, setModified, t]);
+  const pasteBlocks = useCallback(dataFromClipboard_1 => {
+    const formState_1 = {
       ...getFields()
     };
-    const newState_0 = mergeFormStateFromClipboard({
-      dataFromClipboard: dataFromClipboard_0,
-      formState: formState_0,
+    const newState_1 = mergeFormStateFromClipboard({
+      dataFromClipboard: dataFromClipboard_1,
+      formState: formState_1,
       path
     });
-    replaceState(newState_0);
+    replaceState(newState_1);
     setModified(true);
   }, [getFields, path, replaceState, setModified]);
   const hasMaxRows = maxRows && rows.length >= maxRows;
   const fieldErrorCount = errorPaths.length;
   const fieldHasErrors = submitted && fieldErrorCount + (valid ? 0 : 1) > 0;
+  const displayedErrorCount = fieldErrorCount > 0 ? fieldErrorCount : fieldHasErrors ? 1 : 0;
   const showMinRows = rows.length < minRows || required && rows.length === 0;
   const showRequired = readOnly && 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);
@@ -341,8 +374,9 @@ const BlocksFieldComponent = props => {
   return /*#__PURE__*/_jsxs("div", {
     className: [fieldBaseClass, baseClass, className, fieldHasErrors ? `${baseClass}--has-error` : `${baseClass}--has-no-error`].filter(Boolean).join(' '),
     id: `field-${path?.replace(/\./g, '__')}`,
+    ref: fieldRef,
     style: styles,
-    children: [showError && /*#__PURE__*/_jsx(RenderCustomComponent, {
+    children: [shouldShowFieldError && /*#__PURE__*/_jsx(RenderCustomComponent, {
       CustomComponent: Error,
       Fallback: /*#__PURE__*/_jsx(FieldError, {
         path: path,
@@ -366,14 +400,17 @@ const BlocksFieldComponent = props => {
                 required: required
               })
             })
-          }), fieldHasErrors && fieldErrorCount > 0 && /*#__PURE__*/_jsx(ErrorPill, {
-            count: fieldErrorCount,
+          }), displayedErrorCount > 0 && /*#__PURE__*/_jsx(ErrorPill, {
+            count: displayedErrorCount,
             i18n: i18n,
             withMessage: true
           })]
         }), /*#__PURE__*/_jsxs("ul", {
           className: `${baseClass}__header-actions`,
           children: [rows.length > 0 && /*#__PURE__*/_jsx(CollapseAllToggle, {
+            controls: rowsID,
+            isExpanded: rows.some(row_0 => !row_0.collapsed),
+            label: getTranslation(label || labels?.plural || name, i18n),
             onClick: toggleCollapseAll
           }), /*#__PURE__*/_jsx("li", {
             children: /*#__PURE__*/_jsx(ClipboardAction, {
@@ -408,25 +445,26 @@ const BlocksFieldComponent = props => {
       readOnly: readOnly
     }), (rows.length > 0 || !valid && (showRequired || showMinRows)) && /*#__PURE__*/_jsxs(DraggableSortable, {
       className: `${baseClass}__rows`,
-      ids: rows.map(row_0 => row_0.id),
+      id: rowsID,
+      ids: rows.map(row_1 => row_1.id),
       onDragEnd: ({
         moveFromIndex: moveFromIndex_0,
         moveToIndex: moveToIndex_0
       }) => moveRow(moveFromIndex_0, moveToIndex_0),
       renderDragOverlay: isSortable && !readOnly && !disabled ? renderDragOverlay : undefined,
       sortingStrategy: verticalListSortingStrategy,
-      children: [rows.map((row_1, i) => {
+      children: [rows.map((row_2, i) => {
         const {
           blockType: blockType_1,
           isLoading
-        } = row_1;
+        } = row_2;
         const blockConfig_0 = getBlockConfig(blockType_1);
         if (blockConfig_0) {
           const rowPath = `${path}.${i}`;
           const rowErrorCount = errorPaths.filter(errorPath => errorPath.startsWith(rowPath + '.')).length;
           return /*#__PURE__*/_jsx(DraggableSortableItem, {
             disabled: readOnly || disabled || !isSortable,
-            id: row_1.id,
+            id: row_2.id,
             children: draggableSortableItemProps => /*#__PURE__*/_jsx(BlockRow, {
               ...draggableSortableItemProps,
               addRow: addRow,
@@ -445,17 +483,18 @@ const BlocksFieldComponent = props => {
               moveRow: moveRow,
               parentPath: path,
               pasteRow: pasteRow,
+              pasteRowBelow: pasteRowBelow,
               path: rowPath,
               permissions: permissions,
               readOnly: readOnly || disabled,
               removeRow: removeRow,
-              row: row_1,
+              row: row_2,
               rowCount: rows.length,
               rowIndex: i,
               schemaPath: schemaPath + blockConfig_0.slug,
               setCollapse: setCollapse
             })
-          }, row_1.id);
+          }, row_2.id);
         }
         return null;
       }), !valid && /*#__PURE__*/_jsxs(React.Fragment, {
@@ -471,14 +510,14 @@ const BlocksFieldComponent = props => {
           })
         })]
       })]
-    }), !hasMaxRows && /*#__PURE__*/_jsxs(Fragment, {
+    }), !hasMaxRows && !readOnly && /*#__PURE__*/_jsxs(Fragment, {
       children: [/*#__PURE__*/_jsx(DrawerToggler, {
         className: `${baseClass}__drawer-toggler`,
-        disabled: readOnly || disabled,
+        disabled: disabled,
         slug: drawerSlug,
         children: /*#__PURE__*/_jsx(Button, {
           buttonStyle: "ghost",
-          disabled: readOnly || disabled,
+          disabled: disabled,
           el: "span",
           icon: /*#__PURE__*/_jsx(CirclePlusIcon, {}),
           iconPosition: "left",