@payloadcms/ui 3.0.0-beta.12 → 3.0.0-beta.121

package/dist/fields/Blocks/index.js

@@ -1,4 +1,7 @@
 'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getTranslation } from '@payloadcms/translations';
 import React, { Fragment, useCallback } from 'react';
 import { Banner } from '../../elements/Banner/index.js';
@@ -8,273 +11,504 @@ import { DraggableSortable } from '../../elements/DraggableSortable/index.js';
 import { DrawerToggler } from '../../elements/Drawer/index.js';
 import { useDrawerSlug } from '../../elements/Drawer/useDrawerSlug.js';
 import { ErrorPill } from '../../elements/ErrorPill/index.js';
+import { useFieldProps } from '../../forms/FieldPropsProvider/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 { useField } from '../../forms/useField/index.js';
+import { withCondition } from '../../forms/withCondition/index.js';
 import { useConfig } from '../../providers/Config/index.js';
 import { useDocumentInfo } from '../../providers/DocumentInfo/index.js';
 import { useLocale } from '../../providers/Locale/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { scrollToID } from '../../utilities/scrollToID.js';
+import { FieldDescription } from '../FieldDescription/index.js';
+import { FieldError } from '../FieldError/index.js';
+import { FieldLabel } from '../FieldLabel/index.js';
 import { fieldBaseClass } from '../shared/index.js';
 import { BlockRow } from './BlockRow.js';
 import { BlocksDrawer } from './BlocksDrawer/index.js';
+import './index.scss';
 const baseClass = 'blocks-field';
-import { FieldDescription } from '@payloadcms/ui/forms/FieldDescription';
-import { FieldError } from '@payloadcms/ui/forms/FieldError';
-import { FieldLabel } from '@payloadcms/ui/forms/FieldLabel';
-import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider';
-import { withCondition } from '@payloadcms/ui/forms/withCondition';
-const _BlocksField = (props)=>{
-    const { i18n, t } = useTranslation();
-    const { name, CustomDescription, CustomError, CustomLabel, blocks, className, descriptionProps, errorProps, forceRender = false, label, labelProps, labels: labelsFromProps, localized, maxRows, minRows: minRowsProp, path: pathFromProps, readOnly: readOnlyFromProps, required, validate } = props;
-    const { indexPath, readOnly: readOnlyFromContext } = useFieldProps();
-    const readOnly = readOnlyFromProps || readOnlyFromContext;
-    const minRows = minRowsProp ?? required ? 1 : 0;
-    const { setDocFieldPreferences } = useDocumentInfo();
-    const { addFieldRow, dispatchFields, setModified } = useForm();
-    const { code: locale } = useLocale();
-    const { localization } = useConfig();
-    const drawerSlug = useDrawerSlug('blocks-drawer');
-    const submitted = useFormSubmitted();
-    const labels = {
-        plural: t('fields:blocks'),
-        singular: t('fields:block'),
-        ...labelsFromProps
-    };
-    const editingDefaultLocale = (()=>{
-        if (localization && localization.fallback) {
-            const defaultLocale = localization.defaultLocale || 'en';
-            return locale === defaultLocale;
-        }
+const BlocksFieldComponent = props => {
+  const $ = _c(56);
+  const {
+    i18n,
+    t
+  } = useTranslation();
+  const {
+    descriptionProps,
+    errorProps,
+    field,
+    field: t0,
+    forceRender: t1,
+    labelProps,
+    readOnly: readOnlyFromTopLevelProps,
+    validate
+  } = props;
+  const {
+    name,
+    _path: pathFromProps,
+    admin: t2,
+    blocks,
+    labels: labelsFromProps,
+    localized,
+    maxRows,
+    minRows: minRowsProp,
+    required
+  } = t0;
+  let t3;
+  if ($[0] !== t2) {
+    t3 = t2 === undefined ? {} : t2;
+    $[0] = t2;
+    $[1] = t3;
+  } else {
+    t3 = $[1];
+  }
+  const {
+    className,
+    description,
+    isSortable: t4,
+    readOnly: readOnlyFromAdmin
+  } = t3;
+  const isSortable = t4 === undefined ? true : t4;
+  const forceRender = t1 === undefined ? false : t1;
+  const readOnlyFromProps = readOnlyFromTopLevelProps || readOnlyFromAdmin;
+  const {
+    indexPath,
+    readOnly: readOnlyFromContext
+  } = useFieldProps();
+  const minRows = minRowsProp ?? required ? 1 : 0;
+  const {
+    setDocFieldPreferences
+  } = useDocumentInfo();
+  const {
+    addFieldRow,
+    dispatchFields,
+    setModified
+  } = useForm();
+  const {
+    code: locale
+  } = useLocale();
+  const {
+    config: t5
+  } = useConfig();
+  const {
+    localization
+  } = t5;
+  const drawerSlug = useDrawerSlug("blocks-drawer");
+  const submitted = useFormSubmitted();
+  const labels = {
+    plural: t("fields:blocks"),
+    singular: t("fields:block"),
+    ...labelsFromProps
+  };
+  let t6;
+  bb0: {
+    if (localization && localization.fallback) {
+      const defaultLocale = localization.defaultLocale || "en";
+      t6 = locale === defaultLocale;
+      break bb0;
+    }
+    t6 = true;
+  }
+  const editingDefaultLocale = t6;
+  let t7;
+  if ($[2] !== editingDefaultLocale || $[3] !== validate || $[4] !== maxRows || $[5] !== minRows || $[6] !== required) {
+    t7 = (value, options) => {
+      if (!editingDefaultLocale && value === null) {
         return true;
-    })();
-    const memoizedValidate = useCallback((value, options)=>{
-        // alternative locales can be null
-        if (!editingDefaultLocale && value === null) {
-            return true;
-        }
-        if (typeof validate === 'function') {
-            return validate(value, {
-                ...options,
-                maxRows,
-                minRows,
-                required
-            });
-        }
-    }, [
-        maxRows,
-        minRows,
-        required,
-        validate,
-        editingDefaultLocale
-    ]);
-    const { path: pathFromContext } = useFieldProps();
-    const { errorPaths, path, permissions, rows = [], schemaPath, showError, valid, value } = useField({
-        hasRows: true,
-        path: pathFromContext || pathFromProps || name,
-        validate: memoizedValidate
-    });
-    const addRow = useCallback(async (rowIndex, blockType)=>{
-        await addFieldRow({
-            data: {
-                blockType
-            },
-            path,
-            rowIndex,
-            schemaPath: `${schemaPath}.${blockType}`
+      }
+      if (typeof validate === "function") {
+        return validate(value, {
+          ...options,
+          maxRows,
+          minRows,
+          required
         });
-        setModified(true);
-        setTimeout(()=>{
-            scrollToID(`${path}-row-${rowIndex + 1}`);
-        }, 0);
-    }, [
-        addFieldRow,
-        path,
-        setModified,
-        schemaPath
-    ]);
-    const duplicateRow = useCallback((rowIndex)=>{
-        dispatchFields({
-            type: 'DUPLICATE_ROW',
-            path,
-            rowIndex
-        });
-        setModified(true);
-        setTimeout(()=>{
-            scrollToID(`${path}-row-${rowIndex + 1}`);
-        }, 0);
-    }, [
-        dispatchFields,
+      }
+    };
+    $[2] = editingDefaultLocale;
+    $[3] = validate;
+    $[4] = maxRows;
+    $[5] = minRows;
+    $[6] = required;
+    $[7] = t7;
+  } else {
+    t7 = $[7];
+  }
+  const memoizedValidate = t7;
+  const {
+    path: pathFromContext
+  } = useFieldProps();
+  const t8 = pathFromContext ?? pathFromProps ?? name;
+  let t9;
+  if ($[8] !== t8 || $[9] !== memoizedValidate) {
+    t9 = {
+      hasRows: true,
+      path: t8,
+      validate: memoizedValidate
+    };
+    $[8] = t8;
+    $[9] = memoizedValidate;
+    $[10] = t9;
+  } else {
+    t9 = $[10];
+  }
+  const {
+    errorPaths,
+    formInitializing,
+    formProcessing,
+    path,
+    permissions,
+    rows: t10,
+    schemaPath,
+    showError,
+    valid,
+    value: value_0
+  } = useField(t9);
+  let t11;
+  if ($[11] !== t10) {
+    t11 = t10 === undefined ? [] : t10;
+    $[11] = t10;
+    $[12] = t11;
+  } else {
+    t11 = $[12];
+  }
+  const rows = t11;
+  const disabled = readOnlyFromProps || readOnlyFromContext || formProcessing || formInitializing;
+  let t12;
+  if ($[13] !== addFieldRow || $[14] !== path || $[15] !== schemaPath || $[16] !== setModified) {
+    t12 = async (rowIndex, blockType) => {
+      await addFieldRow({
+        data: {
+          blockType
+        },
         path,
-        setModified
-    ]);
-    const removeRow = useCallback((rowIndex)=>{
-        dispatchFields({
-            type: 'REMOVE_ROW',
-            path,
-            rowIndex
-        });
-        setModified(true);
-    }, [
+        rowIndex,
+        schemaPath: `${schemaPath}.${blockType}`
+      });
+      setModified(true);
+      setTimeout(() => {
+        scrollToID(`${path}-row-${rowIndex + 1}`);
+      }, 0);
+    };
+    $[13] = addFieldRow;
+    $[14] = path;
+    $[15] = schemaPath;
+    $[16] = setModified;
+    $[17] = t12;
+  } else {
+    t12 = $[17];
+  }
+  const addRow = t12;
+  let t13;
+  if ($[18] !== dispatchFields || $[19] !== path || $[20] !== setModified) {
+    t13 = rowIndex_0 => {
+      dispatchFields({
+        type: "DUPLICATE_ROW",
         path,
-        dispatchFields,
-        setModified
-    ]);
-    const moveRow = useCallback((moveFromIndex, moveToIndex)=>{
-        dispatchFields({
-            type: 'MOVE_ROW',
-            moveFromIndex,
-            moveToIndex,
-            path
-        });
-        setModified(true);
-    }, [
-        dispatchFields,
+        rowIndex: rowIndex_0
+      });
+      setModified(true);
+      setTimeout(() => {
+        scrollToID(`${path}-row-${rowIndex_0 + 1}`);
+      }, 0);
+    };
+    $[18] = dispatchFields;
+    $[19] = path;
+    $[20] = setModified;
+    $[21] = t13;
+  } else {
+    t13 = $[21];
+  }
+  const duplicateRow = t13;
+  let t14;
+  if ($[22] !== dispatchFields || $[23] !== path || $[24] !== setModified) {
+    t14 = rowIndex_1 => {
+      dispatchFields({
+        type: "REMOVE_ROW",
         path,
-        setModified
-    ]);
-    const toggleCollapseAll = useCallback((collapsed)=>{
-        dispatchFields({
-            type: 'SET_ALL_ROWS_COLLAPSED',
-            collapsed,
-            path,
-            setDocFieldPreferences
-        });
-    }, [
-        dispatchFields,
+        rowIndex: rowIndex_1
+      });
+      setModified(true);
+    };
+    $[22] = dispatchFields;
+    $[23] = path;
+    $[24] = setModified;
+    $[25] = t14;
+  } else {
+    t14 = $[25];
+  }
+  const removeRow = t14;
+  let t15;
+  if ($[26] !== dispatchFields || $[27] !== path || $[28] !== setModified) {
+    t15 = (moveFromIndex, moveToIndex) => {
+      dispatchFields({
+        type: "MOVE_ROW",
+        moveFromIndex,
+        moveToIndex,
+        path
+      });
+      setModified(true);
+    };
+    $[26] = dispatchFields;
+    $[27] = path;
+    $[28] = setModified;
+    $[29] = t15;
+  } else {
+    t15 = $[29];
+  }
+  const moveRow = t15;
+  let t16;
+  if ($[30] !== rows || $[31] !== dispatchFields || $[32] !== path || $[33] !== setDocFieldPreferences) {
+    t16 = collapsed => {
+      const {
+        collapsedIDs,
+        updatedRows
+      } = toggleAllRows({
+        collapsed,
+        rows
+      });
+      dispatchFields({
+        type: "SET_ALL_ROWS_COLLAPSED",
         path,
-        setDocFieldPreferences
-    ]);
-    const setCollapse = useCallback((rowID, collapsed)=>{
-        dispatchFields({
-            type: 'SET_ROW_COLLAPSED',
-            collapsed,
-            path,
-            rowID,
-            setDocFieldPreferences
-        });
-    }, [
-        dispatchFields,
+        updatedRows
+      });
+      setDocFieldPreferences(path, {
+        collapsed: collapsedIDs
+      });
+    };
+    $[30] = rows;
+    $[31] = dispatchFields;
+    $[32] = path;
+    $[33] = setDocFieldPreferences;
+    $[34] = t16;
+  } else {
+    t16 = $[34];
+  }
+  const toggleCollapseAll = t16;
+  let t17;
+  if ($[35] !== rows || $[36] !== dispatchFields || $[37] !== path || $[38] !== setDocFieldPreferences) {
+    t17 = (rowID, collapsed_0) => {
+      const {
+        collapsedIDs: collapsedIDs_0,
+        updatedRows: updatedRows_0
+      } = extractRowsAndCollapsedIDs({
+        collapsed: collapsed_0,
+        rowID,
+        rows
+      });
+      dispatchFields({
+        type: "SET_ROW_COLLAPSED",
         path,
-        setDocFieldPreferences
-    ]);
-    const hasMaxRows = maxRows && rows.length >= maxRows;
-    const fieldErrorCount = errorPaths.length;
-    const fieldHasErrors = submitted && fieldErrorCount + (valid ? 0 : 1) > 0;
-    const showMinRows = rows.length < minRows || required && rows.length === 0;
-    const showRequired = readOnly && rows.length === 0;
-    return /*#__PURE__*/ React.createElement("div", {
-        className: [
-            fieldBaseClass,
-            baseClass,
-            className,
-            fieldHasErrors ? `${baseClass}--has-error` : `${baseClass}--has-no-error`
-        ].filter(Boolean).join(' '),
-        id: `field-${path.replace(/\./g, '__')}`
-    }, showError && /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__error-wrap`
-    }, /*#__PURE__*/ React.createElement(FieldError, {
-        CustomError: CustomError,
-        path: path,
-        ...errorProps || {}
-    })), /*#__PURE__*/ React.createElement("header", {
-        className: `${baseClass}__header`
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__header-wrap`
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__heading-with-error`
-    }, /*#__PURE__*/ React.createElement("h3", null, /*#__PURE__*/ React.createElement(FieldLabel, {
-        CustomLabel: CustomLabel,
-        as: "span",
-        label: label,
-        required: required,
-        unstyled: true,
-        ...labelProps || {}
-    })), fieldHasErrors && fieldErrorCount > 0 && /*#__PURE__*/ React.createElement(ErrorPill, {
-        count: fieldErrorCount,
-        i18n: i18n,
-        withMessage: true
-    })), rows.length > 0 && /*#__PURE__*/ React.createElement("ul", {
-        className: `${baseClass}__header-actions`
-    }, /*#__PURE__*/ React.createElement("li", null, /*#__PURE__*/ React.createElement("button", {
-        className: `${baseClass}__header-action`,
-        onClick: ()=>toggleCollapseAll(true),
-        type: "button"
-    }, t('fields:collapseAll'))), /*#__PURE__*/ React.createElement("li", null, /*#__PURE__*/ React.createElement("button", {
-        className: `${baseClass}__header-action`,
-        onClick: ()=>toggleCollapseAll(false),
-        type: "button"
-    }, t('fields:showAll'))))), /*#__PURE__*/ React.createElement(FieldDescription, {
-        CustomDescription: CustomDescription,
-        ...descriptionProps || {}
-    })), /*#__PURE__*/ React.createElement(NullifyLocaleField, {
-        fieldValue: value,
-        localized: localized,
-        path: path
-    }), (rows.length > 0 || !valid && (showRequired || showMinRows)) && /*#__PURE__*/ React.createElement(DraggableSortable, {
-        className: `${baseClass}__rows`,
-        ids: rows.map((row)=>row.id),
-        onDragEnd: ({ moveFromIndex, moveToIndex })=>moveRow(moveFromIndex, moveToIndex)
-    }, rows.map((row, i)=>{
-        const { blockType } = row;
-        const blockToRender = blocks.find((block)=>block.slug === blockType);
+        updatedRows: updatedRows_0
+      });
+      setDocFieldPreferences(path, {
+        collapsed: collapsedIDs_0
+      });
+    };
+    $[35] = rows;
+    $[36] = dispatchFields;
+    $[37] = path;
+    $[38] = setDocFieldPreferences;
+    $[39] = t17;
+  } else {
+    t17 = $[39];
+  }
+  const setCollapse = t17;
+  const hasMaxRows = maxRows && rows.length >= maxRows;
+  const fieldErrorCount = errorPaths.length;
+  const fieldHasErrors = submitted && fieldErrorCount + (valid ? 0 : 1) > 0;
+  const showMinRows = rows.length < minRows || required && rows.length === 0;
+  const showRequired = disabled && rows.length === 0;
+  const t18 = fieldHasErrors ? `${baseClass}--has-error` : `${baseClass}--has-no-error`;
+  let t19;
+  if ($[40] !== className || $[41] !== t18) {
+    t19 = [fieldBaseClass, baseClass, className, t18].filter(Boolean);
+    $[40] = className;
+    $[41] = t18;
+    $[42] = t19;
+  } else {
+    t19 = $[42];
+  }
+  let t20;
+  if ($[43] !== showError || $[44] !== field || $[45] !== errorProps || $[46] !== path) {
+    t20 = showError && _jsx(FieldError, {
+      CustomError: field?.admin?.components?.Error,
+      field,
+      path,
+      ...(errorProps || {})
+    });
+    $[43] = showError;
+    $[44] = field;
+    $[45] = errorProps;
+    $[46] = path;
+    $[47] = t20;
+  } else {
+    t20 = $[47];
+  }
+  let t21;
+  if ($[48] !== labelProps) {
+    t21 = labelProps || {};
+    $[48] = labelProps;
+    $[49] = t21;
+  } else {
+    t21 = $[49];
+  }
+  let t22;
+  if ($[50] !== fieldHasErrors || $[51] !== fieldErrorCount || $[52] !== i18n) {
+    t22 = fieldHasErrors && fieldErrorCount > 0 && _jsx(ErrorPill, {
+      count: fieldErrorCount,
+      i18n,
+      withMessage: true
+    });
+    $[50] = fieldHasErrors;
+    $[51] = fieldErrorCount;
+    $[52] = i18n;
+    $[53] = t22;
+  } else {
+    t22 = $[53];
+  }
+  let t23;
+  if ($[54] !== descriptionProps) {
+    t23 = descriptionProps || {};
+    $[54] = descriptionProps;
+    $[55] = t23;
+  } else {
+    t23 = $[55];
+  }
+  return _jsxs("div", {
+    className: t19.join(" "),
+    id: `field-${path.replace(/\./g, "__")}`,
+    children: [t20, _jsxs("header", {
+      className: `${baseClass}__header`,
+      children: [_jsxs("div", {
+        className: `${baseClass}__header-wrap`,
+        children: [_jsxs("div", {
+          className: `${baseClass}__heading-with-error`,
+          children: [_jsx("h3", {
+            children: _jsx(FieldLabel, {
+              as: "span",
+              field,
+              Label: field?.admin?.components?.Description,
+              unstyled: true,
+              ...t21
+            })
+          }), t22]
+        }), rows.length > 0 && _jsxs("ul", {
+          className: `${baseClass}__header-actions`,
+          children: [_jsx("li", {
+            children: _jsx("button", {
+              className: `${baseClass}__header-action`,
+              onClick: () => toggleCollapseAll(true),
+              type: "button",
+              children: t("fields:collapseAll")
+            })
+          }), _jsx("li", {
+            children: _jsx("button", {
+              className: `${baseClass}__header-action`,
+              onClick: () => toggleCollapseAll(false),
+              type: "button",
+              children: t("fields:showAll")
+            })
+          })]
+        })]
+      }), _jsx(FieldDescription, {
+        Description: field?.admin?.components?.Description,
+        description,
+        field,
+        ...t23
+      })]
+    }), _jsx(NullifyLocaleField, {
+      fieldValue: value_0,
+      localized,
+      path
+    }), (rows.length > 0 || !valid && (showRequired || showMinRows)) && _jsxs(DraggableSortable, {
+      className: `${baseClass}__rows`,
+      ids: rows.map(_temp),
+      onDragEnd: t24 => {
+        const {
+          moveFromIndex: moveFromIndex_0,
+          moveToIndex: moveToIndex_0
+        } = t24;
+        return moveRow(moveFromIndex_0, moveToIndex_0);
+      },
+      children: [rows.map((row_0, i) => {
+        const {
+          blockType: blockType_0
+        } = row_0;
+        const blockToRender = blocks.find(block => block.slug === blockType_0);
         if (blockToRender) {
-            const rowErrorCount = errorPaths.filter((errorPath)=>errorPath.startsWith(`${path}.${i}`)).length;
-            return /*#__PURE__*/ React.createElement(DraggableSortableItem, {
-                disabled: readOnly,
-                id: row.id,
-                key: row.id
-            }, (draggableSortableItemProps)=>/*#__PURE__*/ React.createElement(BlockRow, {
-                    ...draggableSortableItemProps,
-                    addRow: addRow,
-                    block: blockToRender,
-                    blocks: blocks,
-                    duplicateRow: duplicateRow,
-                    errorCount: rowErrorCount,
-                    forceRender: forceRender,
-                    hasMaxRows: hasMaxRows,
-                    indexPath: indexPath,
-                    labels: labels,
-                    moveRow: moveRow,
-                    path: path,
-                    permissions: permissions,
-                    readOnly: readOnly,
-                    removeRow: removeRow,
-                    row: row,
-                    rowCount: rows.length,
-                    rowIndex: i,
-                    schemaPath: schemaPath,
-                    setCollapse: setCollapse
-                }));
+          const rowErrorCount = errorPaths.filter(errorPath => errorPath.startsWith(`${path}.${i}.`)).length;
+          return _jsx(DraggableSortableItem, {
+            disabled: disabled || !isSortable,
+            id: row_0.id,
+            children: draggableSortableItemProps => _jsx(BlockRow, {
+              ...draggableSortableItemProps,
+              addRow,
+              block: blockToRender,
+              blocks,
+              duplicateRow,
+              errorCount: rowErrorCount,
+              forceRender,
+              hasMaxRows,
+              indexPath,
+              isSortable,
+              labels,
+              moveRow,
+              path,
+              permissions,
+              readOnly: disabled,
+              removeRow,
+              row: row_0,
+              rowCount: rows.length,
+              rowIndex: i,
+              schemaPath,
+              setCollapse
+            })
+          }, row_0.id);
         }
         return null;
-    }), !editingDefaultLocale && /*#__PURE__*/ React.createElement(React.Fragment, null, showMinRows && /*#__PURE__*/ React.createElement(Banner, {
-        type: "error"
-    }, t('validation:requiresAtLeast', {
-        count: minRows,
-        label: getTranslation(minRows > 1 ? labels.plural : labels.singular, i18n) || t(minRows > 1 ? 'general:row' : 'general:rows')
-    })), showRequired && /*#__PURE__*/ React.createElement(Banner, null, t('validation:fieldHasNo', {
-        label: getTranslation(labels.plural, i18n)
-    })))), !readOnly && !hasMaxRows && /*#__PURE__*/ React.createElement(Fragment, null, /*#__PURE__*/ React.createElement(DrawerToggler, {
+      }), !editingDefaultLocale && _jsxs(React.Fragment, {
+        children: [showMinRows && _jsx(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")
+          })
+        }), showRequired && _jsx(Banner, {
+          children: t("validation:fieldHasNo", {
+            label: getTranslation(labels.plural, i18n)
+          })
+        })]
+      })]
+    }), !disabled && !hasMaxRows && _jsxs(Fragment, {
+      children: [_jsx(DrawerToggler, {
         className: `${baseClass}__drawer-toggler`,
-        slug: drawerSlug
-    }, /*#__PURE__*/ React.createElement(Button, {
-        buttonStyle: "icon-label",
-        el: "span",
-        icon: "plus",
-        iconPosition: "left",
-        iconStyle: "with-border"
-    }, t('fields:addLabel', {
-        label: getTranslation(labels.singular, i18n)
-    }))), /*#__PURE__*/ React.createElement(BlocksDrawer, {
-        addRow: addRow,
+        slug: drawerSlug,
+        children: _jsx(Button, {
+          buttonStyle: "icon-label",
+          el: "span",
+          icon: "plus",
+          iconPosition: "left",
+          iconStyle: "with-border",
+          children: t("fields:addLabel", {
+            label: getTranslation(labels.singular, i18n)
+          })
+        })
+      }), _jsx(BlocksDrawer, {
+        addRow,
         addRowIndex: rows?.length || 0,
-        blocks: blocks,
-        drawerSlug: drawerSlug,
-        labels: labels
-    })));
+        blocks,
+        drawerSlug,
+        labels
+      })]
+    })]
+  });
 };
-export const BlocksField = withCondition(_BlocksField);
-
+export const BlocksField = withCondition(BlocksFieldComponent);
+function _temp(row) {
+  return row.id;
+}
 //# sourceMappingURL=index.js.map