@webiny/app-headless-cms 0.0.0-mt-2 → 0.0.0-unstable.06b2ede40f

package/admin/components/FieldEditor/FieldEditor.js

@@ -1,166 +1,179 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
-var _templateObject;
-
 import React, { Fragment } from "react";
 import get from "lodash/get";
-import { Icon } from "@webiny/ui/Icon";
 import { i18n } from "@webiny/app/i18n";
-import { ReactComponent as HandleIcon } from "@svgr/webpack!../../icons/round-drag_indicator-24px.svg";
+import { ReactComponent as DragIcon } from "@webiny/icons/drag_indicator.svg";
 import { Center, Vertical, Horizontal } from "../DropZone";
 import Draggable from "../Draggable";
 import EditFieldDialog from "./EditFieldDialog";
 import Field from "./Field";
-import { rowHandle, fieldHandle, fieldContainer, Row, RowContainer } from "./Styled";
-import { useFieldEditor } from "./useFieldEditor";
+import { useModelFieldEditor } from "./useModelFieldEditor";
 import { FieldEditorProvider } from "./FieldEditorContext";
-var t = i18n.namespace("app-headless-cms/admin/components/editor");
-var fieldTypes = ["field", "newField"];
-
-var Editor = function Editor() {
-  var _useFieldEditor = useFieldEditor(),
-      parent = _useFieldEditor.parent,
-      depth = _useFieldEditor.depth,
-      insertField = _useFieldEditor.insertField,
-      updateField = _useFieldEditor.updateField,
-      deleteField = _useFieldEditor.deleteField,
-      fields = _useFieldEditor.fields,
-      noConflict = _useFieldEditor.noConflict,
-      editField = _useFieldEditor.editField,
-      onFieldDrop = _useFieldEditor.onFieldDrop,
-      onEndDrag = _useFieldEditor.onEndDrag,
-      field = _useFieldEditor.field,
-      dropTarget = _useFieldEditor.dropTarget;
-
+import { ModelFieldProvider } from "../ModelFieldProvider";
+import { cn, Icon } from "@webiny/admin-ui";
+const t = i18n.namespace("app-headless-cms/admin/components/editor");
+const fieldTypes = ["field", "newField"];
+const Editor = () => {
+  const {
+    parent,
+    depth,
+    insertField,
+    updateField,
+    deleteField,
+    fields,
+    noConflict,
+    editField,
+    onFieldDrop,
+    onEndDrag,
+    field,
+    dropTarget,
+    getFieldPlugin
+  } = useModelFieldEditor();
+  const canDropIntoField = (field, draggable) => {
+    const fieldPlugin = getFieldPlugin(field.type);
+    const canAccept = fieldPlugin.field.canAccept;
+    if (typeof canAccept === "function" && !canAccept(field, draggable)) {
+      return false;
+    }
+    return true;
+  };
+  const isVerticalDropzoneVisible = cb => {
+    return item => {
+      if (!parent) {
+        return cb(item);
+      }
+      const fieldPlugin = getFieldPlugin(parent.type);
+      const allowLayout = fieldPlugin.field.allowLayout ?? true;
+      if (!allowLayout) {
+        return false;
+      }
+      if (!canDropIntoField(parent, item)) {
+        return false;
+      }
+      return cb(item);
+    };
+  };
+  const isHorizontalDropzoneVisible = cb => {
+    return item => {
+      if (!parent) {
+        return cb(item);
+      }
+      if (!canDropIntoField(parent, item)) {
+        return false;
+      }
+      return cb(item);
+    };
+  };
   return /*#__PURE__*/React.createElement(Fragment, null, fields.length === 0 && /*#__PURE__*/React.createElement(Center, {
-    onDrop: function onDrop(item) {
-      return onFieldDrop(item, {
-        row: 0,
-        index: 0
-      });
+    isDroppable: isHorizontalDropzoneVisible(() => true),
+    onDrop: item => onFieldDrop(item, {
+      row: 0,
+      index: 0
+    })
+  }, t`Drop your first field here`), fields.map((row, index) => /*#__PURE__*/React.createElement(Draggable, {
+    beginDrag: {
+      parent: parent ? parent.fieldId : null,
+      type: "row",
+      fields: row,
+      pos: {
+        row: index
+      }
     },
-    style: {
-      padding: "5px 0 15px 0"
-    }
-  }, t(_templateObject || (_templateObject = _taggedTemplateLiteral(["Drop your first field here"])))), fields.map(function (row, index) {
-    return /*#__PURE__*/React.createElement(Draggable, {
-      beginDrag: {
-        parent: parent ? parent.fieldId : null,
-        type: "row",
-        fields: row,
-        pos: {
-          row: index
-        }
-      },
-      endDrag: onEndDrag,
-      key: row.map(function (f) {
-        return f.fieldId;
-      }).join(".")
-    }, function (_ref
-    /* RowContainer start - includes drag handle, drop zones and the Row itself. */
-    ) {
-      var drag = _ref.drag,
-          isDragging = _ref.isDragging;
-      return /*#__PURE__*/React.createElement(RowContainer, {
-        style: {
-          opacity: isDragging ? 0.3 : 1
-        }
-      }, /*#__PURE__*/React.createElement("div", {
-        className: rowHandle,
-        ref: drag
-      }, /*#__PURE__*/React.createElement(Icon, {
-        icon: /*#__PURE__*/React.createElement(HandleIcon, null)
-      })), /*#__PURE__*/React.createElement(Horizontal, {
-        "data-testid": "cms-editor-row-droppable-top-".concat(index),
-        isVisible: noConflict(),
-        onDrop: function onDrop(item) {
-          return onFieldDrop(item, {
-            row: index,
-            index: null
-          });
-        }
-      }), /*#__PURE__*/React.createElement(Row, {
-        "data-testid": "cms.editor.field-row"
-      }, row.map(function (field, fieldIndex) {
-        return /*#__PURE__*/React.createElement(Draggable, {
-          key: field.fieldId,
-          beginDrag: {
-            parent: parent ? parent.fieldId : null,
-            type: "field",
-            field: field,
-            pos: {
-              row: index,
-              index: fieldIndex
-            }
-          },
-          endDrag: onEndDrag
-        }, function (_ref2) {
-          var drag = _ref2.drag;
-          return /*#__PURE__*/React.createElement("div", {
-            className: fieldContainer,
-            ref: drag
-          }, /*#__PURE__*/React.createElement(Vertical, {
-            depth: depth,
-            onDrop: function onDrop(item) {
-              return onFieldDrop(item, {
-                row: index,
-                index: fieldIndex
-              });
-            },
-            isVisible: noConflict(function (item) {
-              return fieldTypes.includes(item.type) && (row.length < 4 || get(item, "pos.row") === index);
-            })
-          }), /*#__PURE__*/React.createElement("div", {
-            className: fieldHandle
-          }, /*#__PURE__*/React.createElement(Field, {
-            parent: parent,
-            field: field,
-            onEdit: editField,
-            onDelete: deleteField
-          })), fieldIndex === row.length - 1 && /*#__PURE__*/React.createElement(Vertical, {
-            last: true,
-            depth: depth,
-            isVisible: noConflict(function (item) {
-              return fieldTypes.includes(item.type) && (row.length < 4 || get(item, "pos.row") === index);
-            }),
-            onDrop: function onDrop(item) {
-              return onFieldDrop(item, {
-                row: index,
-                index: fieldIndex + 1
-              });
-            }
-          }));
-        });
-      })), index === fields.length - 1 && /*#__PURE__*/React.createElement(Horizontal, {
-        "data-testid": "cms-editor-row-droppable-bottom-".concat(index),
-        last: true,
-        isVisible: noConflict(),
-        onDrop: function onDrop(item) {
-          return onFieldDrop(item, {
-            row: index + 1,
-            index: null
-          });
-        }
-      }));
-    });
-  }), /*#__PURE__*/React.createElement(EditFieldDialog, {
+    endDrag: onEndDrag,
+    key: row.map(f => f.fieldId).join(".")
+  }, ({
+    drag,
+    isDragging
+  } /* RowContainer start - includes drag handle, drop zones and the Row itself. */) => /*#__PURE__*/React.createElement("div", {
+    className: cn(["wby-flex wby-flex-column", "wby-relative", "wby-mb-md last-of-type:wby-mb-none", "wby-bg-neutral-dimmed", isDragging ? "wby-opacity-30" : "wby-opacity-100"])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn(["wby-cursor-grab", "wby-absolute wby-left-sm-plus wby-top-sm-plus wby-z-10"]),
+    ref: drag
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: /*#__PURE__*/React.createElement(DragIcon, null),
+    label: "Drag to move this row",
+    color: "neutral-light",
+    size: "sm"
+  })), /*#__PURE__*/React.createElement(Horizontal, {
+    isVisible: isHorizontalDropzoneVisible(noConflict()),
+    "data-testid": `cms-editor-row-droppable-top-${index}`,
+    onDrop: item => onFieldDrop(item, {
+      row: index,
+      index: null
+    })
+  }), /*#__PURE__*/React.createElement("div", {
+    className: cn(["wby-w-full wby-flex wby-justify-between", "wby-pl-xl wby-pr-sm wby-py-sm"]),
+    "data-testid": "cms.editor.field-row"
+  }, row.map((field, fieldIndex) => /*#__PURE__*/React.createElement(ModelFieldProvider, {
+    field: field,
+    key: field.fieldId
+  }, /*#__PURE__*/React.createElement(Draggable, {
+    beginDrag: {
+      parent: parent ? parent.fieldId : null,
+      type: "field",
+      field,
+      pos: {
+        row: index,
+        index: fieldIndex
+      }
+    },
+    endDrag: onEndDrag
+  }, ({
+    drag
+  }) => /*#__PURE__*/React.createElement("div", {
+    className: cn(["wby-relative", "wby-flex-1 wby-basis-full", "wby-mx-sm"]),
+    ref: drag
+  }, /*#__PURE__*/React.createElement(Vertical, {
+    depth: depth,
+    onDrop: item => onFieldDrop(item, {
+      row: index,
+      index: fieldIndex
+    }),
+    isVisible: isVerticalDropzoneVisible(noConflict(item => fieldTypes.includes(item.type) && (row.length < 4 || get(item, "pos.row") === index)))
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "wby-cursor-grab wby-bg-neutral-base wby-p-md wby-shadow-sm wby-rounded-xs"
+  }, /*#__PURE__*/React.createElement(Field, {
+    parent: parent,
     field: field,
-    onClose: editField,
-    onSubmit: function onSubmit(field) {
+    onEdit: editField,
+    onDelete: deleteField
+  })), fieldIndex === row.length - 1 && /*#__PURE__*/React.createElement(Vertical, {
+    last: true,
+    depth: depth,
+    isVisible: isVerticalDropzoneVisible(noConflict(item => {
+      return fieldTypes.includes(item.type) && (row.length < 4 || get(item, "pos.row") === index);
+    })),
+    onDrop: item => onFieldDrop(item, {
+      row: index,
+      index: fieldIndex + 1
+    })
+  })))))), index === fields.length - 1 ? /*#__PURE__*/React.createElement(Horizontal, {
+    "data-testid": `cms-editor-row-droppable-bottom-${index}`,
+    last: true,
+    isVisible: isHorizontalDropzoneVisible(noConflict()),
+    onDrop: item => onFieldDrop(item, {
+      row: index + 1,
+      index: null
+    })
+  }) : null))), field ? /*#__PURE__*/React.createElement(ModelFieldProvider, {
+    field: field
+  }, /*#__PURE__*/React.createElement(EditFieldDialog, {
+    onClose: () => editField(null),
+    onSubmit: field => {
       if (field.id) {
         updateField(field);
-      } else {
-        insertField({
-          field: field,
-          position: dropTarget
-        });
+        editField(null);
+        return;
       }
-
+      insertField({
+        field,
+        position: dropTarget
+      });
       editField(null);
     }
-  }));
+  })) : null);
 };
-
-export var FieldEditor = function FieldEditor(props) {
+export const FieldEditor = props => {
   return /*#__PURE__*/React.createElement(FieldEditorProvider, props, /*#__PURE__*/React.createElement(Editor, null));
-};
+};
+
+//# sourceMappingURL=FieldEditor.js.map

package/admin/components/FieldEditor/FieldEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Fragment","get","i18n","ReactComponent","DragIcon","Center","Vertical","Horizontal","Draggable","EditFieldDialog","Field","useModelFieldEditor","FieldEditorProvider","ModelFieldProvider","cn","Icon","t","namespace","fieldTypes","Editor","parent","depth","insertField","updateField","deleteField","fields","noConflict","editField","onFieldDrop","onEndDrag","field","dropTarget","getFieldPlugin","canDropIntoField","draggable","fieldPlugin","type","canAccept","isVerticalDropzoneVisible","cb","item","allowLayout","isHorizontalDropzoneVisible","createElement","length","isDroppable","onDrop","row","index","map","beginDrag","fieldId","pos","endDrag","key","f","join","drag","isDragging","className","ref","icon","label","color","size","isVisible","fieldIndex","includes","onEdit","onDelete","last","onClose","onSubmit","id","position","FieldEditor","props"],"sources":["FieldEditor.tsx"],"sourcesContent":["import React, { Fragment } from \"react\";\nimport get from \"lodash/get\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { ReactComponent as DragIcon } from \"@webiny/icons/drag_indicator.svg\";\nimport { Center, Vertical, Horizontal } from \"../DropZone\";\nimport Draggable from \"../Draggable\";\nimport EditFieldDialog from \"./EditFieldDialog\";\nimport Field from \"./Field\";\nimport { useModelFieldEditor } from \"./useModelFieldEditor\";\nimport type { IsVisibleCallable } from \"./FieldEditorContext\";\nimport { FieldEditorProvider } from \"./FieldEditorContext\";\nimport type {\n    CmsModelField,\n    CmsEditorFieldsLayout,\n    CmsModelFieldTypePlugin,\n    DragSource\n} from \"~/types\";\nimport { ModelFieldProvider } from \"~/admin/components/ModelFieldProvider\";\nimport { cn, Icon } from \"@webiny/admin-ui\";\n\nconst t = i18n.namespace(\"app-headless-cms/admin/components/editor\");\n\nconst fieldTypes: string[] = [\"field\", \"newField\"];\n\nconst Editor = () => {\n    const {\n        parent,\n        depth,\n        insertField,\n        updateField,\n        deleteField,\n        fields,\n        noConflict,\n        editField,\n        onFieldDrop,\n        onEndDrag,\n        field,\n        dropTarget,\n        getFieldPlugin\n    } = useModelFieldEditor();\n\n    const canDropIntoField = (field: CmsModelField, draggable: DragSource) => {\n        const fieldPlugin = getFieldPlugin(field.type) as CmsModelFieldTypePlugin;\n        const canAccept = fieldPlugin.field.canAccept;\n        if (typeof canAccept === \"function\" && !canAccept(field, draggable)) {\n            return false;\n        }\n\n        return true;\n    };\n\n    const isVerticalDropzoneVisible = (cb: IsVisibleCallable) => {\n        return (item: DragSource) => {\n            if (!parent) {\n                return cb(item);\n            }\n\n            const fieldPlugin = getFieldPlugin(parent.type) as CmsModelFieldTypePlugin;\n            const allowLayout = fieldPlugin.field.allowLayout ?? true;\n            if (!allowLayout) {\n                return false;\n            }\n\n            if (!canDropIntoField(parent, item)) {\n                return false;\n            }\n\n            return cb(item);\n        };\n    };\n\n    const isHorizontalDropzoneVisible = (cb: IsVisibleCallable) => {\n        return (item: DragSource) => {\n            if (!parent) {\n                return cb(item);\n            }\n\n            if (!canDropIntoField(parent, item)) {\n                return false;\n            }\n\n            return cb(item);\n        };\n    };\n\n    return (\n        <Fragment>\n            {fields.length === 0 && (\n                <Center\n                    isDroppable={isHorizontalDropzoneVisible(() => true)}\n                    onDrop={item =>\n                        onFieldDrop(item, {\n                            row: 0,\n                            index: 0\n                        })\n                    }\n                >\n                    {t`Drop your first field here`}\n                </Center>\n            )}\n\n            {fields.map((row, index) => (\n                <Draggable\n                    beginDrag={{\n                        parent: parent ? parent.fieldId : null,\n                        type: \"row\",\n                        fields: row,\n                        pos: { row: index }\n                    }}\n                    endDrag={onEndDrag}\n                    key={row.map(f => f.fieldId).join(\".\")}\n                >\n                    {(\n                        {\n                            drag,\n                            isDragging\n                        } /* RowContainer start - includes drag handle, drop zones and the Row itself. */\n                    ) => (\n                        <div\n                            className={cn([\n                                \"wby-flex wby-flex-column\",\n                                \"wby-relative\",\n                                \"wby-mb-md last-of-type:wby-mb-none\",\n                                \"wby-bg-neutral-dimmed\",\n                                isDragging ? \"wby-opacity-30\" : \"wby-opacity-100\"\n                            ])}\n                        >\n                            <div\n                                className={cn([\n                                    \"wby-cursor-grab\",\n                                    \"wby-absolute wby-left-sm-plus wby-top-sm-plus wby-z-10\"\n                                ])}\n                                ref={drag}\n                            >\n                                <Icon\n                                    icon={<DragIcon />}\n                                    label={\"Drag to move this row\"}\n                                    color={\"neutral-light\"}\n                                    size={\"sm\"}\n                                />\n                            </div>\n                            <Horizontal\n                                isVisible={isHorizontalDropzoneVisible(noConflict())}\n                                data-testid={`cms-editor-row-droppable-top-${index}`}\n                                onDrop={item => onFieldDrop(item, { row: index, index: null })}\n                            />\n                            {/* Row start - includes field drop zones and fields */}\n                            <div\n                                className={cn([\n                                    \"wby-w-full wby-flex wby-justify-between\",\n                                    \"wby-pl-xl wby-pr-sm wby-py-sm\"\n                                ])}\n                                data-testid={\"cms.editor.field-row\"}\n                            >\n                                {row.map((field, fieldIndex) => (\n                                    <ModelFieldProvider field={field} key={field.fieldId}>\n                                        <Draggable\n                                            beginDrag={{\n                                                parent: parent ? parent.fieldId : null,\n                                                type: \"field\",\n                                                field,\n                                                pos: {\n                                                    row: index,\n                                                    index: fieldIndex\n                                                }\n                                            }}\n                                            endDrag={onEndDrag}\n                                        >\n                                            {({ drag }) => (\n                                                <div\n                                                    className={cn([\n                                                        \"wby-relative\",\n                                                        \"wby-flex-1 wby-basis-full\",\n                                                        \"wby-mx-sm\"\n                                                    ])}\n                                                    ref={drag}\n                                                >\n                                                    <Vertical\n                                                        depth={depth}\n                                                        onDrop={item =>\n                                                            onFieldDrop(item, {\n                                                                row: index,\n                                                                index: fieldIndex\n                                                            })\n                                                        }\n                                                        isVisible={isVerticalDropzoneVisible(\n                                                            noConflict(\n                                                                item =>\n                                                                    fieldTypes.includes(\n                                                                        item.type\n                                                                    ) &&\n                                                                    (row.length < 4 ||\n                                                                        get(item, \"pos.row\") ===\n                                                                            index)\n                                                            )\n                                                        )}\n                                                    />\n\n                                                    <div\n                                                        className={\n                                                            \"wby-cursor-grab wby-bg-neutral-base wby-p-md wby-shadow-sm wby-rounded-xs\"\n                                                        }\n                                                    >\n                                                        <Field\n                                                            parent={parent}\n                                                            field={field}\n                                                            onEdit={editField}\n                                                            onDelete={deleteField}\n                                                        />\n                                                    </div>\n\n                                                    {/* Field end */}\n                                                    {fieldIndex === row.length - 1 && (\n                                                        <Vertical\n                                                            last\n                                                            depth={depth}\n                                                            isVisible={isVerticalDropzoneVisible(\n                                                                noConflict(item => {\n                                                                    return (\n                                                                        fieldTypes.includes(\n                                                                            item.type\n                                                                        ) &&\n                                                                        (row.length < 4 ||\n                                                                            get(item, \"pos.row\") ===\n                                                                                index)\n                                                                    );\n                                                                })\n                                                            )}\n                                                            onDrop={item =>\n                                                                onFieldDrop(item, {\n                                                                    row: index,\n                                                                    index: fieldIndex + 1\n                                                                })\n                                                            }\n                                                        />\n                                                    )}\n                                                </div>\n                                            )}\n                                        </Draggable>\n                                    </ModelFieldProvider>\n                                ))}\n                            </div>\n                            {/* Row end */}\n                            {index === fields.length - 1 ? (\n                                <Horizontal\n                                    data-testid={`cms-editor-row-droppable-bottom-${index}`}\n                                    last\n                                    isVisible={isHorizontalDropzoneVisible(noConflict())}\n                                    onDrop={item =>\n                                        onFieldDrop(item, {\n                                            row: index + 1,\n                                            index: null\n                                        })\n                                    }\n                                />\n                            ) : null}\n                        </div>\n                    )}\n                </Draggable>\n            ))}\n\n            {field ? (\n                <ModelFieldProvider field={field}>\n                    <EditFieldDialog\n                        onClose={() => editField(null)}\n                        onSubmit={field => {\n                            if (field.id) {\n                                updateField(field);\n                                editField(null);\n                                return;\n                            }\n                            insertField({ field, position: dropTarget });\n\n                            editField(null);\n                        }}\n                    />\n                </ModelFieldProvider>\n            ) : null}\n        </Fragment>\n    );\n};\n\nexport interface FieldEditorProps {\n    parent?: CmsModelField;\n    layout: CmsEditorFieldsLayout;\n    fields: CmsModelField[];\n    onChange: (params: { fields: CmsModelField[]; layout: CmsEditorFieldsLayout }) => void;\n}\n\nexport const FieldEditor = (props: FieldEditorProps) => {\n    return (\n        <FieldEditorProvider {...props}>\n            <Editor />\n        </FieldEditorProvider>\n    );\n};\n"],"mappings":"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","ignoreList":[]}

package/admin/components/FieldEditor/FieldEditorContext.d.ts

@@ -1,53 +1,90 @@
 import React from "react";
-import { CmsEditorField, CmsEditorFieldId, CmsEditorFieldsLayout, CmsEditorFieldTypePlugin, FieldLayoutPosition } from "../../../types";
-import { FieldEditorProps } from "./FieldEditor";
-import { DragObjectWithType, DragSourceMonitor } from "react-dnd";
+import type { CmsEditorFieldId, CmsEditorFieldRendererPlugin, CmsEditorFieldsLayout, CmsEditorFieldTypePlugin, CmsModelField, DragSource, FieldLayoutPosition } from "../../../types";
+import type { FieldEditorProps } from "./FieldEditor";
+import type { DragSourceMonitor } from "react-dnd";
 interface DropTarget {
     row: number;
-    index: number;
+    index: number | null;
 }
-interface Position {
-    row: number;
-    index: number;
-}
-export interface DragSource extends DragObjectWithType {
-    parent?: string;
-    pos: Partial<Position>;
-    type: "row" | "field" | "newField";
-    fieldType?: string;
-    field?: CmsEditorField;
-    fields?: CmsEditorField[];
-}
-export interface FieldEditorContextValue {
-    fields: CmsEditorField[][];
-    noConflict: Function;
+/**
+ * Property in GetFieldParams can be any key from CmsEditorField, but TS does not allow union types
+ */
+interface GetFieldParams {
+    id?: string;
+    fieldId?: string;
+}
+interface InsertFieldParams {
+    field: CmsModelField;
+    position: FieldLayoutPosition;
+}
+interface MoveFieldParams {
+    field: CmsEditorFieldId | CmsModelField;
+    position: FieldLayoutPosition;
+}
+interface GetFieldsInLayoutCallable {
+    (): CmsModelField[][];
+}
+interface GetFieldPluginCallable {
+    (type: string): CmsEditorFieldTypePlugin | undefined;
+}
+interface GetFieldCallable {
+    (query: GetFieldParams): CmsModelField | undefined;
+}
+interface GetFieldRendererCallable {
+    (rendererName: string): CmsEditorFieldRendererPlugin | undefined;
+}
+interface OnFieldDropCallable {
+    (source: Partial<DragSource>, target: DropTarget): void;
+}
+interface InsertFieldCallable {
+    (params: InsertFieldParams): void;
+}
+interface MoveFieldCallable {
+    (params: MoveFieldParams): void;
+}
+interface OnEndDragCallable<DragObject = unknown, DropResult = unknown> {
+    (item: DragSource, monitor: DragSourceMonitor<DragObject, DropResult>): void;
+}
+interface MoveRowCallable {
+    (source: number, destination: number): void;
+}
+interface UpdateFieldCallable {
+    (field: CmsModelField): void;
+}
+interface DeleteFieldCallable {
+    (field: Pick<CmsModelField, "id">): void;
+}
+export interface IsVisibleCallable {
+    (item: DragSource): boolean;
+}
+interface NoConflictCallable {
+    (cb?: IsVisibleCallable): (item: DragSource) => boolean;
+}
+export interface FieldEditorContext {
+    fields: CmsModelField[][];
+    noConflict: NoConflictCallable;
     layout: CmsEditorFieldsLayout;
     onChange?: (data: any) => void;
-    getFieldsInLayout: () => CmsEditorField[][];
-    getFieldPlugin: (type: string) => CmsEditorFieldTypePlugin;
-    getField: (query: Record<string, string>) => CmsEditorField;
-    editField: (field: CmsEditorField) => void;
-    field: CmsEditorField;
-    parent: CmsEditorField;
+    getFieldsInLayout: GetFieldsInLayoutCallable;
+    getFieldPlugin: GetFieldPluginCallable;
+    getField: GetFieldCallable;
+    getFieldRendererPlugin: GetFieldRendererCallable;
+    editField: (field: CmsModelField | null) => void;
+    field: CmsModelField | null;
+    parent?: CmsModelField;
     depth: number;
-    dropTarget?: DropTarget;
-    onFieldDrop: (source: Partial<DragSource>, target: DropTarget) => void;
-    onEndDrag: (item: DragSource, monitor: DragSourceMonitor) => void;
-    insertField: (params: {
-        field: CmsEditorField;
-        position: FieldLayoutPosition;
-    }) => void;
-    moveField: (params: {
-        field: CmsEditorFieldId | CmsEditorField;
-        position: FieldLayoutPosition;
-    }) => void;
-    moveRow: (source: number, destination: number) => void;
-    updateField: (field: CmsEditorField) => void;
-    deleteField: (field: CmsEditorField) => void;
+    dropTarget: DropTarget;
+    onFieldDrop: OnFieldDropCallable;
+    onEndDrag: OnEndDragCallable;
+    insertField: InsertFieldCallable;
+    moveField: MoveFieldCallable;
+    moveRow: MoveRowCallable;
+    updateField: UpdateFieldCallable;
+    deleteField: DeleteFieldCallable;
 }
 interface FieldEditorProviderProps extends FieldEditorProps {
     children: React.ReactElement;
 }
-export declare const FieldEditorContext: React.Context<FieldEditorContextValue>;
-export declare const FieldEditorProvider: ({ parent, fields, layout, onChange, children }: FieldEditorProviderProps) => JSX.Element;
+export declare const FieldEditorContext: React.Context<FieldEditorContext | undefined>;
+export declare const FieldEditorProvider: ({ parent, fields, layout, onChange, children }: FieldEditorProviderProps) => React.JSX.Element;
 export {};