@payloadcms/ui 3.68.0-internal-debug.591ab42 → 3.68.0-internal-debug.e9b66ee

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

@@ -1 +1 @@
-{"version":3,"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"],"names":["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","Fragment","_","rowBlockType","addRowIndex","index"],"mappings":"AAAA;;AAGA,SAASA,QAAQ,QAAQ,qBAAoB;AAC7C,OAAOC,WAAW,QAAO;AAEzB,SAASC,WAAW,QAAQ,sCAAqC;AACjE,SAASC,aAAa,QAAQ,yCAAwC;AACtE,SAASC,YAAY,QAAQ,0BAAyB;AAEtD,OAAO,MAAMC,aAeR,CAACC;IACJ,MAAM,EACJC,MAAM,EACNC,MAAM,EACNC,SAAS,EACTC,OAAO,EACPC,YAAY,EACZC,UAAU,EACVC,UAAU,EACVC,MAAM,EACNC,OAAO,EACPC,QAAQ,EACRC,SAAS,EACTC,QAAQ,EACRC,QAAQ,EACT,GAAGb;IAEJ,MAAM,EAAEc,UAAU,EAAEC,SAAS,EAAE,GAAGrB;IAClC,MAAMsB,aAAanB,cAAc;IAEjC,MAAM,CAACoB,YAAYC,cAAc,GAAGvB,MAAMwB,QAAQ,CAAgB;IAElE,qBACE,QAACxB,MAAMyB,QAAQ;;0BACb,QAACtB;gBACCG,QAAQ,CAACoB,GAAGC;oBACV,IAAI,OAAOrB,WAAW,YAAY;wBAChC,KAAKA,OAAOgB,YAAYK;oBAC1B;oBACAR,WAAWE;gBACb;gBACAO,aAAaV;gBACbX,QAAQA;gBACRc,YAAYA;gBACZR,QAAQA;;;;;;0BAEV,QAACZ;gBACCK,QAAQ,CAACuB;oBACPN,cAAcM;oBACdT,UAAUC;gBACZ;gBACAZ,SAASA;gBACTC,cAAc,IAAMA,aAAaQ,UAAUV;gBAC3CG,YAAYA;gBACZkB,OAAOX;gBACPN,YAAYA;gBACZE,SAASA;gBACTC,UAAUA;gBACVC,WAAWA;gBACXC,UAAUA;;;;;;;;;;;;AAIlB,EAAC"}
+{"version":3,"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"],"names":["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","Fragment","_","rowBlockType","addRowIndex","index"],"mappings":"AAAA;AAGA,SAASA,QAAQ,QAAQ,qBAAoB;AAC7C,OAAOC,WAAW,QAAO;AAEzB,SAASC,WAAW,QAAQ,sCAAqC;AACjE,SAASC,aAAa,QAAQ,yCAAwC;AACtE,SAASC,YAAY,QAAQ,0BAAyB;AAEtD,OAAO,MAAMC,aAeR,CAACC;IACJ,MAAM,EACJC,MAAM,EACNC,MAAM,EACNC,SAAS,EACTC,OAAO,EACPC,YAAY,EACZC,UAAU,EACVC,UAAU,EACVC,MAAM,EACNC,OAAO,EACPC,QAAQ,EACRC,SAAS,EACTC,QAAQ,EACRC,QAAQ,EACT,GAAGb;IAEJ,MAAM,EAAEc,UAAU,EAAEC,SAAS,EAAE,GAAGrB;IAClC,MAAMsB,aAAanB,cAAc;IAEjC,MAAM,CAACoB,YAAYC,cAAc,GAAGvB,MAAMwB,QAAQ,CAAgB;IAElE,QACGxB,MAAMyB,SAAS;MACd,CAACtB,aACCG,QAAQ,CAACoB,GAAGC;QACV,IAAI,OAAOrB,WAAW,YAAY;YAChC,KAAKA,OAAOgB,YAAYK;QAC1B;QACAR,WAAWE;IACb,GACAO,aAAaV,UACbX,QAAQA,QACRc,YAAYA,YACZR,QAAQA,SACR;MACF,CAACZ,YACCK,QAAQ,CAACuB;QACPN,cAAcM;QACdT,UAAUC;IACZ,GACAZ,SAASA,SACTC,cAAc,IAAMA,aAAaQ,UAAUV,YAC3CG,YAAYA,YACZkB,OAAOX,UACPN,YAAYA,YACZE,SAASA,SACTC,UAAUA,UACVC,WAAWA,WACXC,UAAUA,WACV;IACJ,EAAEjB,MAAMyB;AAEZ,EAAC"}

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

@@ -1,6 +1,4 @@
 'use client';
-import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
-import React from 'react';
 import { useField } from '../../../forms/useField/index.js';
 import { useTranslation } from '../../../providers/Translation/index.js';
 import './index.scss';
@@ -22,28 +20,9 @@ const baseClass = 'section-title';
         e.preventDefault();
         setValue(e.target.value);
     });
-    return /*#__PURE__*/ _jsxDEV("div", {
-        className: classes,
-        "data-value": customValue || value,
-        children: /*#__PURE__*/ _jsxDEV("input", {
-            className: `${baseClass}__input`,
-            id: path,
-            name: path,
-            onChange: onChange,
-            placeholder: t('general:untitled'),
-            readOnly: readOnly,
-            type: "text",
-            value: customValue || value || ''
-        }, void 0, false, {
-            fileName: "src/fields/Blocks/SectionTitle/index.tsx",
-            lineNumber: 39,
-            columnNumber: 7
-        }, this)
-    }, void 0, false, {
-        fileName: "src/fields/Blocks/SectionTitle/index.tsx",
-        lineNumber: 38,
-        columnNumber: 5
-    }, this);
+    return <div className={classes} data-value={customValue || value}>
+      <input className={`${baseClass}__input`} id={path} name={path} onChange={onChange} placeholder={t('general:untitled')} readOnly={readOnly} type="text" value={customValue || value || ''}/>
+    </div>;
 };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"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.scss'\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}>\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"],"names":["React","useField","useTranslation","baseClass","SectionTitle","props","customOnChange","customValue","path","readOnly","setValue","value","t","classes","filter","Boolean","join","onChange","e","stopPropagation","preventDefault","target","div","className","data-value","input","id","name","placeholder","type"],"mappings":"AAAA;;AACA,OAAOA,WAAW,QAAO;AAEzB,SAASC,QAAQ,QAAQ,mCAAkC;AAC3D,SAASC,cAAc,QAAQ,0CAAyC;AACxE,OAAO,eAAc;AAErB,MAAMC,YAAY;AASlB;;;CAGC,GACD,OAAO,MAAMC,eAAgC,CAACC;IAC5C,MAAM,EAAEC,cAAc,EAAEC,WAAW,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGJ;IAExD,MAAM,EAAEK,QAAQ,EAAEC,KAAK,EAAE,GAAGV,SAAS;QAAEO;IAAK;IAC5C,MAAM,EAAEI,CAAC,EAAE,GAAGV;IAEd,MAAMW,UAAU;QAACV;KAAU,CAACW,MAAM,CAACC,SAASC,IAAI,CAAC;IAEjD,MAAMC,WACJX,kBACC,CAAA,CAACY;QACAA,EAAEC,eAAe;QACjBD,EAAEE,cAAc;QAChBV,SAASQ,EAAEG,MAAM,CAACV,KAAK;IACzB,CAAA;IAEF,qBACE,QAACW;QAAIC,WAAWV;QAASW,cAAYjB,eAAeI;kBAClD,cAAA,QAACc;YACCF,WAAW,GAAGpB,UAAU,OAAO,CAAC;YAChCuB,IAAIlB;YACJmB,MAAMnB;YACNS,UAAUA;YACVW,aAAahB,EAAE;YACfH,UAAUA;YACVoB,MAAK;YACLlB,OAAOJ,eAAgBI,SAAoB;;;;;;;;;;;AAInD,EAAC"}
+{"version":3,"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.scss'\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}>\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"],"names":["useField","useTranslation","baseClass","SectionTitle","props","customOnChange","customValue","path","readOnly","setValue","value","t","classes","filter","Boolean","join","onChange","e","stopPropagation","preventDefault","target","div","className","data-value","input","id","name","placeholder","type"],"mappings":"AAAA;AAGA,SAASA,QAAQ,QAAQ,mCAAkC;AAC3D,SAASC,cAAc,QAAQ,0CAAyC;AACxE,OAAO,eAAc;AAErB,MAAMC,YAAY;AASlB;;;CAGC,GACD,OAAO,MAAMC,eAAgC,CAACC;IAC5C,MAAM,EAAEC,cAAc,EAAEC,WAAW,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGJ;IAExD,MAAM,EAAEK,QAAQ,EAAEC,KAAK,EAAE,GAAGV,SAAS;QAAEO;IAAK;IAC5C,MAAM,EAAEI,CAAC,EAAE,GAAGV;IAEd,MAAMW,UAAU;QAACV;KAAU,CAACW,MAAM,CAACC,SAASC,IAAI,CAAC;IAEjD,MAAMC,WACJX,kBACC,CAAA,CAACY;QACAA,EAAEC,eAAe;QACjBD,EAAEE,cAAc;QAChBV,SAASQ,EAAEG,MAAM,CAACV,KAAK;IACzB,CAAA;IAEF,QACGW,IAAIC,WAAWV,SAASW,YAAYjB,eAAeI,OAAO;MACzD,CAACc,MACCF,WAAW,GAAGpB,UAAU,OAAO,CAAC,EAChCuB,IAAIlB,MACJmB,MAAMnB,MACNS,UAAUA,UACVW,aAAahB,EAAE,qBACfH,UAAUA,UACVoB,KAAK,OACLlB,OAAOJ,eAAgBI,SAAoB,KAC3C;IACJ,EAAEW;AAEN,EAAC"}

package/dist/fields/Blocks/index.js

@@ -1,5 +1,4 @@
 'use client';
-import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import { getTranslation } from '@payloadcms/translations';
 import React, { Fragment, useCallback, useMemo } from 'react';
 import { toast } from 'sonner';
@@ -284,331 +283,89 @@ const BlocksFieldComponent = (props)=>{
     const styles = useMemo(()=>mergeFieldStyles(field), [
         field
     ]);
-    return /*#__PURE__*/ _jsxDEV("div", {
-        className: [
-            fieldBaseClass,
-            baseClass,
-            className,
-            fieldHasErrors ? `${baseClass}--has-error` : `${baseClass}--has-no-error`
-        ].filter(Boolean).join(' '),
-        id: `field-${path?.replace(/\./g, '__')}`,
-        style: styles,
-        children: [
-            showError && /*#__PURE__*/ _jsxDEV(RenderCustomComponent, {
-                CustomComponent: Error,
-                Fallback: /*#__PURE__*/ _jsxDEV(FieldError, {
-                    path: path,
-                    showError: showError
-                }, void 0, false, {
-                    fileName: "src/fields/Blocks/index.tsx",
-                    lineNumber: 333,
-                    columnNumber: 21
-                }, void 0)
-            }, void 0, false, {
-                fileName: "src/fields/Blocks/index.tsx",
-                lineNumber: 331,
-                columnNumber: 9
-            }, this),
-            /*#__PURE__*/ _jsxDEV("header", {
-                className: `${baseClass}__header`,
-                children: [
-                    /*#__PURE__*/ _jsxDEV("div", {
-                        className: `${baseClass}__header-wrap`,
-                        children: [
-                            /*#__PURE__*/ _jsxDEV("div", {
-                                className: `${baseClass}__heading-with-error`,
-                                children: [
-                                    /*#__PURE__*/ _jsxDEV("h3", {
-                                        children: /*#__PURE__*/ _jsxDEV(RenderCustomComponent, {
-                                            CustomComponent: Label,
-                                            Fallback: /*#__PURE__*/ _jsxDEV(FieldLabel, {
-                                                as: "span",
-                                                label: label,
-                                                localized: localized,
-                                                path: path,
-                                                required: required
-                                            }, void 0, false, {
-                                                fileName: "src/fields/Blocks/index.tsx",
-                                                lineNumber: 343,
-                                                columnNumber: 19
-                                            }, void 0)
-                                        }, void 0, false, {
-                                            fileName: "src/fields/Blocks/index.tsx",
-                                            lineNumber: 340,
-                                            columnNumber: 15
-                                        }, this)
-                                    }, void 0, false, {
-                                        fileName: "src/fields/Blocks/index.tsx",
-                                        lineNumber: 339,
-                                        columnNumber: 13
-                                    }, this),
-                                    fieldHasErrors && fieldErrorCount > 0 && /*#__PURE__*/ _jsxDEV(ErrorPill, {
-                                        count: fieldErrorCount,
-                                        i18n: i18n,
-                                        withMessage: true
-                                    }, void 0, false, {
-                                        fileName: "src/fields/Blocks/index.tsx",
-                                        lineNumber: 354,
-                                        columnNumber: 15
-                                    }, this)
-                                ]
-                            }, void 0, true, {
-                                fileName: "src/fields/Blocks/index.tsx",
-                                lineNumber: 338,
-                                columnNumber: 11
-                            }, this),
-                            /*#__PURE__*/ _jsxDEV("ul", {
-                                className: `${baseClass}__header-actions`,
-                                children: [
-                                    rows.length > 0 && /*#__PURE__*/ _jsxDEV(Fragment, {
-                                        children: [
-                                            /*#__PURE__*/ _jsxDEV("li", {
-                                                children: /*#__PURE__*/ _jsxDEV("button", {
-                                                    className: `${baseClass}__header-action`,
-                                                    onClick: ()=>toggleCollapseAll(true),
-                                                    type: "button",
-                                                    children: t('fields:collapseAll')
-                                                }, void 0, false, {
-                                                    fileName: "src/fields/Blocks/index.tsx",
-                                                    lineNumber: 361,
-                                                    columnNumber: 19
-                                                }, this)
-                                            }, void 0, false, {
-                                                fileName: "src/fields/Blocks/index.tsx",
-                                                lineNumber: 360,
-                                                columnNumber: 17
-                                            }, this),
-                                            /*#__PURE__*/ _jsxDEV("li", {
-                                                children: /*#__PURE__*/ _jsxDEV("button", {
-                                                    className: `${baseClass}__header-action`,
-                                                    onClick: ()=>toggleCollapseAll(false),
-                                                    type: "button",
-                                                    children: t('fields:showAll')
-                                                }, void 0, false, {
-                                                    fileName: "src/fields/Blocks/index.tsx",
-                                                    lineNumber: 370,
-                                                    columnNumber: 19
-                                                }, this)
-                                            }, void 0, false, {
-                                                fileName: "src/fields/Blocks/index.tsx",
-                                                lineNumber: 369,
-                                                columnNumber: 17
-                                            }, this)
-                                        ]
-                                    }, void 0, true, {
-                                        fileName: "src/fields/Blocks/index.tsx",
-                                        lineNumber: 359,
-                                        columnNumber: 15
-                                    }, this),
-                                    /*#__PURE__*/ _jsxDEV("li", {
-                                        children: /*#__PURE__*/ _jsxDEV(ClipboardAction, {
-                                            allowCopy: rows?.length > 0,
-                                            allowPaste: !readOnly,
-                                            blocks: clientBlocks,
-                                            className: `${baseClass}__header-action`,
-                                            disabled: disabled,
-                                            getDataToCopy: ()=>reduceFormStateByPath({
-                                                    formState: {
-                                                        ...getFields()
-                                                    },
-                                                    path
-                                                }),
-                                            onPaste: pasteBlocks,
-                                            path: path,
-                                            type: type
-                                        }, void 0, false, {
-                                            fileName: "src/fields/Blocks/index.tsx",
-                                            lineNumber: 381,
-                                            columnNumber: 15
-                                        }, this)
-                                    }, void 0, false, {
-                                        fileName: "src/fields/Blocks/index.tsx",
-                                        lineNumber: 380,
-                                        columnNumber: 13
-                                    }, this)
-                                ]
-                            }, void 0, true, {
-                                fileName: "src/fields/Blocks/index.tsx",
-                                lineNumber: 357,
-                                columnNumber: 11
-                            }, this)
-                        ]
-                    }, void 0, true, {
-                        fileName: "src/fields/Blocks/index.tsx",
-                        lineNumber: 337,
-                        columnNumber: 9
-                    }, this),
-                    /*#__PURE__*/ _jsxDEV(RenderCustomComponent, {
-                        CustomComponent: Description,
-                        Fallback: /*#__PURE__*/ _jsxDEV(FieldDescription, {
-                            description: description,
-                            path: path
-                        }, void 0, false, {
-                            fileName: "src/fields/Blocks/index.tsx",
-                            lineNumber: 402,
-                            columnNumber: 21
-                        }, void 0)
-                    }, void 0, false, {
-                        fileName: "src/fields/Blocks/index.tsx",
-                        lineNumber: 400,
-                        columnNumber: 9
-                    }, this)
-                ]
-            }, void 0, true, {
-                fileName: "src/fields/Blocks/index.tsx",
-                lineNumber: 336,
-                columnNumber: 7
-            }, this),
-            BeforeInput,
-            /*#__PURE__*/ _jsxDEV(NullifyLocaleField, {
-                fieldValue: value,
-                localized: localized,
-                path: path,
-                readOnly: readOnly
-            }, void 0, false, {
-                fileName: "src/fields/Blocks/index.tsx",
-                lineNumber: 406,
-                columnNumber: 7
-            }, this),
-            (rows.length > 0 || !valid && (showRequired || showMinRows)) && /*#__PURE__*/ _jsxDEV(DraggableSortable, {
-                className: `${baseClass}__rows`,
-                ids: rows.map((row)=>row.id),
-                onDragEnd: ({ moveFromIndex, moveToIndex })=>moveRow(moveFromIndex, moveToIndex),
-                children: [
-                    rows.map((row, i)=>{
-                        const { blockType, isLoading } = row;
-                        const blockConfig = config.blocksMap[blockType] ?? clientBlocks.find((block)=>block.slug === blockType);
-                        if (blockConfig) {
-                            const rowPath = `${path}.${i}`;
-                            const rowErrorCount = errorPaths.filter((errorPath)=>errorPath.startsWith(rowPath + '.')).length;
-                            return /*#__PURE__*/ _jsxDEV(DraggableSortableItem, {
-                                disabled: readOnly || disabled || !isSortable,
-                                id: row.id,
-                                children: (draggableSortableItemProps)=>/*#__PURE__*/ _jsxDEV(BlockRow, {
-                                        ...draggableSortableItemProps,
-                                        addRow: addRow,
-                                        block: blockConfig,
-                                        // Pass all blocks, not just clientBlocksAfterFilter, as existing blocks should still be displayed even if they don't match the new filter
-                                        blocks: clientBlocks,
-                                        copyRow: copyRow,
-                                        duplicateRow: duplicateRow,
-                                        errorCount: rowErrorCount,
-                                        fields: blockConfig.fields,
-                                        hasMaxRows: hasMaxRows,
-                                        isLoading: isLoading,
-                                        isSortable: isSortable,
-                                        Label: rows?.[i]?.customComponents?.RowLabel,
-                                        labels: labels,
-                                        moveRow: moveRow,
-                                        parentPath: path,
-                                        pasteRow: pasteRow,
-                                        path: rowPath,
-                                        permissions: permissions,
-                                        readOnly: readOnly || disabled,
-                                        removeRow: removeRow,
-                                        row: row,
-                                        rowCount: rows.length,
-                                        rowIndex: i,
-                                        schemaPath: schemaPath + blockConfig.slug,
-                                        setCollapse: setCollapse
-                                    }, void 0, false, {
-                                        fileName: "src/fields/Blocks/index.tsx",
-                                        lineNumber: 438,
-                                        columnNumber: 21
-                                    }, this)
-                            }, row.id, false, {
-                                fileName: "src/fields/Blocks/index.tsx",
-                                lineNumber: 432,
-                                columnNumber: 17
-                            }, this);
-                        }
-                        return null;
-                    }),
-                    !editingDefaultLocale && /*#__PURE__*/ _jsxDEV(React.Fragment, {
-                        children: [
-                            showMinRows && /*#__PURE__*/ _jsxDEV(Banner, {
-                                type: "error",
-                                children: t('validation:requiresAtLeast', {
-                                    count: minRows,
-                                    label: getTranslation(minRows > 1 ? labels.plural : labels.singular, i18n) || t(minRows > 1 ? 'general:row' : 'general:rows')
-                                })
-                            }, void 0, false, {
-                                fileName: "src/fields/Blocks/index.tsx",
-                                lineNumber: 476,
-                                columnNumber: 17
-                            }, this),
-                            showRequired && /*#__PURE__*/ _jsxDEV(Banner, {
-                                children: t('validation:fieldHasNo', {
-                                    label: getTranslation(labels.plural, i18n)
-                                })
-                            }, void 0, false, {
-                                fileName: "src/fields/Blocks/index.tsx",
-                                lineNumber: 486,
-                                columnNumber: 17
-                            }, this)
-                        ]
-                    }, void 0, true, {
-                        fileName: "src/fields/Blocks/index.tsx",
-                        lineNumber: 474,
-                        columnNumber: 13
-                    }, this)
-                ]
-            }, void 0, true, {
-                fileName: "src/fields/Blocks/index.tsx",
-                lineNumber: 413,
-                columnNumber: 9
-            }, this),
-            !hasMaxRows && /*#__PURE__*/ _jsxDEV(Fragment, {
-                children: [
-                    /*#__PURE__*/ _jsxDEV(DrawerToggler, {
-                        className: `${baseClass}__drawer-toggler`,
-                        disabled: readOnly || disabled,
-                        slug: drawerSlug,
-                        children: /*#__PURE__*/ _jsxDEV(Button, {
-                            buttonStyle: "icon-label",
-                            disabled: readOnly || disabled,
-                            el: "span",
-                            icon: "plus",
-                            iconPosition: "left",
-                            iconStyle: "with-border",
-                            children: t('fields:addLabel', {
-                                label: getTranslation(labels.singular, i18n)
-                            })
-                        }, void 0, false, {
-                            fileName: "src/fields/Blocks/index.tsx",
-                            lineNumber: 501,
-                            columnNumber: 13
-                        }, this)
-                    }, void 0, false, {
-                        fileName: "src/fields/Blocks/index.tsx",
-                        lineNumber: 496,
-                        columnNumber: 11
-                    }, this),
-                    /*#__PURE__*/ _jsxDEV(BlocksDrawer, {
-                        addRow: addRow,
-                        addRowIndex: rows?.length || 0,
-                        // Only allow choosing filtered blocks
-                        blocks: clientBlocksAfterFilter,
-                        drawerSlug: drawerSlug,
-                        labels: labels
-                    }, void 0, false, {
-                        fileName: "src/fields/Blocks/index.tsx",
-                        lineNumber: 512,
-                        columnNumber: 11
-                    }, this)
-                ]
-            }, void 0, true, {
-                fileName: "src/fields/Blocks/index.tsx",
-                lineNumber: 495,
-                columnNumber: 9
-            }, this),
-            AfterInput
-        ]
-    }, void 0, true, {
-        fileName: "src/fields/Blocks/index.tsx",
-        lineNumber: 318,
-        columnNumber: 5
-    }, this);
+    return <div className={[
+        fieldBaseClass,
+        baseClass,
+        className,
+        fieldHasErrors ? `${baseClass}--has-error` : `${baseClass}--has-no-error`
+    ].filter(Boolean).join(' ')} id={`field-${path?.replace(/\./g, '__')}`} style={styles}>
+      {showError && <RenderCustomComponent CustomComponent={Error} Fallback={<FieldError path={path} showError={showError}/>}/>}
+      <header className={`${baseClass}__header`}>
+        <div className={`${baseClass}__header-wrap`}>
+          <div className={`${baseClass}__heading-with-error`}>
+            <h3>
+              <RenderCustomComponent CustomComponent={Label} Fallback={<FieldLabel as="span" label={label} localized={localized} path={path} required={required}/>}/>
+            </h3>
+            {fieldHasErrors && fieldErrorCount > 0 && <ErrorPill count={fieldErrorCount} i18n={i18n} withMessage/>}
+          </div>
+          <ul className={`${baseClass}__header-actions`}>
+            {rows.length > 0 && <Fragment>
+                <li>
+                  <button className={`${baseClass}__header-action`} onClick={()=>toggleCollapseAll(true)} type="button">
+                    {t('fields:collapseAll')}
+                  </button>
+                </li>
+                <li>
+                  <button className={`${baseClass}__header-action`} onClick={()=>toggleCollapseAll(false)} type="button">
+                    {t('fields:showAll')}
+                  </button>
+                </li>
+              </Fragment>}
+            <li>
+              <ClipboardAction allowCopy={rows?.length > 0} allowPaste={!readOnly} blocks={clientBlocks} className={`${baseClass}__header-action`} disabled={disabled} getDataToCopy={()=>reduceFormStateByPath({
+            formState: {
+                ...getFields()
+            },
+            path
+        })} onPaste={pasteBlocks} path={path} type={type}/>
+            </li>
+          </ul>
+        </div>
+        <RenderCustomComponent CustomComponent={Description} Fallback={<FieldDescription description={description} path={path}/>}/>
+      </header>
+      {BeforeInput}
+      <NullifyLocaleField fieldValue={value} localized={localized} path={path} readOnly={readOnly}/>
+      {(rows.length > 0 || !valid && (showRequired || showMinRows)) && <DraggableSortable className={`${baseClass}__rows`} ids={rows.map((row)=>row.id)} onDragEnd={({ moveFromIndex, moveToIndex })=>moveRow(moveFromIndex, moveToIndex)}>
+          {rows.map((row, i)=>{
+        const { blockType, isLoading } = row;
+        const blockConfig = config.blocksMap[blockType] ?? clientBlocks.find((block)=>block.slug === blockType);
+        if (blockConfig) {
+            const rowPath = `${path}.${i}`;
+            const rowErrorCount = errorPaths.filter((errorPath)=>errorPath.startsWith(rowPath + '.')).length;
+            return <DraggableSortableItem disabled={readOnly || disabled || !isSortable} id={row.id} key={row.id}>
+                  {(draggableSortableItemProps)=><BlockRow {...draggableSortableItemProps} addRow={addRow} block={blockConfig} // Pass all blocks, not just clientBlocksAfterFilter, as existing blocks should still be displayed even if they don't match the new filter
+                blocks={clientBlocks} copyRow={copyRow} duplicateRow={duplicateRow} errorCount={rowErrorCount} fields={blockConfig.fields} hasMaxRows={hasMaxRows} isLoading={isLoading} isSortable={isSortable} Label={rows?.[i]?.customComponents?.RowLabel} labels={labels} moveRow={moveRow} parentPath={path} pasteRow={pasteRow} path={rowPath} permissions={permissions} readOnly={readOnly || disabled} removeRow={removeRow} row={row} rowCount={rows.length} rowIndex={i} schemaPath={schemaPath + blockConfig.slug} setCollapse={setCollapse}/>}
+                </DraggableSortableItem>;
+        }
+        return null;
+    })}
+          {!editingDefaultLocale && <React.Fragment>
+              {showMinRows && <Banner type="error">
+                  {t('validation:requiresAtLeast', {
+        count: minRows,
+        label: getTranslation(minRows > 1 ? labels.plural : labels.singular, i18n) || t(minRows > 1 ? 'general:row' : 'general:rows')
+    })}
+                </Banner>}
+              {showRequired && <Banner>
+                  {t('validation:fieldHasNo', {
+        label: getTranslation(labels.plural, i18n)
+    })}
+                </Banner>}
+            </React.Fragment>}
+        </DraggableSortable>}
+      {!hasMaxRows && <Fragment>
+          <DrawerToggler className={`${baseClass}__drawer-toggler`} disabled={readOnly || disabled} slug={drawerSlug}>
+            <Button buttonStyle="icon-label" disabled={readOnly || disabled} el="span" icon="plus" iconPosition="left" iconStyle="with-border">
+              {t('fields:addLabel', {
+        label: getTranslation(labels.singular, i18n)
+    })}
+            </Button>
+          </DrawerToggler>
+          <BlocksDrawer addRow={addRow} addRowIndex={rows?.length || 0} // Only allow choosing filtered blocks
+    blocks={clientBlocksAfterFilter} drawerSlug={drawerSlug} labels={labels}/>
+        </Fragment>}
+      {AfterInput}
+    </div>;
 };
 export const BlocksField = withCondition(BlocksFieldComponent);