@webiny/app-headless-cms 5.33.5 → 5.34.0-beta.1

package/admin/components/ContentModelEditor/PreviewTab.js.map

@@ -1 +1 @@
-{"version":3,"names":["t","i18n","ns","formPreviewWrapper","css","padding","margin","boxSizing","style","noFieldsMessage","textAlign","PreviewTab","activeTab","useContentModelEditor","data","fields","length"],"sources":["PreviewTab.tsx"],"sourcesContent":["import React from \"react\";\nimport { css } from \"emotion\";\nimport { Elevation } from \"@webiny/ui/Elevation\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { CmsEditorContentTab } from \"~/types\";\nimport { useContentModelEditor } from \"~/admin/components/ContentModelEditor/useContentModelEditor\";\nimport { ContentEntryFormPreview } from \"../ContentEntryForm/ContentEntryFormPreview\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/components/editor/tabs/preview\");\n\nconst formPreviewWrapper = css({\n    padding: 40,\n    margin: 40,\n    boxSizing: \"border-box\"\n});\n\nconst style = {\n    noFieldsMessage: css({\n        textAlign: \"center\"\n    })\n};\n\nexport const PreviewTab: CmsEditorContentTab = ({ activeTab }) => {\n    const { data } = useContentModelEditor();\n\n    return (\n        <Elevation z={1} className={formPreviewWrapper}>\n            {data.fields && data.fields.length && activeTab ? (\n                <ContentEntryFormPreview contentModel={data} />\n            ) : (\n                <div className={style.noFieldsMessage}>\n                    {t`Before previewing the form, please add at least one field to the content model.`}\n                </div>\n            )}\n        </Elevation>\n    );\n};\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;AACA;;;;AAEA,IAAMA,CAAC,GAAGC,UAAA,CAAKC,EAAL,CAAQ,uDAAR,CAAV;;AAEA,IAAMC,kBAAkB,gBAAG,IAAAC,YAAA,EAAI;EAC3BC,OAAO,EAAE,EADkB;EAE3BC,MAAM,EAAE,EAFmB;EAG3BC,SAAS,EAAE;AAHgB,CAAJ,8BAA3B;AAMA,IAAMC,KAAK,GAAG;EACVC,eAAe,eAAE,IAAAL,YAAA,EAAI;IACjBM,SAAS,EAAE;EADM,CAAJ;AADP,CAAd;;AAMO,IAAMC,UAA+B,GAAG,SAAlCA,UAAkC,OAAmB;EAAA,IAAhBC,SAAgB,QAAhBA,SAAgB;;EAC9D,4BAAiB,IAAAC,4CAAA,GAAjB;EAAA,IAAQC,IAAR,yBAAQA,IAAR;;EAEA,oBACI,6BAAC,oBAAD;IAAW,CAAC,EAAE,CAAd;IAAiB,SAAS,EAAEX;EAA5B,GACKW,IAAI,CAACC,MAAL,IAAeD,IAAI,CAACC,MAAL,CAAYC,MAA3B,IAAqCJ,SAArC,gBACG,6BAAC,gDAAD;IAAyB,YAAY,EAAEE;EAAvC,EADH,gBAGG;IAAK,SAAS,EAAEN,KAAK,CAACC;EAAtB,GACKT,CADL,mKAJR,CADJ;AAWH,CAdM"}
+{"version":3,"names":["t","i18n","ns","formPreviewWrapper","css","padding","margin","boxSizing","style","noFieldsMessage","textAlign","PreviewTab","activeTab","useModelEditor","data","fields","length"],"sources":["PreviewTab.tsx"],"sourcesContent":["import React from \"react\";\nimport { css } from \"emotion\";\nimport { Elevation } from \"@webiny/ui/Elevation\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { CmsEditorContentTab } from \"~/types\";\nimport { useModelEditor } from \"~/admin/hooks\";\nimport { ContentEntryFormPreview } from \"../ContentEntryForm/ContentEntryFormPreview\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/components/editor/tabs/preview\");\n\nconst formPreviewWrapper = css({\n    padding: 40,\n    margin: 40,\n    boxSizing: \"border-box\"\n});\n\nconst style = {\n    noFieldsMessage: css({\n        textAlign: \"center\"\n    })\n};\n\nexport const PreviewTab: CmsEditorContentTab = ({ activeTab }) => {\n    const { data } = useModelEditor();\n\n    return (\n        <Elevation z={1} className={formPreviewWrapper}>\n            {data.fields && data.fields.length && activeTab ? (\n                <ContentEntryFormPreview contentModel={data} />\n            ) : (\n                <div className={style.noFieldsMessage}>\n                    {t`Before previewing the form, please add at least one field to the content model.`}\n                </div>\n            )}\n        </Elevation>\n    );\n};\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;AACA;;;;AAEA,IAAMA,CAAC,GAAGC,UAAA,CAAKC,EAAL,CAAQ,uDAAR,CAAV;;AAEA,IAAMC,kBAAkB,gBAAG,IAAAC,YAAA,EAAI;EAC3BC,OAAO,EAAE,EADkB;EAE3BC,MAAM,EAAE,EAFmB;EAG3BC,SAAS,EAAE;AAHgB,CAAJ,8BAA3B;AAMA,IAAMC,KAAK,GAAG;EACVC,eAAe,eAAE,IAAAL,YAAA,EAAI;IACjBM,SAAS,EAAE;EADM,CAAJ;AADP,CAAd;;AAMO,IAAMC,UAA+B,GAAG,SAAlCA,UAAkC,OAAmB;EAAA,IAAhBC,SAAgB,QAAhBA,SAAgB;;EAC9D,sBAAiB,IAAAC,qBAAA,GAAjB;EAAA,IAAQC,IAAR,mBAAQA,IAAR;;EAEA,oBACI,6BAAC,oBAAD;IAAW,CAAC,EAAE,CAAd;IAAiB,SAAS,EAAEX;EAA5B,GACKW,IAAI,CAACC,MAAL,IAAeD,IAAI,CAACC,MAAL,CAAYC,MAA3B,IAAqCJ,SAArC,gBACG,6BAAC,gDAAD;IAAyB,YAAY,EAAEE;EAAvC,EADH,gBAGG;IAAK,SAAS,EAAEN,KAAK,CAACC;EAAtB,GACKT,CADL,mKAJR,CADJ;AAWH,CAdM"}

package/admin/components/ContentModelEditor/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./ContentModelEditorProvider";
+export * from "./useModelEditor";

package/admin/components/ContentModelEditor/index.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _ContentModelEditorProvider = require("./ContentModelEditorProvider");
+
+Object.keys(_ContentModelEditorProvider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ContentModelEditorProvider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _ContentModelEditorProvider[key];
+    }
+  });
+});
+
+var _useModelEditor = require("./useModelEditor");
+
+Object.keys(_useModelEditor).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useModelEditor[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _useModelEditor[key];
+    }
+  });
+});

package/admin/components/ContentModelEditor/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./ContentModelEditorProvider\";\nexport * from \"./useModelEditor\";\n"],"mappings":";;;;;;AAAA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

package/admin/components/ContentModelEditor/useModelEditor.d.ts

@@ -0,0 +1 @@
+export declare function useModelEditor(): import("./ContentModelEditorProvider").ContentModelEditorProviderContext;

package/admin/components/ContentModelEditor/{useContentModelEditor.js → useModelEditor.js}

@@ -5,14 +5,14 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useContentModelEditor = useContentModelEditor;
+exports.useModelEditor = useModelEditor;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _Context = require("./Context");
+var _ContentModelEditorProvider = require("./ContentModelEditorProvider");
 
-function useContentModelEditor() {
-  var context = _react.default.useContext(_Context.contentModelEditorContext);
+function useModelEditor() {
+  var context = _react.default.useContext(_ContentModelEditorProvider.contentModelEditorContext);
 
   if (!context) {
     throw new Error("useContentModelEditor must be used within a ContentModelEditorProvider");

package/admin/components/ContentModelEditor/useModelEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useModelEditor","context","React","useContext","contentModelEditorContext","Error"],"sources":["useModelEditor.ts"],"sourcesContent":["import React from \"react\";\nimport { contentModelEditorContext } from \"./ContentModelEditorProvider\";\n\nexport function useModelEditor() {\n    const context = React.useContext(contentModelEditorContext);\n    if (!context) {\n        throw new Error(\"useContentModelEditor must be used within a ContentModelEditorProvider\");\n    }\n\n    return context;\n}\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEO,SAASA,cAAT,GAA0B;EAC7B,IAAMC,OAAO,GAAGC,cAAA,CAAMC,UAAN,CAAiBC,qDAAjB,CAAhB;;EACA,IAAI,CAACH,OAAL,EAAc;IACV,MAAM,IAAII,KAAJ,CAAU,wEAAV,CAAN;EACH;;EAED,OAAOJ,OAAP;AACH"}

package/admin/components/Dialog.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { Dialog as BaseDialog } from "@webiny/ui/Dialog";
+export * from "@webiny/ui/Dialog";
+export declare const Dialog: import("@emotion/styled-base").StyledComponent<import("@webiny/ui/Dialog").DialogProps & import("react").RefAttributes<BaseDialog>, Pick<import("@webiny/ui/Dialog").DialogProps & import("react").RefAttributes<BaseDialog>, keyof import("@webiny/ui/Dialog").DialogProps>, object>;

package/admin/components/Dialog.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  Dialog: true
+};
+exports.Dialog = void 0;
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _Dialog = require("@webiny/ui/Dialog");
+
+Object.keys(_Dialog).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Dialog[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Dialog[key];
+    }
+  });
+});
+var Dialog = /*#__PURE__*/(0, _styled.default)(_Dialog.Dialog, {
+  label: "Dialog",
+  target: "e1q5k1p00"
+})(".mdc-dialog__surface{width:600px;min-width:600px;overflow:initial;}.mdc-dialog__content{overflow:initial !important;.mdc-list:first-of-type{padding:0;}}");
+exports.Dialog = Dialog;

package/admin/components/Dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Dialog","styled","BaseDialog"],"sources":["Dialog.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { Dialog as BaseDialog } from \"@webiny/ui/Dialog\";\nexport * from \"@webiny/ui/Dialog\";\n\nexport const Dialog = styled(BaseDialog)`\n    .mdc-dialog__surface {\n        width: 600px;\n        min-width: 600px;\n        overflow: initial;\n    }\n\n    .mdc-dialog__content {\n        overflow: initial !important;\n        .mdc-list:first-of-type {\n            padding: 0;\n        }\n    }\n`;\n"],"mappings":";;;;;;;;;;;;AAAA;;AACA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AAEO,IAAMA,MAAM,oBAAGC,eAAH,EAAUC,cAAV;EAAA;EAAA;AAAA,8JAAZ"}

package/admin/components/DropZone/Center.d.ts

@@ -1,5 +1,5 @@
 import React, { CSSProperties } from "react";
-import { OnDropCallable } from "../Droppable";
+import { DroppableProps, OnDropCallable } from "../Droppable";
 interface CenterProps {
     type?: string;
     onDrop: OnDropCallable;
@@ -7,6 +7,7 @@ interface CenterProps {
     active?: boolean;
     highlight?: boolean;
     style?: CSSProperties;
+    isDroppable?: DroppableProps["isDroppable"];
 }
 declare const Center: React.FC<CenterProps>;
 export default Center;

package/admin/components/DropZone/Center.js

@@ -15,61 +15,55 @@ var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _Droppable = require("./../Droppable");
 
-// @ts-ignore
+var getColor = function getColor(_ref) {
+  var isOver = _ref.isOver,
+      isDroppable = _ref.isDroppable;
+
+  if (isOver) {
+    return "var(--mdc-theme-primary)";
+  }
+
+  if (!isDroppable) {
+    return "var(--mdc-theme-background)";
+  }
+
+  return "var(--mdc-theme-secondary)";
+};
+
 var Container = /*#__PURE__*/(0, _styled.default)("div", {
-  target: "e14zhyp10",
-  label: "Container"
-})(function (_ref) {
-  var isOver = _ref.isOver;
-  return {
-    backgroundColor: "transparent",
-    boxSizing: "border-box",
-    height: "100%",
-    minHeight: 100,
-    position: "relative",
-    userSelect: "none",
-    width: "100%",
-    border: isOver ? "2px dashed var(--mdc-theme-primary)" : "2px dashed var(--mdc-theme-secondary)",
-    opacity: 1
-  };
-}); // @ts-ignore
+  label: "Container",
+  target: "e14zhyp10"
+})("background-color:transparent;box-sizing:border-box;height:100%;min-height:100px;position:relative;user-select:none;width:100%;border:2px dashed ", getColor, ";opacity:1;> div{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;color:", getColor, ";}");
 
-var Add = /*#__PURE__*/(0, _styled.default)("div", {
-  target: "e14zhyp11",
-  label: "Add"
-})(function (_ref2) {
-  var isOver = _ref2.isOver;
-  return {
-    position: "absolute",
-    top: "50%",
-    left: "50%",
-    transform: "translate(-50%,-50%)",
-    margin: 0,
-    color: isOver ? "var(--mdc-theme-primary)" : "var(--mdc-theme-secondary)"
+var getInert = function getInert(isDroppable) {
+  return isDroppable ? {} : {
+    inert: ""
   };
-});
+};
 
-var Center = function Center(_ref3) {
-  var onDrop = _ref3.onDrop,
-      children = _ref3.children,
-      style = _ref3.style;
+var Center = function Center(_ref2) {
+  var onDrop = _ref2.onDrop,
+      children = _ref2.children,
+      style = _ref2.style,
+      isDroppable = _ref2.isDroppable;
   return /*#__PURE__*/_react.default.createElement(_Droppable.Droppable, {
-    onDrop: onDrop
-  }, function (_ref4) {
-    var isOver = _ref4.isOver,
-        drop = _ref4.drop;
-    return /*#__PURE__*/_react.default.createElement("div", {
+    onDrop: onDrop,
+    isDroppable: isDroppable
+  }, function (_ref3) {
+    var isOver = _ref3.isOver,
+        drop = _ref3.drop,
+        isDroppable = _ref3.isDroppable;
+    return /*#__PURE__*/_react.default.createElement("div", Object.assign({
       ref: drop,
       style: (0, _objectSpread2.default)({
         width: "100%",
         height: "100%"
       }, style),
       "data-testid": "cms-editor-first-field-area"
-    }, /*#__PURE__*/_react.default.createElement(Container, {
-      isOver: isOver
-    }, /*#__PURE__*/_react.default.createElement(Add, {
-      isOver: isOver
-    }, children)));
+    }, getInert(isDroppable)), /*#__PURE__*/_react.default.createElement(Container, {
+      isOver: isOver,
+      isDroppable: isDroppable
+    }, /*#__PURE__*/_react.default.createElement("div", null, children)));
   });
 };
 

package/admin/components/DropZone/Center.js.map

@@ -1 +1 @@
-{"version":3,"names":["Container","styled","isOver","backgroundColor","boxSizing","height","minHeight","position","userSelect","width","border","opacity","Add","top","left","transform","margin","color","Center","onDrop","children","style","drop"],"sources":["Center.tsx"],"sourcesContent":["import React, { CSSProperties } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { Droppable, OnDropCallable } from \"./../Droppable\";\n\n// @ts-ignore\nconst Container = styled(\"div\")(({ isOver }: { isOver: boolean }) => ({\n    backgroundColor: \"transparent\",\n    boxSizing: \"border-box\",\n    height: \"100%\",\n    minHeight: 100,\n    position: \"relative\",\n    userSelect: \"none\",\n    width: \"100%\",\n    border: isOver\n        ? \"2px dashed var(--mdc-theme-primary)\"\n        : \"2px dashed var(--mdc-theme-secondary)\",\n    opacity: 1\n}));\n\n// @ts-ignore\nconst Add = styled(\"div\")(({ isOver }: { isOver: boolean }) => ({\n    position: \"absolute\",\n    top: \"50%\",\n    left: \"50%\",\n    transform: \"translate(-50%,-50%)\",\n    margin: 0,\n    color: isOver ? \"var(--mdc-theme-primary)\" : \"var(--mdc-theme-secondary)\"\n}));\n\ninterface CenterProps {\n    type?: string;\n    onDrop: OnDropCallable;\n    children: React.ReactNode;\n    active?: boolean;\n    highlight?: boolean;\n    style?: CSSProperties;\n}\n\nconst Center: React.FC<CenterProps> = ({ onDrop, children, style }) => {\n    return (\n        <Droppable onDrop={onDrop}>\n            {({ isOver, drop }) => (\n                <div\n                    ref={drop}\n                    style={{ width: \"100%\", height: \"100%\", ...style }}\n                    data-testid={\"cms-editor-first-field-area\"}\n                >\n                    <Container isOver={isOver}>\n                        <Add isOver={isOver}>{children}</Add>\n                    </Container>\n                </div>\n            )}\n        </Droppable>\n    );\n};\n\nexport default Center;\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;AACA,IAAMA,SAAS,oBAAGC,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,GAAiB;EAAA,IAAGC,MAAH,QAAGA,MAAH;EAAA,OAAsC;IAClEC,eAAe,EAAE,aADiD;IAElEC,SAAS,EAAE,YAFuD;IAGlEC,MAAM,EAAE,MAH0D;IAIlEC,SAAS,EAAE,GAJuD;IAKlEC,QAAQ,EAAE,UALwD;IAMlEC,UAAU,EAAE,MANsD;IAOlEC,KAAK,EAAE,MAP2D;IAQlEC,MAAM,EAAER,MAAM,GACR,qCADQ,GAER,uCAV4D;IAWlES,OAAO,EAAE;EAXyD,CAAtC;AAAA,CAAjB,CAAf,C,CAcA;;AACA,IAAMC,GAAG,oBAAGX,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,GAAiB;EAAA,IAAGC,MAAH,SAAGA,MAAH;EAAA,OAAsC;IAC5DK,QAAQ,EAAE,UADkD;IAE5DM,GAAG,EAAE,KAFuD;IAG5DC,IAAI,EAAE,KAHsD;IAI5DC,SAAS,EAAE,sBAJiD;IAK5DC,MAAM,EAAE,CALoD;IAM5DC,KAAK,EAAEf,MAAM,GAAG,0BAAH,GAAgC;EANe,CAAtC;AAAA,CAAjB,CAAT;;AAkBA,IAAMgB,MAA6B,GAAG,SAAhCA,MAAgC,QAAiC;EAAA,IAA9BC,MAA8B,SAA9BA,MAA8B;EAAA,IAAtBC,QAAsB,SAAtBA,QAAsB;EAAA,IAAZC,KAAY,SAAZA,KAAY;EACnE,oBACI,6BAAC,oBAAD;IAAW,MAAM,EAAEF;EAAnB,GACK;IAAA,IAAGjB,MAAH,SAAGA,MAAH;IAAA,IAAWoB,IAAX,SAAWA,IAAX;IAAA,oBACG;MACI,GAAG,EAAEA,IADT;MAEI,KAAK;QAAIb,KAAK,EAAE,MAAX;QAAmBJ,MAAM,EAAE;MAA3B,GAAsCgB,KAAtC,CAFT;MAGI,eAAa;IAHjB,gBAKI,6BAAC,SAAD;MAAW,MAAM,EAAEnB;IAAnB,gBACI,6BAAC,GAAD;MAAK,MAAM,EAAEA;IAAb,GAAsBkB,QAAtB,CADJ,CALJ,CADH;EAAA,CADL,CADJ;AAeH,CAhBD;;eAkBeF,M"}
+{"version":3,"names":["getColor","isOver","isDroppable","Container","styled","getInert","inert","Center","onDrop","children","style","drop","width","height"],"sources":["Center.tsx"],"sourcesContent":["import React, { CSSProperties } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { Droppable, DroppableProps, OnDropCallable } from \"./../Droppable\";\n\ninterface DroppableFlags {\n    isOver: boolean;\n    isDroppable: boolean;\n}\n\nconst getColor = ({ isOver, isDroppable }: DroppableFlags) => {\n    if (isOver) {\n        return \"var(--mdc-theme-primary)\";\n    }\n\n    if (!isDroppable) {\n        return \"var(--mdc-theme-background)\";\n    }\n\n    return \"var(--mdc-theme-secondary)\";\n};\n\nconst Container = styled.div`\n    background-color: transparent;\n    box-sizing: border-box;\n    height: 100%;\n    min-height: 100px;\n    position: relative;\n    user-select: none;\n    width: 100%;\n    border: 2px dashed ${getColor};\n    opacity: 1;\n    > div {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        margin: 0;\n        color: ${getColor};\n    }\n`;\n\ninterface CenterProps {\n    type?: string;\n    onDrop: OnDropCallable;\n    children: React.ReactNode;\n    active?: boolean;\n    highlight?: boolean;\n    style?: CSSProperties;\n    isDroppable?: DroppableProps[\"isDroppable\"];\n}\n\nconst getInert = (isDroppable: boolean) => {\n    return isDroppable ? {} : { inert: \"\" };\n};\n\nconst Center: React.FC<CenterProps> = ({ onDrop, children, style, isDroppable }) => {\n    return (\n        <Droppable onDrop={onDrop} isDroppable={isDroppable}>\n            {({ isOver, drop, isDroppable }) => (\n                <div\n                    ref={drop}\n                    style={{ width: \"100%\", height: \"100%\", ...style }}\n                    data-testid={\"cms-editor-first-field-area\"}\n                    {...getInert(isDroppable)}\n                >\n                    <Container isOver={isOver} isDroppable={isDroppable}>\n                        <div>{children}</div>\n                    </Container>\n                </div>\n            )}\n        </Droppable>\n    );\n};\n\nexport default Center;\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AAOA,IAAMA,QAAQ,GAAG,SAAXA,QAAW,OAA6C;EAAA,IAA1CC,MAA0C,QAA1CA,MAA0C;EAAA,IAAlCC,WAAkC,QAAlCA,WAAkC;;EAC1D,IAAID,MAAJ,EAAY;IACR,OAAO,0BAAP;EACH;;EAED,IAAI,CAACC,WAAL,EAAkB;IACd,OAAO,6BAAP;EACH;;EAED,OAAO,4BAAP;AACH,CAVD;;AAYA,IAAMC,SAAS,oBAAGC,eAAH;EAAA;EAAA;AAAA,uJAQUJ,QARV,wGAgBEA,QAhBF,OAAf;;AA8BA,IAAMK,QAAQ,GAAG,SAAXA,QAAW,CAACH,WAAD,EAA0B;EACvC,OAAOA,WAAW,GAAG,EAAH,GAAQ;IAAEI,KAAK,EAAE;EAAT,CAA1B;AACH,CAFD;;AAIA,IAAMC,MAA6B,GAAG,SAAhCA,MAAgC,QAA8C;EAAA,IAA3CC,MAA2C,SAA3CA,MAA2C;EAAA,IAAnCC,QAAmC,SAAnCA,QAAmC;EAAA,IAAzBC,KAAyB,SAAzBA,KAAyB;EAAA,IAAlBR,WAAkB,SAAlBA,WAAkB;EAChF,oBACI,6BAAC,oBAAD;IAAW,MAAM,EAAEM,MAAnB;IAA2B,WAAW,EAAEN;EAAxC,GACK;IAAA,IAAGD,MAAH,SAAGA,MAAH;IAAA,IAAWU,IAAX,SAAWA,IAAX;IAAA,IAAiBT,WAAjB,SAAiBA,WAAjB;IAAA,oBACG;MACI,GAAG,EAAES,IADT;MAEI,KAAK;QAAIC,KAAK,EAAE,MAAX;QAAmBC,MAAM,EAAE;MAA3B,GAAsCH,KAAtC,CAFT;MAGI,eAAa;IAHjB,GAIQL,QAAQ,CAACH,WAAD,CAJhB,gBAMI,6BAAC,SAAD;MAAW,MAAM,EAAED,MAAnB;MAA2B,WAAW,EAAEC;IAAxC,gBACI,0CAAMO,QAAN,CADJ,CANJ,CADH;EAAA,CADL,CADJ;AAgBH,CAjBD;;eAmBeF,M"}

package/admin/components/Droppable.d.ts

@@ -3,6 +3,7 @@ import { ConnectDropTarget } from "react-dnd";
 import { DragSource } from "./FieldEditor/FieldEditorContext";
 export interface DroppableChildrenFunctionParams {
     isDragging: boolean;
+    isDroppable: boolean;
     isOver: boolean;
     item: any;
     drop: ConnectDropTarget;

package/admin/components/Droppable.js

@@ -33,7 +33,11 @@ var DroppableComponent = function DroppableComponent(props) {
         item: monitor.getItem()
       };
     },
-    drop: function drop(_, monitor) {
+    drop: function drop(item, monitor) {
+      if (typeof props.isDroppable === "function" && !props.isDroppable(item)) {
+        return;
+      }
+
       if (typeof onDrop === "function") {
         return onDrop(monitor.getItem());
       }
@@ -49,9 +53,16 @@ var DroppableComponent = function DroppableComponent(props) {
     return null;
   }
 
+  var isDroppable = true;
+
+  if (item) {
+    isDroppable = props.isDroppable ? props.isDroppable(item) : isOver;
+  }
+
   return children({
     isDragging: Boolean(item),
     isOver: isOver,
+    isDroppable: isDroppable,
     item: item,
     drop: drop
   });

package/admin/components/Droppable.js.map

@@ -1 +1 @@
-{"version":3,"names":["DroppableComponent","props","children","onDrop","isVisible","useDrop","accept","collect","monitor","isOver","shallow","item","getItem","drop","_","isDragging","Boolean","Droppable","React","memo"],"sources":["Droppable.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { ConnectDropTarget, useDrop } from \"react-dnd\";\nimport { DragSource } from \"~/admin/components/FieldEditor/FieldEditorContext\";\n\nexport interface DroppableChildrenFunctionParams {\n    isDragging: boolean;\n    isOver: boolean;\n    item: any;\n    drop: ConnectDropTarget;\n}\nexport interface DroppableChildrenFunction {\n    (params: DroppableChildrenFunctionParams): React.ReactElement;\n}\n\ninterface IsVisibleParams {\n    type: \"row\" | \"field\" | \"newField\";\n    item: any;\n    isDragging: boolean;\n}\nexport interface IsVisibleCallable {\n    (params: IsVisibleParams): boolean;\n}\nexport interface OnDropCallable {\n    (item: DragSource): void;\n}\nexport interface DroppableProps {\n    type?: string;\n    children: DroppableChildrenFunction;\n    isDragging?: boolean;\n    isDroppable?: (item: any) => boolean;\n    isVisible?: IsVisibleCallable;\n    onDrop?: OnDropCallable;\n}\n\nconst DroppableComponent: React.FC<DroppableProps> = props => {\n    const { children, onDrop, isVisible = () => true } = props;\n\n    const [{ item, isOver }, drop] = useDrop({\n        accept: \"element\",\n        collect: monitor => ({\n            isOver: monitor.isOver() && monitor.isOver({ shallow: true }),\n            item: monitor.getItem()\n        }),\n        drop(_, monitor) {\n            if (typeof onDrop === \"function\") {\n                return onDrop(monitor.getItem());\n            }\n        }\n    });\n\n    if (item && !isVisible(item)) {\n        return null;\n    }\n\n    return children({ isDragging: Boolean(item), isOver, item, drop });\n};\n\nexport const Droppable: React.FC<DroppableProps> = React.memo(DroppableComponent);\n"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AAiCA,IAAMA,kBAA4C,GAAG,SAA/CA,kBAA+C,CAAAC,KAAK,EAAI;EAC1D,IAAQC,QAAR,GAAqDD,KAArD,CAAQC,QAAR;EAAA,IAAkBC,MAAlB,GAAqDF,KAArD,CAAkBE,MAAlB;EAAA,uBAAqDF,KAArD,CAA0BG,SAA1B;EAAA,IAA0BA,SAA1B,iCAAsC;IAAA,OAAM,IAAN;EAAA,CAAtC;;EAEA,eAAiC,IAAAC,iBAAA,EAAQ;IACrCC,MAAM,EAAE,SAD6B;IAErCC,OAAO,EAAE,iBAAAC,OAAO;MAAA,OAAK;QACjBC,MAAM,EAAED,OAAO,CAACC,MAAR,MAAoBD,OAAO,CAACC,MAAR,CAAe;UAAEC,OAAO,EAAE;QAAX,CAAf,CADX;QAEjBC,IAAI,EAAEH,OAAO,CAACI,OAAR;MAFW,CAAL;IAAA,CAFqB;IAMrCC,IANqC,gBAMhCC,CANgC,EAM7BN,OAN6B,EAMpB;MACb,IAAI,OAAOL,MAAP,KAAkB,UAAtB,EAAkC;QAC9B,OAAOA,MAAM,CAACK,OAAO,CAACI,OAAR,EAAD,CAAb;MACH;IACJ;EAVoC,CAAR,CAAjC;EAAA;EAAA;EAAA,IAASD,IAAT,cAASA,IAAT;EAAA,IAAeF,MAAf,cAAeA,MAAf;EAAA,IAAyBI,IAAzB;;EAaA,IAAIF,IAAI,IAAI,CAACP,SAAS,CAACO,IAAD,CAAtB,EAA8B;IAC1B,OAAO,IAAP;EACH;;EAED,OAAOT,QAAQ,CAAC;IAAEa,UAAU,EAAEC,OAAO,CAACL,IAAD,CAArB;IAA6BF,MAAM,EAANA,MAA7B;IAAqCE,IAAI,EAAJA,IAArC;IAA2CE,IAAI,EAAJA;EAA3C,CAAD,CAAf;AACH,CArBD;;AAuBO,IAAMI,SAAmC,gBAAGC,KAAK,CAACC,IAAN,CAAWnB,kBAAX,CAA5C"}
+{"version":3,"names":["DroppableComponent","props","children","onDrop","isVisible","useDrop","accept","collect","monitor","isOver","shallow","item","getItem","drop","isDroppable","isDragging","Boolean","Droppable","React","memo"],"sources":["Droppable.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { ConnectDropTarget, useDrop } from \"react-dnd\";\nimport { DragSource } from \"~/admin/components/FieldEditor/FieldEditorContext\";\n\nexport interface DroppableChildrenFunctionParams {\n    isDragging: boolean;\n    isDroppable: boolean;\n    isOver: boolean;\n    item: any;\n    drop: ConnectDropTarget;\n}\nexport interface DroppableChildrenFunction {\n    (params: DroppableChildrenFunctionParams): React.ReactElement;\n}\n\ninterface IsVisibleParams {\n    type: \"row\" | \"field\" | \"newField\";\n    item: any;\n    isDragging: boolean;\n}\nexport interface IsVisibleCallable {\n    (params: IsVisibleParams): boolean;\n}\nexport interface OnDropCallable {\n    (item: DragSource): void;\n}\nexport interface DroppableProps {\n    type?: string;\n    children: DroppableChildrenFunction;\n    isDragging?: boolean;\n    isDroppable?: (item: any) => boolean;\n    isVisible?: IsVisibleCallable;\n    onDrop?: OnDropCallable;\n}\n\nconst DroppableComponent: React.FC<DroppableProps> = props => {\n    const { children, onDrop, isVisible = () => true } = props;\n\n    const [{ item, isOver }, drop] = useDrop({\n        accept: \"element\",\n        collect: monitor => ({\n            isOver: monitor.isOver() && monitor.isOver({ shallow: true }),\n            item: monitor.getItem()\n        }),\n        drop(item, monitor) {\n            if (typeof props.isDroppable === \"function\" && !props.isDroppable(item)) {\n                return;\n            }\n\n            if (typeof onDrop === \"function\") {\n                return onDrop(monitor.getItem());\n            }\n        }\n    });\n\n    if (item && !isVisible(item)) {\n        return null;\n    }\n\n    let isDroppable = true;\n    if (item) {\n        isDroppable = props.isDroppable ? props.isDroppable(item) : isOver;\n    }\n\n    return children({ isDragging: Boolean(item), isOver, isDroppable, item, drop });\n};\n\nexport const Droppable: React.FC<DroppableProps> = React.memo(DroppableComponent);\n"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AAkCA,IAAMA,kBAA4C,GAAG,SAA/CA,kBAA+C,CAAAC,KAAK,EAAI;EAC1D,IAAQC,QAAR,GAAqDD,KAArD,CAAQC,QAAR;EAAA,IAAkBC,MAAlB,GAAqDF,KAArD,CAAkBE,MAAlB;EAAA,uBAAqDF,KAArD,CAA0BG,SAA1B;EAAA,IAA0BA,SAA1B,iCAAsC;IAAA,OAAM,IAAN;EAAA,CAAtC;;EAEA,eAAiC,IAAAC,iBAAA,EAAQ;IACrCC,MAAM,EAAE,SAD6B;IAErCC,OAAO,EAAE,iBAAAC,OAAO;MAAA,OAAK;QACjBC,MAAM,EAAED,OAAO,CAACC,MAAR,MAAoBD,OAAO,CAACC,MAAR,CAAe;UAAEC,OAAO,EAAE;QAAX,CAAf,CADX;QAEjBC,IAAI,EAAEH,OAAO,CAACI,OAAR;MAFW,CAAL;IAAA,CAFqB;IAMrCC,IANqC,gBAMhCF,IANgC,EAM1BH,OAN0B,EAMjB;MAChB,IAAI,OAAOP,KAAK,CAACa,WAAb,KAA6B,UAA7B,IAA2C,CAACb,KAAK,CAACa,WAAN,CAAkBH,IAAlB,CAAhD,EAAyE;QACrE;MACH;;MAED,IAAI,OAAOR,MAAP,KAAkB,UAAtB,EAAkC;QAC9B,OAAOA,MAAM,CAACK,OAAO,CAACI,OAAR,EAAD,CAAb;MACH;IACJ;EAdoC,CAAR,CAAjC;EAAA;EAAA;EAAA,IAASD,IAAT,cAASA,IAAT;EAAA,IAAeF,MAAf,cAAeA,MAAf;EAAA,IAAyBI,IAAzB;;EAiBA,IAAIF,IAAI,IAAI,CAACP,SAAS,CAACO,IAAD,CAAtB,EAA8B;IAC1B,OAAO,IAAP;EACH;;EAED,IAAIG,WAAW,GAAG,IAAlB;;EACA,IAAIH,IAAJ,EAAU;IACNG,WAAW,GAAGb,KAAK,CAACa,WAAN,GAAoBb,KAAK,CAACa,WAAN,CAAkBH,IAAlB,CAApB,GAA8CF,MAA5D;EACH;;EAED,OAAOP,QAAQ,CAAC;IAAEa,UAAU,EAAEC,OAAO,CAACL,IAAD,CAArB;IAA6BF,MAAM,EAANA,MAA7B;IAAqCK,WAAW,EAAXA,WAArC;IAAkDH,IAAI,EAAJA,IAAlD;IAAwDE,IAAI,EAAJA;EAAxD,CAAD,CAAf;AACH,CA9BD;;AAgCO,IAAMI,SAAmC,gBAAGC,KAAK,CAACC,IAAN,CAAWnB,kBAAX,CAA5C"}

package/admin/components/FieldEditor/EditFieldDialog/AppearanceTab.d.ts

@@ -1,9 +1,3 @@
-import React from "react";
-import { CmsEditorField } from "../../../../types";
-import { FormRenderPropParams } from "@webiny/form";
-interface AppearanceTabProps {
-    field: CmsEditorField;
-    form: FormRenderPropParams;
-}
-declare const AppearanceTab: React.FC<AppearanceTabProps>;
+/// <reference types="react" />
+declare const AppearanceTab: () => JSX.Element;
 export default AppearanceTab;

package/admin/components/FieldEditor/EditFieldDialog/AppearanceTab.js

@@ -27,9 +27,13 @@ var _emotion = require("emotion");
 
 var _validation = require("@webiny/validation");
 
+var _hooks = require("../../../hooks");
+
+var _form = require("@webiny/form");
+
 var _templateObject, _templateObject2;
 
-var t = _i18n.i18n.ns("app-headless-cms/admin/views/components/editor/tabs/edit-field-dialog/appearance-tab");
+var t = _i18n.i18n.ns("app-headless-cms/admin/content-model-editor/tabs/appearance-tab");
 
 var style = {
   topLabel: /*#__PURE__*/(0, _emotion.css)({
@@ -44,13 +48,19 @@ var style = {
   }, "label:radioContainer;")
 };
 
-var AppearanceTab = function AppearanceTab(props) {
-  var field = props.field,
-      form = props.form;
+var AppearanceTab = function AppearanceTab() {
+  var _field$predefinedValu;
+
+  var form = (0, _form.useForm)();
+
+  var _useModelField = (0, _hooks.useModelField)(),
+      field = _useModelField.field,
+      fieldPlugin = _useModelField.fieldPlugin;
 
   var renderPlugins = _plugins.plugins.byType("cms-editor-field-renderer").filter(function (item) {
     return item.renderer.canUse({
-      field: field
+      field: field,
+      fieldPlugin: fieldPlugin
     });
   });
 
@@ -62,13 +72,15 @@ var AppearanceTab = function AppearanceTab(props) {
 
     if (currentlySelectedRenderAvailable) {
       return;
-    } else if (renderPlugins[0]) {
+    }
+
+    if (renderPlugins[0]) {
       form.setValue("renderer.name", renderPlugins[0].renderer.rendererName);
       return;
     }
 
     console.info("No renderers for field ".concat(field.fieldId, " found."), field);
-  });
+  }, [field.id, field.multipleValues, (_field$predefinedValu = field.predefinedValues) === null || _field$predefinedValu === void 0 ? void 0 : _field$predefinedValu.enabled]);
 
   if (renderPlugins.length === 0) {
     return /*#__PURE__*/_react.default.createElement(_Grid.Grid, null, /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
@@ -77,12 +89,11 @@ var AppearanceTab = function AppearanceTab(props) {
     }, t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["There are no components that can render this field."])))));
   }
 
-  var Bind = form.Bind;
   return /*#__PURE__*/_react.default.createElement(_Grid.Grid, null, /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
     span: 12
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: style.topLabel
-  }, t(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["Choose a component that will render the field:"])))), /*#__PURE__*/_react.default.createElement(Bind, {
+  }, t(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["Choose a component that will render the field:"])))), /*#__PURE__*/_react.default.createElement(_form.Bind, {
     name: "renderer.name",
     validate: _validation.validation.create("required")
   }, /*#__PURE__*/_react.default.createElement(_Radio.RadioGroup, null, function (_ref) {

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

@@ -1 +1 @@
-{"version":3,"names":["t","i18n","ns","style","topLabel","css","marginBottom","noComponentsMessage","textAlign","padding","radioContainer","AppearanceTab","props","field","form","renderPlugins","plugins","byType","filter","item","renderer","canUse","useEffect","currentlySelectedRenderAvailable","find","rendererName","name","setValue","console","info","fieldId","length","Bind","validation","create","onChange","getValue","map","description"],"sources":["AppearanceTab.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport { plugins } from \"@webiny/plugins\";\nimport { Grid, Cell } from \"@webiny/ui/Grid\";\nimport { CmsEditorField, CmsEditorFieldRendererPlugin } from \"~/types\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { Radio, RadioGroup } from \"@webiny/ui/Radio\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { css } from \"emotion\";\nimport { validation } from \"@webiny/validation\";\nimport { FormRenderPropParams } from \"@webiny/form\";\n\nconst t = i18n.ns(\n    \"app-headless-cms/admin/views/components/editor/tabs/edit-field-dialog/appearance-tab\"\n);\n\nconst style = {\n    topLabel: css({\n        marginBottom: 25\n    }),\n    noComponentsMessage: css({\n        textAlign: \"center\",\n        padding: 25\n    }),\n    radioContainer: css({\n        marginBottom: 10\n    })\n};\n\ninterface AppearanceTabProps {\n    field: CmsEditorField;\n    form: FormRenderPropParams;\n}\nconst AppearanceTab: React.FC<AppearanceTabProps> = props => {\n    const { field, form } = props;\n\n    const renderPlugins = plugins\n        .byType<CmsEditorFieldRendererPlugin>(\"cms-editor-field-renderer\")\n        .filter(item => item.renderer.canUse({ field }));\n\n    useEffect((): void => {\n        // If the currently selected render plugin is no longer available, select the first available one.\n        const currentlySelectedRenderAvailable = renderPlugins.find(\n            item => item.renderer.rendererName === field.renderer.name\n        );\n        if (currentlySelectedRenderAvailable) {\n            return;\n        } else if (renderPlugins[0]) {\n            form.setValue(\"renderer.name\", renderPlugins[0].renderer.rendererName);\n            return;\n        }\n        console.info(`No renderers for field ${field.fieldId} found.`, field);\n    });\n\n    if (renderPlugins.length === 0) {\n        return (\n            <Grid>\n                <Cell\n                    span={12}\n                    className={style.noComponentsMessage}\n                >{t`There are no components that can render this field.`}</Cell>\n            </Grid>\n        );\n    }\n\n    const { Bind } = form;\n\n    return (\n        <Grid>\n            <Cell span={12}>\n                <div\n                    className={style.topLabel}\n                >{t`Choose a component that will render the field:`}</div>\n                <Bind name={\"renderer.name\"} validate={validation.create(\"required\")}>\n                    <RadioGroup>\n                        {({ onChange, getValue }) => (\n                            <React.Fragment>\n                                {renderPlugins.map(item => (\n                                    <div key={item.name} className={style.radioContainer}>\n                                        <Radio\n                                            value={getValue(item.renderer.rendererName)}\n                                            onChange={onChange(item.renderer.rendererName)}\n                                            label={\n                                                <>\n                                                    <div>{item.renderer.name}</div>\n                                                    <div>\n                                                        <Typography use={\"caption\"}>\n                                                            {item.renderer.description}\n                                                        </Typography>\n                                                    </div>\n                                                </>\n                                            }\n                                        />\n                                    </div>\n                                ))}\n                            </React.Fragment>\n                        )}\n                    </RadioGroup>\n                </Bind>\n            </Cell>\n        </Grid>\n    );\n};\n\nexport default AppearanceTab;\n"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;;;AAGA,IAAMA,CAAC,GAAGC,UAAA,CAAKC,EAAL,CACN,sFADM,CAAV;;AAIA,IAAMC,KAAK,GAAG;EACVC,QAAQ,eAAE,IAAAC,YAAA,EAAI;IACVC,YAAY,EAAE;EADJ,CAAJ,oBADA;EAIVC,mBAAmB,eAAE,IAAAF,YAAA,EAAI;IACrBG,SAAS,EAAE,QADU;IAErBC,OAAO,EAAE;EAFY,CAAJ,+BAJX;EAQVC,cAAc,eAAE,IAAAL,YAAA,EAAI;IAChBC,YAAY,EAAE;EADE,CAAJ;AARN,CAAd;;AAiBA,IAAMK,aAA2C,GAAG,SAA9CA,aAA8C,CAAAC,KAAK,EAAI;EACzD,IAAQC,KAAR,GAAwBD,KAAxB,CAAQC,KAAR;EAAA,IAAeC,IAAf,GAAwBF,KAAxB,CAAeE,IAAf;;EAEA,IAAMC,aAAa,GAAGC,gBAAA,CACjBC,MADiB,CACoB,2BADpB,EAEjBC,MAFiB,CAEV,UAAAC,IAAI;IAAA,OAAIA,IAAI,CAACC,QAAL,CAAcC,MAAd,CAAqB;MAAER,KAAK,EAALA;IAAF,CAArB,CAAJ;EAAA,CAFM,CAAtB;;EAIA,IAAAS,gBAAA,EAAU,YAAY;IAClB;IACA,IAAMC,gCAAgC,GAAGR,aAAa,CAACS,IAAd,CACrC,UAAAL,IAAI;MAAA,OAAIA,IAAI,CAACC,QAAL,CAAcK,YAAd,KAA+BZ,KAAK,CAACO,QAAN,CAAeM,IAAlD;IAAA,CADiC,CAAzC;;IAGA,IAAIH,gCAAJ,EAAsC;MAClC;IACH,CAFD,MAEO,IAAIR,aAAa,CAAC,CAAD,CAAjB,EAAsB;MACzBD,IAAI,CAACa,QAAL,CAAc,eAAd,EAA+BZ,aAAa,CAAC,CAAD,CAAb,CAAiBK,QAAjB,CAA0BK,YAAzD;MACA;IACH;;IACDG,OAAO,CAACC,IAAR,kCAAuChB,KAAK,CAACiB,OAA7C,cAA+DjB,KAA/D;EACH,CAZD;;EAcA,IAAIE,aAAa,CAACgB,MAAd,KAAyB,CAA7B,EAAgC;IAC5B,oBACI,6BAAC,UAAD,qBACI,6BAAC,UAAD;MACI,IAAI,EAAE,EADV;MAEI,SAAS,EAAE5B,KAAK,CAACI;IAFrB,GAGEP,CAHF,uIADJ,CADJ;EAQH;;EAED,IAAQgC,IAAR,GAAiBlB,IAAjB,CAAQkB,IAAR;EAEA,oBACI,6BAAC,UAAD,qBACI,6BAAC,UAAD;IAAM,IAAI,EAAE;EAAZ,gBACI;IACI,SAAS,EAAE7B,KAAK,CAACC;EADrB,GAEEJ,CAFF,oIADJ,eAII,6BAAC,IAAD;IAAM,IAAI,EAAE,eAAZ;IAA6B,QAAQ,EAAEiC,sBAAA,CAAWC,MAAX,CAAkB,UAAlB;EAAvC,gBACI,6BAAC,iBAAD,QACK;IAAA,IAAGC,QAAH,QAAGA,QAAH;IAAA,IAAaC,QAAb,QAAaA,QAAb;IAAA,oBACG,6BAAC,cAAD,CAAO,QAAP,QACKrB,aAAa,CAACsB,GAAd,CAAkB,UAAAlB,IAAI;MAAA,oBACnB;QAAK,GAAG,EAAEA,IAAI,CAACO,IAAf;QAAqB,SAAS,EAAEvB,KAAK,CAACO;MAAtC,gBACI,6BAAC,YAAD;QACI,KAAK,EAAE0B,QAAQ,CAACjB,IAAI,CAACC,QAAL,CAAcK,YAAf,CADnB;QAEI,QAAQ,EAAEU,QAAQ,CAAChB,IAAI,CAACC,QAAL,CAAcK,YAAf,CAFtB;QAGI,KAAK,eACD,yEACI,0CAAMN,IAAI,CAACC,QAAL,CAAcM,IAApB,CADJ,eAEI,uDACI,6BAAC,sBAAD;UAAY,GAAG,EAAE;QAAjB,GACKP,IAAI,CAACC,QAAL,CAAckB,WADnB,CADJ,CAFJ;MAJR,EADJ,CADmB;IAAA,CAAtB,CADL,CADH;EAAA,CADL,CADJ,CAJJ,CADJ,CADJ;AAmCH,CArED;;eAuEe3B,a"}
+{"version":3,"names":["t","i18n","ns","style","topLabel","css","marginBottom","noComponentsMessage","textAlign","padding","radioContainer","AppearanceTab","form","useForm","useModelField","field","fieldPlugin","renderPlugins","plugins","byType","filter","item","renderer","canUse","useEffect","currentlySelectedRenderAvailable","find","rendererName","name","setValue","console","info","fieldId","id","multipleValues","predefinedValues","enabled","length","validation","create","onChange","getValue","map","description"],"sources":["AppearanceTab.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport { plugins } from \"@webiny/plugins\";\nimport { Grid, Cell } from \"@webiny/ui/Grid\";\nimport { CmsModelField, CmsEditorFieldRendererPlugin } from \"~/types\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { Radio, RadioGroup } from \"@webiny/ui/Radio\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { css } from \"emotion\";\nimport { validation } from \"@webiny/validation\";\nimport { useModelField } from \"~/admin/hooks\";\nimport { useForm, Bind } from \"@webiny/form\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/content-model-editor/tabs/appearance-tab\");\n\nconst style = {\n    topLabel: css({\n        marginBottom: 25\n    }),\n    noComponentsMessage: css({\n        textAlign: \"center\",\n        padding: 25\n    }),\n    radioContainer: css({\n        marginBottom: 10\n    })\n};\n\nconst AppearanceTab = () => {\n    const form = useForm<CmsModelField>();\n    const { field, fieldPlugin } = useModelField();\n\n    const renderPlugins = plugins\n        .byType<CmsEditorFieldRendererPlugin>(\"cms-editor-field-renderer\")\n        .filter(item => item.renderer.canUse({ field, fieldPlugin }));\n\n    useEffect((): void => {\n        // If the currently selected render plugin is no longer available, select the first available one.\n        const currentlySelectedRenderAvailable = renderPlugins.find(\n            item => item.renderer.rendererName === field.renderer.name\n        );\n\n        if (currentlySelectedRenderAvailable) {\n            return;\n        }\n\n        if (renderPlugins[0]) {\n            form.setValue(\"renderer.name\", renderPlugins[0].renderer.rendererName);\n            return;\n        }\n\n        console.info(`No renderers for field ${field.fieldId} found.`, field);\n    }, [field.id, field.multipleValues, field.predefinedValues?.enabled]);\n\n    if (renderPlugins.length === 0) {\n        return (\n            <Grid>\n                <Cell\n                    span={12}\n                    className={style.noComponentsMessage}\n                >{t`There are no components that can render this field.`}</Cell>\n            </Grid>\n        );\n    }\n\n    return (\n        <Grid>\n            <Cell span={12}>\n                <div\n                    className={style.topLabel}\n                >{t`Choose a component that will render the field:`}</div>\n                <Bind name={\"renderer.name\"} validate={validation.create(\"required\")}>\n                    <RadioGroup>\n                        {({ onChange, getValue }) => (\n                            <React.Fragment>\n                                {renderPlugins.map(item => (\n                                    <div key={item.name} className={style.radioContainer}>\n                                        <Radio\n                                            value={getValue(item.renderer.rendererName)}\n                                            onChange={onChange(item.renderer.rendererName)}\n                                            label={\n                                                <>\n                                                    <div>{item.renderer.name}</div>\n                                                    <div>\n                                                        <Typography use={\"caption\"}>\n                                                            {item.renderer.description}\n                                                        </Typography>\n                                                    </div>\n                                                </>\n                                            }\n                                        />\n                                    </div>\n                                ))}\n                            </React.Fragment>\n                        )}\n                    </RadioGroup>\n                </Bind>\n            </Cell>\n        </Grid>\n    );\n};\n\nexport default AppearanceTab;\n"],"mappings":"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"}

package/admin/components/FieldEditor/EditFieldDialog/GeneralTab.d.ts

@@ -1,10 +1,3 @@
-import React from "react";
-import { CmsEditorField, CmsEditorFieldTypePlugin } from "../../../../types";
-import { FormRenderPropParams } from "@webiny/form/types";
-interface GeneralTabProps {
-    field: CmsEditorField;
-    form: FormRenderPropParams;
-    fieldPlugin: CmsEditorFieldTypePlugin;
-}
-declare const GeneralTab: React.FC<GeneralTabProps>;
+/// <reference types="react" />
+declare const GeneralTab: () => JSX.Element;
 export default GeneralTab;

package/admin/components/FieldEditor/EditFieldDialog/GeneralTab.js

@@ -21,23 +21,28 @@ var _Grid = require("@webiny/ui/Grid");
 
 var _validation = require("@webiny/validation");
 
+var _Tags = require("@webiny/ui/Tags");
+
+var _form = require("@webiny/form");
+
 var _ = require("./..");
 
-var _useContentModelEditor = require("../../ContentModelEditor/useContentModelEditor");
+var _hooks = require("../../../hooks");
+
+var GeneralTab = function GeneralTab() {
+  var form = (0, _form.useForm)();
+
+  var _useModelField = (0, _hooks.useModelField)(),
+      field = _useModelField.field,
+      fieldPlugin = _useModelField.fieldPlugin;
 
-var GeneralTab = function GeneralTab(_ref) {
-  var field = _ref.field,
-      form = _ref.form,
-      fieldPlugin = _ref.fieldPlugin;
-  var Bind = form.Bind,
-      setValue = form.setValue;
   var inputRef = (0, _react.useRef)(null);
 
-  var _useContentModelEdito = (0, _useContentModelEditor.useContentModelEditor)(),
-      contentModel = _useContentModelEdito.data;
+  var _useModelEditor = (0, _hooks.useModelEditor)(),
+      contentModel = _useModelEditor.data;
 
-  var _useFieldEditor = (0, _.useFieldEditor)(),
-      getField = _useFieldEditor.getField; // Had problems with auto-focusing the "label" field. A couple of comments on this.
+  var _useModelFieldEditor = (0, _.useModelFieldEditor)(),
+      getField = _useModelFieldEditor.getField; // Had problems with auto-focusing the "label" field. A couple of comments on this.
   // 1. It's probably caused by the Tabs component which wraps this component.
   // 2. It seems that the "autoFocus" prop on the Input doesn't work. I can't see it attached in the actual DOM.
   // 3. This works, but it's not 100%. Visually, the cursor is frozen, and that's probably caused by a bug / design
@@ -52,14 +57,15 @@ var GeneralTab = function GeneralTab(_ref) {
       }
 
       inputRef.current.focus();
-    }, 200);
+    },
+    /* The value of 400 was determined by manual testing. */
+    400);
   }, []);
   var afterChangeLabel = (0, _react.useCallback)(function (value) {
-    setValue("fieldId", (0, _camelCase2.default)(value));
+    form.setValue("fieldId", (0, _camelCase2.default)(value));
   }, []);
   var beforeChangeFieldId = (0, _react.useCallback)(function (value, baseOnChange) {
-    var newValue = value.trim();
-    baseOnChange(newValue);
+    baseOnChange(value.trim());
   }, []);
   var fieldIdValidator = (0, _react.useCallback)(function (fieldId) {
     if (fieldId.trim().toLowerCase() !== "id") {
@@ -87,7 +93,6 @@ var GeneralTab = function GeneralTab(_ref) {
 
   if (typeof fieldPlugin.field.renderSettings === "function") {
     additionalSettings = fieldPlugin.field.renderSettings({
-      form: form,
       afterChangeLabel: afterChangeLabel,
       uniqueFieldIdValidator: uniqueFieldIdValidator,
       contentModel: contentModel
@@ -99,7 +104,7 @@ var GeneralTab = function GeneralTab(_ref) {
   }, [field.fieldId]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Grid.Grid, null, /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
     span: 6
-  }, /*#__PURE__*/_react.default.createElement(Bind, {
+  }, /*#__PURE__*/_react.default.createElement(_form.Bind, {
     name: "label",
     validators: _validation.validation.create("required"),
     afterChange: function afterChange(value) {
@@ -115,7 +120,7 @@ var GeneralTab = function GeneralTab(_ref) {
     "data-testid": "cms.editor.field.settings.general.label"
   }))), /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
     span: 6
-  }, /*#__PURE__*/_react.default.createElement(Bind, {
+  }, /*#__PURE__*/_react.default.createElement(_form.Bind, {
     name: "fieldId",
     validators: [_validation.validation.create("required"), uniqueFieldIdValidator, fieldIdValidator],
     beforeChange: beforeChangeFieldId
@@ -124,7 +129,7 @@ var GeneralTab = function GeneralTab(_ref) {
     "data-testid": "cms.editor.field.settings.general.label-".concat(field.id)
   }))), /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
     span: 6
-  }, /*#__PURE__*/_react.default.createElement(Bind, {
+  }, /*#__PURE__*/_react.default.createElement(_form.Bind, {
     name: "multipleValues"
   }, /*#__PURE__*/_react.default.createElement(_Switch.Switch, {
     label: fieldPlugin.field.multipleValuesLabel,
@@ -132,7 +137,7 @@ var GeneralTab = function GeneralTab(_ref) {
     "data-testid": "cms.editor.field.settings.general.switch-multiplevalues"
   }))), /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
     span: 6
-  }, /*#__PURE__*/_react.default.createElement(Bind, {
+  }, /*#__PURE__*/_react.default.createElement(_form.Bind, {
     name: "predefinedValues.enabled"
   }, /*#__PURE__*/_react.default.createElement(_Switch.Switch, {
     label: "Use predefined values",
@@ -140,12 +145,21 @@ var GeneralTab = function GeneralTab(_ref) {
     "data-testid": "cms.editor.field.settings.general.switch-predefinedvalues"
   }))), /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
     span: 12
-  }, /*#__PURE__*/_react.default.createElement(Bind, {
+  }, /*#__PURE__*/_react.default.createElement(_form.Bind, {
     name: "helpText"
   }, /*#__PURE__*/_react.default.createElement(_Input.Input, {
     label: "Help text",
     description: "Help text (optional)",
     "data-testid": "cms.editor.field.settings.general.helptext"
+  }))), /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
+    span: 12
+  }, /*#__PURE__*/_react.default.createElement(_form.Bind, {
+    name: "tags"
+  }, /*#__PURE__*/_react.default.createElement(_Tags.Tags, {
+    label: "Tags",
+    protectedTags: fieldPlugin.field.tags,
+    description: "Field tags (optional)",
+    "data-testid": "cms.editor.field.settings.general.tags"
   })))), additionalSettings);
 };