@orion-studios/payload-admin-components 0.2.0-beta.8 → 0.2.0-beta.9

package/dist/OrionBlocksFieldImpl-QKEQVSWH.mjs

@@ -0,0 +1,897 @@
+'use client';
+"use client";
+import {
+  BlockPicker,
+  SectionTabs
+} from "./chunk-3SA5V3QM.mjs";
+
+// src/components/OrionBlocksFieldImpl.tsx
+import { getTranslation as getTranslation2 } from "@payloadcms/translations";
+import { fieldBaseClass, useDrawerSlug, useModal as useModal2 } from "@payloadcms/ui";
+import { ArrayAction } from "@payloadcms/ui/elements/ArrayAction";
+import { Banner } from "@payloadcms/ui/elements/Banner";
+import { Button } from "@payloadcms/ui/elements/Button";
+import { ClipboardAction } from "@payloadcms/ui/elements/ClipboardAction";
+import { Collapsible } from "@payloadcms/ui/elements/Collapsible";
+import { DraggableSortable } from "@payloadcms/ui/elements/DraggableSortable";
+import { DraggableSortableItem } from "@payloadcms/ui/elements/DraggableSortable/DraggableSortableItem";
+import { DrawerToggler } from "@payloadcms/ui/elements/Drawer";
+import { ErrorPill } from "@payloadcms/ui/elements/ErrorPill";
+import { Pill } from "@payloadcms/ui/elements/Pill";
+import { RenderCustomComponent } from "@payloadcms/ui/elements/RenderCustomComponent";
+import { ShimmerEffect } from "@payloadcms/ui/elements/ShimmerEffect";
+import { useForm, useFormSubmitted } from "@payloadcms/ui/forms/Form";
+import { NullifyLocaleField } from "@payloadcms/ui/forms/NullifyField";
+import { RenderFields } from "@payloadcms/ui/forms/RenderFields";
+import { RowLabel } from "@payloadcms/ui/forms/RowLabel";
+import { useField } from "@payloadcms/ui/forms/useField";
+import { withCondition } from "@payloadcms/ui/forms/withCondition";
+import { FieldDescription } from "@payloadcms/ui/fields/FieldDescription";
+import { FieldError } from "@payloadcms/ui/fields/FieldError";
+import { FieldLabel } from "@payloadcms/ui/fields/FieldLabel";
+import { useThrottledValue } from "@payloadcms/ui/hooks/useThrottledValue";
+import { useConfig } from "@payloadcms/ui/providers/Config";
+import { useDocumentInfo } from "@payloadcms/ui/providers/DocumentInfo";
+import { useLocale } from "@payloadcms/ui/providers/Locale";
+import { useTranslation as useTranslation2 } from "@payloadcms/ui/providers/Translation";
+import { scrollToID } from "@payloadcms/ui/utilities/scrollToID";
+import { Fragment, useCallback, useMemo as useMemo2, useState } from "react";
+import { toast } from "sonner";
+
+// src/components/OrionBlocksDrawer.tsx
+import { getTranslation } from "@payloadcms/translations";
+import { Drawer, useModal, useTranslation } from "@payloadcms/ui";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+function normalizeLabel(label, i18n, fallback) {
+  if (typeof label === "string" && label.trim().length > 0) {
+    return label;
+  }
+  if (label && typeof label === "object") {
+    const translated = getTranslation(label, i18n);
+    if (typeof translated === "string" && translated.trim().length > 0) {
+      return translated;
+    }
+  }
+  return fallback;
+}
+function getGroupLabel(block, i18n) {
+  const group = block.admin?.group;
+  return normalizeLabel(group, i18n, "Other");
+}
+function getBlockDescription(block) {
+  const custom = block.admin?.custom;
+  if (!custom || typeof custom !== "object") {
+    return void 0;
+  }
+  const description = custom.description;
+  return typeof description === "string" && description.trim().length > 0 ? description : void 0;
+}
+function OrionBlocksDrawer(props) {
+  const { addRow, addRowIndex, blocks, drawerSlug, labels } = props;
+  const { closeModal } = useModal();
+  const { i18n, t } = useTranslation();
+  const groupedBlocks = useMemo(() => {
+    const groupMap = /* @__PURE__ */ new Map();
+    const allOptions = blocks.map((block) => ({
+      slug: block.slug,
+      label: normalizeLabel(block.labels?.singular, i18n, block.slug),
+      description: getBlockDescription(block),
+      imageURL: block.imageURL
+    }));
+    for (const block of blocks) {
+      const groupLabel = getGroupLabel(block, i18n);
+      const option = {
+        slug: block.slug,
+        label: normalizeLabel(block.labels?.singular, i18n, block.slug),
+        description: getBlockDescription(block),
+        imageURL: block.imageURL
+      };
+      const existing = groupMap.get(groupLabel);
+      if (existing) {
+        existing.push(option);
+      } else {
+        groupMap.set(groupLabel, [option]);
+      }
+    }
+    const groups = [{ label: "All", options: allOptions }];
+    const sortedGroupEntries = Array.from(groupMap.entries()).sort(([a], [b]) => a.localeCompare(b));
+    for (const [label, options] of sortedGroupEntries) {
+      groups.push({ label, options });
+    }
+    return groups;
+  }, [blocks, i18n]);
+  return /* @__PURE__ */ jsx(
+    Drawer,
+    {
+      slug: drawerSlug,
+      title: t("fields:addLabel", {
+        label: normalizeLabel(labels.singular, i18n, "Block")
+      }),
+      children: /* @__PURE__ */ jsx(
+        SectionTabs,
+        {
+          tabs: groupedBlocks.map((group) => ({
+            label: group.label,
+            content: /* @__PURE__ */ jsx(
+              BlockPicker,
+              {
+                blocks: group.options,
+                onSelect: (slug) => {
+                  addRow(addRowIndex, slug);
+                  closeModal(drawerSlug);
+                }
+              }
+            )
+          }))
+        }
+      )
+    }
+  );
+}
+
+// src/components/OrionBlocksFieldImpl.tsx
+import { Fragment as Fragment2, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var baseClass = "blocks-field";
+var localStorageClipboardKey = "_payloadClipboard";
+function reduceFormStateByPath({ formState, path, rowIndex }) {
+  const filteredState = {};
+  const prefix = typeof rowIndex !== "number" ? path : `${path}.${rowIndex}`;
+  for (const key in formState) {
+    if (!key.startsWith(prefix)) {
+      continue;
+    }
+    const { customComponents: _customComponents, validate: _validate, ...field } = formState[key];
+    if (Array.isArray(field.rows)) {
+      field.rows = field.rows.map((row) => {
+        if (!row || typeof row !== "object") {
+          return row;
+        }
+        const { customComponents: _rowCustomComponents, ...serializableRow } = row;
+        return serializableRow;
+      });
+    }
+    filteredState[key] = field;
+  }
+  return filteredState;
+}
+function mergeFormStateFromClipboard({ dataFromClipboard, formState, path, rowIndex }) {
+  const typeFromClipboard = dataFromClipboard.type;
+  const clipboardFields = dataFromClipboard.data;
+  const pathFromClipboard = dataFromClipboard.path;
+  const rowIndexFromClipboard = dataFromClipboard.rowIndex;
+  if (!clipboardFields || !pathFromClipboard || !typeFromClipboard) {
+    return formState;
+  }
+  const copyFromField = typeof rowIndexFromClipboard !== "number";
+  const pasteIntoField = typeof rowIndex !== "number";
+  const fromRowToField = !copyFromField && pasteIntoField;
+  const isArray = typeFromClipboard === "array";
+  let pathToReplace;
+  if (copyFromField && pasteIntoField) {
+    pathToReplace = pathFromClipboard;
+  } else if (copyFromField) {
+    pathToReplace = `${pathFromClipboard}.${rowIndex}`;
+  } else {
+    pathToReplace = `${pathFromClipboard}.${rowIndexFromClipboard}`;
+  }
+  let targetSegment;
+  if (!pasteIntoField) {
+    targetSegment = `${path}.${rowIndex}`;
+  } else if (fromRowToField) {
+    targetSegment = `${path}.0`;
+  } else {
+    targetSegment = path;
+  }
+  if (fromRowToField) {
+    const lastRenderedPath = `${path}.0`;
+    const rowIDPath = `${pathToReplace}.id`;
+    const rowIDField = clipboardFields[rowIDPath];
+    const rowIDFromClipboard = rowIDField?.value;
+    const pathField = formState[path];
+    const existingRows = Array.isArray(pathField?.rows) ? pathField.rows : [];
+    formState[path] = {
+      ...pathField,
+      rows: [
+        {
+          ...existingRows.length > 0 && isArray ? existingRows[0] : {},
+          id: rowIDFromClipboard,
+          isLoading: false,
+          lastRenderedPath
+        }
+      ],
+      value: 1,
+      initialValue: 1,
+      disableFormData: true
+    };
+    for (const fieldPath in formState) {
+      if (fieldPath !== path && !fieldPath.startsWith(lastRenderedPath) && fieldPath.startsWith(path)) {
+        delete formState[fieldPath];
+      }
+    }
+  }
+  for (const clipboardPath in clipboardFields) {
+    if (!pasteIntoField && clipboardPath.endsWith(".id") || !clipboardPath.startsWith(pathToReplace)) {
+      continue;
+    }
+    const newPath = clipboardPath.replace(pathToReplace, targetSegment);
+    const existing = formState[newPath];
+    formState[newPath] = {
+      customComponents: isArray ? existing?.customComponents : void 0,
+      validate: isArray ? existing?.validate : void 0,
+      ...clipboardFields[clipboardPath]
+    };
+  }
+  return formState;
+}
+function clipboardCopy({ getDataToCopy, payload, t }) {
+  try {
+    const dataToWrite = {
+      data: getDataToCopy(),
+      ...payload
+    };
+    localStorage.setItem(localStorageClipboardKey, JSON.stringify(dataToWrite));
+    return true;
+  } catch {
+    return t("error:unableToCopy");
+  }
+}
+function clipboardPaste({ onPaste, schemaBlocks, t }) {
+  let dataToPaste;
+  try {
+    const jsonFromClipboard = localStorage.getItem(localStorageClipboardKey);
+    if (!jsonFromClipboard) {
+      return t("error:invalidClipboardData");
+    }
+    dataToPaste = JSON.parse(jsonFromClipboard);
+  } catch {
+    return t("error:invalidClipboardData");
+  }
+  if (!dataToPaste || dataToPaste.type !== "blocks" || !dataToPaste.path || !dataToPaste.data) {
+    return t("error:invalidClipboardData");
+  }
+  const allowedSlugs = new Set(schemaBlocks.map((block) => block.slug));
+  const clipboardBlocks = Array.isArray(dataToPaste.blocks) ? dataToPaste.blocks : [];
+  for (const block of clipboardBlocks) {
+    if (!allowedSlugs.has(block.slug)) {
+      return t("error:invalidClipboardData");
+    }
+  }
+  onPaste(dataToPaste);
+  return true;
+}
+function toggleAllRows(rows, collapsed) {
+  const updatedRows = rows.map((row) => ({ ...row, collapsed }));
+  const collapsedIDs = collapsed ? updatedRows.map((row) => row.id) : [];
+  return { collapsedIDs, updatedRows };
+}
+function extractRowsAndCollapsedIDs(rows, rowID, collapsed) {
+  const updatedRows = rows.map((row) => row.id === rowID ? { ...row, collapsed } : row);
+  const collapsedIDs = updatedRows.filter((row) => row.collapsed).map((row) => row.id);
+  return { collapsedIDs, updatedRows };
+}
+function OrionRowActions(props) {
+  const {
+    addRow,
+    blocks,
+    copyRow,
+    duplicateRow,
+    hasMaxRows,
+    isSortable,
+    labels,
+    moveRow,
+    pasteRow,
+    removeRow,
+    rowCount,
+    rowIndex,
+    drawerSlug
+  } = props;
+  const { closeModal, openModal } = useModal2();
+  const [indexToAdd, setIndexToAdd] = useState(null);
+  const addViaDrawer = useCallback(
+    (rowToAdd, rowBlockType) => {
+      addRow(rowToAdd, rowBlockType);
+      closeModal(drawerSlug);
+    },
+    [addRow, closeModal, drawerSlug]
+  );
+  return /* @__PURE__ */ jsxs(Fragment2, { children: [
+    /* @__PURE__ */ jsx2(
+      OrionBlocksDrawer,
+      {
+        addRow: (_, rowBlockType) => {
+          addViaDrawer(indexToAdd ?? rowIndex, rowBlockType);
+        },
+        addRowIndex: indexToAdd ?? rowIndex,
+        blocks,
+        drawerSlug,
+        labels
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      ArrayAction,
+      {
+        addRow: (index) => {
+          setIndexToAdd(index);
+          openModal(drawerSlug);
+        },
+        copyRow,
+        duplicateRow,
+        hasMaxRows,
+        index: rowIndex,
+        isSortable,
+        moveRow,
+        pasteRow,
+        removeRow,
+        rowCount
+      }
+    )
+  ] });
+}
+function OrionBlockRow(props) {
+  const {
+    addRow,
+    attributes,
+    block,
+    blocks,
+    copyRow,
+    duplicateRow,
+    drawerSlug,
+    errorCount,
+    fields,
+    hasMaxRows,
+    isLoading: isLoadingFromProps,
+    isSortable,
+    Label,
+    labels,
+    listeners,
+    moveRow,
+    parentPath,
+    pasteRow,
+    path,
+    permissions,
+    readOnly,
+    removeRow,
+    row,
+    rowCount,
+    rowIndex,
+    schemaPath,
+    setCollapse,
+    setNodeRef,
+    transform
+  } = props;
+  const { i18n } = useTranslation2();
+  const hasSubmitted = useFormSubmitted();
+  const isLoading = useThrottledValue(Boolean(isLoadingFromProps), 500);
+  const fieldHasErrors = hasSubmitted && errorCount > 0;
+  let blockPermissions;
+  if (permissions === true) {
+    blockPermissions = true;
+  } else {
+    const permissionsBlockSpecific = permissions?.blocks?.[block.slug] ?? permissions?.blocks;
+    if (permissionsBlockSpecific === true) {
+      blockPermissions = true;
+    } else if (permissionsBlockSpecific && typeof permissionsBlockSpecific === "object" && "fields" in permissionsBlockSpecific) {
+      blockPermissions = permissionsBlockSpecific.fields;
+    } else if (permissions && typeof permissions === "object") {
+      const hasReadPermission = permissions.read === true;
+      const missingCreateOrUpdate = !permissions.create || !permissions.update;
+      const hasRestrictiveStructure = hasReadPermission && (missingCreateOrUpdate || Object.keys(permissions).length === 1 && permissions.read === true);
+      if (hasRestrictiveStructure) {
+        blockPermissions = { read: true };
+      }
+    }
+  }
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      id: `${parentPath.split(".").join("-")}-row-${rowIndex}`,
+      ref: setNodeRef,
+      style: { transform },
+      children: /* @__PURE__ */ jsx2(
+        Collapsible,
+        {
+          actions: !readOnly ? /* @__PURE__ */ jsx2(
+            OrionRowActions,
+            {
+              addRow,
+              blocks,
+              copyRow,
+              drawerSlug,
+              duplicateRow,
+              hasMaxRows,
+              isSortable,
+              labels,
+              moveRow,
+              pasteRow,
+              removeRow,
+              rowCount,
+              rowIndex
+            }
+          ) : void 0,
+          className: [
+            `${baseClass}__row`,
+            fieldHasErrors ? `${baseClass}__row--has-errors` : `${baseClass}__row--no-errors`
+          ].filter(Boolean).join(" "),
+          collapsibleStyle: fieldHasErrors ? "error" : "default",
+          dragHandleProps: isSortable ? {
+            id: row.id,
+            attributes,
+            listeners
+          } : void 0,
+          header: isLoading ? /* @__PURE__ */ jsx2(ShimmerEffect, { height: "1rem", width: "8rem" }) : /* @__PURE__ */ jsxs("div", { className: `${baseClass}__block-header`, children: [
+            /* @__PURE__ */ jsx2(
+              RowLabel,
+              {
+                CustomComponent: Label,
+                label: /* @__PURE__ */ jsxs(Fragment2, { children: [
+                  /* @__PURE__ */ jsx2("span", { className: `${baseClass}__block-number`, children: String(rowIndex + 1).padStart(2, "0") }),
+                  /* @__PURE__ */ jsx2(
+                    Pill,
+                    {
+                      className: `${baseClass}__block-pill ${baseClass}__block-pill-${row.blockType}`,
+                      pillStyle: "white",
+                      size: "small",
+                      children: getTranslation2(block.labels?.singular, i18n)
+                    }
+                  )
+                ] }),
+                path,
+                rowNumber: rowIndex
+              }
+            ),
+            fieldHasErrors && /* @__PURE__ */ jsx2(ErrorPill, { count: errorCount, i18n, withMessage: true })
+          ] }),
+          isCollapsed: Boolean(row.collapsed),
+          onToggle: (collapsed) => {
+            setCollapse(row.id, collapsed);
+          },
+          children: isLoading ? /* @__PURE__ */ jsx2(ShimmerEffect, {}) : /* @__PURE__ */ jsx2(
+            RenderFields,
+            {
+              className: `${baseClass}__fields`,
+              fields,
+              margins: "small",
+              parentIndexPath: "",
+              parentPath: path,
+              parentSchemaPath: schemaPath,
+              permissions: blockPermissions,
+              readOnly
+            }
+          )
+        }
+      )
+    }
+  );
+}
+var OrionBlocksFieldComponent = (props) => {
+  const { i18n, t } = useTranslation2();
+  const fieldFromProps = props.field;
+  const {
+    name,
+    type,
+    admin: { className, description, isSortable = true, style } = {},
+    blockReferences,
+    blocks,
+    label,
+    labels: labelsFromProps,
+    localized,
+    maxRows,
+    minRows: minRowsProp,
+    required
+  } = fieldFromProps;
+  const pathFromProps = props.path;
+  const permissions = props.permissions;
+  const readOnly = Boolean(props.readOnly);
+  const schemaPathFromProps = props.schemaPath;
+  const validate = props.validate;
+  const schemaPath = schemaPathFromProps ?? name;
+  const minRows = minRowsProp ?? (required ? 1 : 0);
+  const { setDocFieldPreferences } = useDocumentInfo();
+  const { addFieldRow, dispatchFields, getFields, moveFieldRow, removeFieldRow, replaceState, setModified } = useForm();
+  const { code: locale } = useLocale();
+  const {
+    config: { localization },
+    config
+  } = useConfig();
+  const drawerSlug = useDrawerSlug("orion-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;
+      return locale === defaultLocale;
+    }
+    return true;
+  })();
+  const memoizedValidate = useCallback(
+    (value2, options) => {
+      if (!editingDefaultLocale && value2 === null) {
+        return true;
+      }
+      if (typeof validate === "function") {
+        return validate(value2, {
+          ...options,
+          maxRows,
+          minRows,
+          required
+        });
+      }
+      return true;
+    },
+    [editingDefaultLocale, maxRows, minRows, required, validate]
+  );
+  const {
+    blocksFilterOptions,
+    customComponents: {
+      AfterInput,
+      BeforeInput,
+      Description,
+      Error,
+      Label
+    } = {},
+    disabled,
+    errorPaths,
+    path,
+    rows = [],
+    showError,
+    valid,
+    value
+  } = useField({
+    hasRows: true,
+    potentiallyStalePath: pathFromProps,
+    validate: memoizedValidate
+  });
+  const safePath = path ?? pathFromProps ?? name;
+  const { clientBlocks, clientBlocksAfterFilter } = useMemo2(() => {
+    const resolvedBlocks = [];
+    if (!blockReferences) {
+      resolvedBlocks.push(...blocks);
+    } else {
+      for (const blockReference of blockReferences) {
+        const block = typeof blockReference === "string" ? config.blocksMap[blockReference] : blockReference;
+        if (block) {
+          resolvedBlocks.push(block);
+        }
+      }
+    }
+    if (Array.isArray(blocksFilterOptions)) {
+      const filteredBlocks = resolvedBlocks.filter((block) => blocksFilterOptions.includes(block.slug));
+      return {
+        clientBlocks: resolvedBlocks,
+        clientBlocksAfterFilter: filteredBlocks
+      };
+    }
+    return {
+      clientBlocks: resolvedBlocks,
+      clientBlocksAfterFilter: resolvedBlocks
+    };
+  }, [blockReferences, blocks, blocksFilterOptions, config.blocksMap]);
+  const addRow = useCallback(
+    (rowIndex, blockType) => {
+      addFieldRow({
+        blockType,
+        path: safePath,
+        rowIndex,
+        schemaPath
+      });
+      setTimeout(() => {
+        scrollToID(`${safePath}-row-${rowIndex + 1}`);
+      }, 0);
+    },
+    [addFieldRow, safePath, schemaPath]
+  );
+  const duplicateRow = useCallback(
+    (rowIndex) => {
+      dispatchFields({
+        type: "DUPLICATE_ROW",
+        path: safePath,
+        rowIndex
+      });
+      setModified(true);
+      setTimeout(() => {
+        scrollToID(`${safePath}-row-${rowIndex + 1}`);
+      }, 0);
+    },
+    [dispatchFields, safePath, setModified]
+  );
+  const removeRow = useCallback(
+    (rowIndex) => {
+      removeFieldRow({
+        path: safePath,
+        rowIndex
+      });
+    },
+    [removeFieldRow, safePath]
+  );
+  const moveRow = useCallback(
+    (moveFromIndex, moveToIndex) => {
+      moveFieldRow({
+        moveFromIndex,
+        moveToIndex,
+        path: safePath
+      });
+    },
+    [moveFieldRow, safePath]
+  );
+  const toggleCollapseAll = useCallback(
+    (collapsed) => {
+      const { collapsedIDs, updatedRows } = toggleAllRows(rows, collapsed);
+      dispatchFields({
+        type: "SET_ALL_ROWS_COLLAPSED",
+        path: safePath,
+        updatedRows
+      });
+      setDocFieldPreferences(safePath, {
+        collapsed: collapsedIDs
+      });
+    },
+    [dispatchFields, rows, safePath, setDocFieldPreferences]
+  );
+  const setCollapse = useCallback(
+    (rowID, collapsed) => {
+      const { collapsedIDs, updatedRows } = extractRowsAndCollapsedIDs(rows, rowID, collapsed);
+      dispatchFields({
+        type: "SET_ROW_COLLAPSED",
+        path: safePath,
+        updatedRows
+      });
+      setDocFieldPreferences(safePath, {
+        collapsed: collapsedIDs
+      });
+    },
+    [dispatchFields, rows, safePath, setDocFieldPreferences]
+  );
+  const copyRow = useCallback(
+    (rowIndex) => {
+      const result = clipboardCopy({
+        getDataToCopy: () => reduceFormStateByPath({
+          formState: getFields(),
+          path: safePath,
+          rowIndex
+        }),
+        payload: {
+          type,
+          blocks: clientBlocks,
+          path: safePath,
+          rowIndex
+        },
+        t
+      });
+      if (typeof result === "string") {
+        toast.error(result);
+      } else {
+        toast.success(t("general:copied"));
+      }
+    },
+    [clientBlocks, getFields, safePath, t, type]
+  );
+  const pasteRow = useCallback(
+    (rowIndex) => {
+      const result = clipboardPaste({
+        onPaste: (dataFromClipboard) => {
+          const formState = getFields();
+          const newState = mergeFormStateFromClipboard({
+            dataFromClipboard,
+            formState,
+            path: safePath,
+            rowIndex
+          });
+          replaceState(newState);
+          setModified(true);
+        },
+        schemaBlocks: clientBlocks,
+        t
+      });
+      if (typeof result === "string") {
+        toast.error(result);
+      }
+    },
+    [clientBlocks, getFields, replaceState, safePath, setModified, t]
+  );
+  const pasteBlocks = useCallback(
+    (dataFromClipboard) => {
+      const formState = getFields();
+      const newState = mergeFormStateFromClipboard({
+        dataFromClipboard,
+        formState,
+        path: safePath
+      });
+      replaceState(newState);
+      setModified(true);
+    },
+    [getFields, replaceState, safePath, setModified]
+  );
+  const hasMaxRows = Boolean(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__ */ jsxs(
+    "div",
+    {
+      className: [
+        fieldBaseClass,
+        baseClass,
+        className,
+        fieldHasErrors ? `${baseClass}--has-error` : `${baseClass}--has-no-error`
+      ].filter(Boolean).join(" "),
+      id: `field-${safePath.replace(/\./g, "__")}`,
+      style,
+      children: [
+        showError && /* @__PURE__ */ jsx2(
+          RenderCustomComponent,
+          {
+            CustomComponent: Error,
+            Fallback: /* @__PURE__ */ jsx2(FieldError, { path: safePath, showError })
+          }
+        ),
+        /* @__PURE__ */ jsxs("header", { className: `${baseClass}__header`, children: [
+          /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header-wrap`, children: [
+            /* @__PURE__ */ jsxs("div", { className: `${baseClass}__heading-with-error`, children: [
+              /* @__PURE__ */ jsx2("h3", { children: /* @__PURE__ */ jsx2(
+                RenderCustomComponent,
+                {
+                  CustomComponent: Label,
+                  Fallback: /* @__PURE__ */ jsx2(
+                    FieldLabel,
+                    {
+                      as: "span",
+                      label,
+                      localized,
+                      path: safePath,
+                      required
+                    }
+                  )
+                }
+              ) }),
+              fieldHasErrors && fieldErrorCount > 0 && /* @__PURE__ */ jsx2(ErrorPill, { count: fieldErrorCount, i18n, withMessage: true })
+            ] }),
+            /* @__PURE__ */ jsxs("ul", { className: `${baseClass}__header-actions`, children: [
+              rows.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx2("li", { children: /* @__PURE__ */ jsx2(
+                  "button",
+                  {
+                    className: `${baseClass}__header-action`,
+                    onClick: () => toggleCollapseAll(true),
+                    type: "button",
+                    children: t("fields:collapseAll")
+                  }
+                ) }),
+                /* @__PURE__ */ jsx2("li", { children: /* @__PURE__ */ jsx2(
+                  "button",
+                  {
+                    className: `${baseClass}__header-action`,
+                    onClick: () => toggleCollapseAll(false),
+                    type: "button",
+                    children: t("fields:showAll")
+                  }
+                ) })
+              ] }),
+              /* @__PURE__ */ jsx2("li", { children: /* @__PURE__ */ jsx2(
+                ClipboardAction,
+                {
+                  allowCopy: rows.length > 0,
+                  allowPaste: !readOnly,
+                  blocks: clientBlocks,
+                  className: `${baseClass}__header-action`,
+                  disabled,
+                  getDataToCopy: () => reduceFormStateByPath({
+                    formState: getFields(),
+                    path: safePath
+                  }),
+                  onPaste: pasteBlocks,
+                  path: safePath,
+                  type
+                }
+              ) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx2(
+            RenderCustomComponent,
+            {
+              CustomComponent: Description,
+              Fallback: /* @__PURE__ */ jsx2(FieldDescription, { description, path: safePath })
+            }
+          )
+        ] }),
+        BeforeInput,
+        /* @__PURE__ */ jsx2(NullifyLocaleField, { fieldValue: value, localized, path: safePath, readOnly }),
+        (rows.length > 0 || !valid && (showRequired || showMinRows)) && /* @__PURE__ */ jsxs(
+          DraggableSortable,
+          {
+            className: `${baseClass}__rows`,
+            ids: rows.map((row) => row.id),
+            onDragEnd: ({ moveFromIndex, moveToIndex }) => moveRow(moveFromIndex, moveToIndex),
+            children: [
+              rows.map((row, index) => {
+                const blockType = row.blockType;
+                const blockConfig = config.blocksMap[blockType] ?? clientBlocks.find((block) => block.slug === blockType);
+                if (!blockConfig) {
+                  return null;
+                }
+                const rowPath = `${safePath}.${index}`;
+                const rowErrorCount = errorPaths.filter((errorPath) => errorPath.startsWith(`${rowPath}.`)).length;
+                return /* @__PURE__ */ jsx2(DraggableSortableItem, { disabled: readOnly || disabled || !isSortable, id: row.id, children: (draggableSortableItemProps) => /* @__PURE__ */ jsx2(
+                  OrionBlockRow,
+                  {
+                    ...draggableSortableItemProps,
+                    addRow,
+                    block: blockConfig,
+                    blocks: clientBlocks,
+                    copyRow,
+                    drawerSlug,
+                    duplicateRow,
+                    errorCount: rowErrorCount,
+                    fields: blockConfig.fields,
+                    hasMaxRows,
+                    isLoading: Boolean(row.isLoading),
+                    isSortable,
+                    Label: rows[index]?.customComponents?.RowLabel,
+                    labels,
+                    moveRow,
+                    parentPath: safePath,
+                    pasteRow,
+                    path: rowPath,
+                    permissions,
+                    readOnly: readOnly || Boolean(disabled),
+                    removeRow,
+                    row,
+                    rowCount: rows.length,
+                    rowIndex: index,
+                    schemaPath: schemaPath + blockConfig.slug,
+                    setCollapse
+                  }
+                ) }, row.id);
+              }),
+              !editingDefaultLocale && /* @__PURE__ */ jsxs(Fragment2, { children: [
+                showMinRows && /* @__PURE__ */ jsx2(Banner, { type: "error", children: t("validation:requiresAtLeast", {
+                  count: minRows,
+                  label: getTranslation2(minRows > 1 ? labels.plural : labels.singular, i18n) || t(minRows > 1 ? "general:row" : "general:rows")
+                }) }),
+                showRequired && /* @__PURE__ */ jsx2(Banner, { children: t("validation:fieldHasNo", {
+                  label: getTranslation2(labels.plural, i18n)
+                }) })
+              ] })
+            ]
+          }
+        ),
+        !hasMaxRows && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx2(DrawerToggler, { className: `${baseClass}__drawer-toggler`, disabled: readOnly || disabled, slug: drawerSlug, children: /* @__PURE__ */ jsx2(
+            Button,
+            {
+              buttonStyle: "icon-label",
+              disabled: readOnly || disabled,
+              el: "span",
+              icon: "plus",
+              iconPosition: "left",
+              iconStyle: "with-border",
+              children: t("fields:addLabel", {
+                label: getTranslation2(labels.singular, i18n)
+              })
+            }
+          ) }),
+          /* @__PURE__ */ jsx2(
+            OrionBlocksDrawer,
+            {
+              addRow,
+              addRowIndex: rows.length || 0,
+              blocks: clientBlocksAfterFilter,
+              drawerSlug,
+              labels
+            }
+          )
+        ] }),
+        AfterInput
+      ]
+    }
+  );
+};
+var OrionBlocksFieldImpl = withCondition(OrionBlocksFieldComponent);
+export {
+  OrionBlocksFieldImpl
+};