@webiny/app-headless-cms 6.0.0-beta.0 → 6.0.0-rc.0

package/admin/components/Droppable.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
-import { ConnectDropTarget } from "react-dnd";
-import { DragSource } from "../../types";
+import type { ConnectDropTarget } from "react-dnd";
+import type { DragSource } from "../../types.js";
 export interface DroppableChildrenFunctionParams {
     isDragging: boolean;
     isDroppable: boolean;
@@ -30,7 +30,7 @@ export interface DroppableProps {
     isVisible?: IsVisibleCallable;
     onDrop?: OnDropCallable;
 }
-export declare type DragObject = {
+export type DragObject = {
     item: IsVisibleParams;
     isOver: boolean;
 };

package/admin/components/Droppable.js

@@ -1,60 +1,46 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Droppable = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var React = _interopRequireWildcard(require("react"));
-var _reactDnd = require("react-dnd");
-var DroppableComponent = function DroppableComponent(props) {
-  var children = props.children,
-    onDrop = props.onDrop,
-    _props$isVisible = props.isVisible,
-    isVisible = _props$isVisible === void 0 ? function () {
-      return true;
-    } : _props$isVisible;
-  var _useDrop = (0, _reactDnd.useDrop)({
-      accept: "element",
-      collect: function collect(monitor) {
-        return {
-          isOver: monitor.isOver() && monitor.isOver({
-            shallow: true
-          }),
-          item: monitor.getItem()
-        };
-      },
-      drop: function drop(item, monitor) {
-        if (typeof props.isDroppable === "function" && !props.isDroppable(item)) {
-          return;
-        }
-        if (typeof onDrop === "function") {
-          return onDrop(monitor.getItem());
-        }
-      }
+import * as React from "react";
+import { useDrop } from "react-dnd";
+const DroppableComponent = props => {
+  const {
+    children,
+    onDrop,
+    isVisible = () => true
+  } = props;
+  const [{
+    item,
+    isOver
+  }, drop] = useDrop({
+    accept: "element",
+    collect: monitor => ({
+      isOver: monitor.isOver() && monitor.isOver({
+        shallow: true
+      }),
+      item: monitor.getItem()
     }),
-    _useDrop2 = (0, _slicedToArray2.default)(_useDrop, 2),
-    _useDrop2$ = _useDrop2[0],
-    item = _useDrop2$.item,
-    isOver = _useDrop2$.isOver,
-    drop = _useDrop2[1];
+    drop(item, monitor) {
+      if (typeof props.isDroppable === "function" && !props.isDroppable(item)) {
+        return;
+      }
+      if (typeof onDrop === "function") {
+        return onDrop(monitor.getItem());
+      }
+    }
+  });
   if (item && !isVisible(item)) {
     return null;
   }
-  var isDroppable = true;
+  let isDroppable = true;
   if (item) {
     isDroppable = props.isDroppable ? props.isDroppable(item) : isOver;
   }
   return children({
     isDragging: Boolean(item),
-    isOver: isOver,
-    isDroppable: isDroppable,
-    item: item,
-    drop: drop
+    isOver,
+    isDroppable,
+    item,
+    drop
   });
 };
-var Droppable = exports.Droppable = /*#__PURE__*/React.memo(DroppableComponent);
+export const Droppable = /*#__PURE__*/React.memo(DroppableComponent);
 
 //# sourceMappingURL=Droppable.js.map

package/admin/components/Droppable.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","_interopRequireWildcard","require","_reactDnd","DroppableComponent","props","children","onDrop","_props$isVisible","isVisible","_useDrop","useDrop","accept","collect","monitor","isOver","shallow","item","getItem","drop","isDroppable","_useDrop2","_slicedToArray2","default","_useDrop2$","isDragging","Boolean","Droppable","exports","memo"],"sources":["Droppable.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { ConnectDropTarget, useDrop } from \"react-dnd\";\nimport { DragSource } from \"~/types\";\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: DragSource;\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: DragSource) => boolean;\n    isVisible?: IsVisibleCallable;\n    onDrop?: OnDropCallable;\n}\n\nexport type DragObject = {\n    item: IsVisibleParams;\n    isOver: boolean;\n};\n\nconst DroppableComponent = (props: DroppableProps) => {\n    const { children, onDrop, isVisible = () => true } = props;\n\n    const [{ item, isOver }, drop] = useDrop<DragSource, void, DragObject>({\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.ComponentType<DroppableProps> = React.memo(DroppableComponent);\n"],"mappings":";;;;;;;;;AAAA,IAAAA,KAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,SAAA,GAAAD,OAAA;AAuCA,IAAME,kBAAkB,GAAG,SAArBA,kBAAkBA,CAAIC,KAAqB,EAAK;EAClD,IAAQC,QAAQ,GAAqCD,KAAK,CAAlDC,QAAQ;IAAEC,MAAM,GAA6BF,KAAK,CAAxCE,MAAM;IAAAC,gBAAA,GAA6BH,KAAK,CAAhCI,SAAS;IAATA,SAAS,GAAAD,gBAAA,cAAG;MAAA,OAAM,IAAI;IAAA,IAAAA,gBAAA;EAEhD,IAAAE,QAAA,GAAiC,IAAAC,iBAAO,EAA+B;MACnEC,MAAM,EAAE,SAAS;MACjBC,OAAO,EAAE,SAAAA,QAAAC,OAAO;QAAA,OAAK;UACjBC,MAAM,EAAED,OAAO,CAACC,MAAM,CAAC,CAAC,IAAID,OAAO,CAACC,MAAM,CAAC;YAAEC,OAAO,EAAE;UAAK,CAAC,CAAC;UAC7DC,IAAI,EAAEH,OAAO,CAACI,OAAO,CAAC;QAC1B,CAAC;MAAA,CAAC;MACFC,IAAI,WAAAA,KAACF,IAAI,EAAEH,OAAO,EAAE;QAChB,IAAI,OAAOT,KAAK,CAACe,WAAW,KAAK,UAAU,IAAI,CAACf,KAAK,CAACe,WAAW,CAACH,IAAI,CAAC,EAAE;UACrE;QACJ;QAEA,IAAI,OAAOV,MAAM,KAAK,UAAU,EAAE;UAC9B,OAAOA,MAAM,CAACO,OAAO,CAACI,OAAO,CAAC,CAAC,CAAC;QACpC;MACJ;IACJ,CAAC,CAAC;IAAAG,SAAA,OAAAC,eAAA,CAAAC,OAAA,EAAAb,QAAA;IAAAc,UAAA,GAAAH,SAAA;IAfOJ,IAAI,GAAAO,UAAA,CAAJP,IAAI;IAAEF,MAAM,GAAAS,UAAA,CAANT,MAAM;IAAII,IAAI,GAAAE,SAAA;EAiB7B,IAAIJ,IAAI,IAAI,CAACR,SAAS,CAACQ,IAAI,CAAC,EAAE;IAC1B,OAAO,IAAI;EACf;EAEA,IAAIG,WAAW,GAAG,IAAI;EACtB,IAAIH,IAAI,EAAE;IACNG,WAAW,GAAGf,KAAK,CAACe,WAAW,GAAGf,KAAK,CAACe,WAAW,CAACH,IAAI,CAAC,GAAGF,MAAM;EACtE;EAEA,OAAOT,QAAQ,CAAC;IAAEmB,UAAU,EAAEC,OAAO,CAACT,IAAI,CAAC;IAAEF,MAAM,EAANA,MAAM;IAAEK,WAAW,EAAXA,WAAW;IAAEH,IAAI,EAAJA,IAAI;IAAEE,IAAI,EAAJA;EAAK,CAAC,CAAC;AACnF,CAAC;AAEM,IAAMQ,SAA8C,GAAAC,OAAA,CAAAD,SAAA,gBAAG3B,KAAK,CAAC6B,IAAI,CAACzB,kBAAkB,CAAC","ignoreList":[]}
+{"version":3,"names":["React","useDrop","DroppableComponent","props","children","onDrop","isVisible","item","isOver","drop","accept","collect","monitor","shallow","getItem","isDroppable","isDragging","Boolean","Droppable","memo"],"sources":["Droppable.tsx"],"sourcesContent":["import * as React from \"react\";\nimport type { ConnectDropTarget } from \"react-dnd\";\nimport { useDrop } from \"react-dnd\";\nimport type { DragSource } from \"~/types.js\";\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: DragSource;\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: DragSource) => boolean;\n    isVisible?: IsVisibleCallable;\n    onDrop?: OnDropCallable;\n}\n\nexport type DragObject = {\n    item: IsVisibleParams;\n    isOver: boolean;\n};\n\nconst DroppableComponent = (props: DroppableProps) => {\n    const { children, onDrop, isVisible = () => true } = props;\n\n    const [{ item, isOver }, drop] = useDrop<DragSource, void, DragObject>({\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.ComponentType<DroppableProps> = React.memo(DroppableComponent);\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAE9B,SAASC,OAAO,QAAQ,WAAW;AAuCnC,MAAMC,kBAAkB,GAAIC,KAAqB,IAAK;EAClD,MAAM;IAAEC,QAAQ;IAAEC,MAAM;IAAEC,SAAS,GAAGA,CAAA,KAAM;EAAK,CAAC,GAAGH,KAAK;EAE1D,MAAM,CAAC;IAAEI,IAAI;IAAEC;EAAO,CAAC,EAAEC,IAAI,CAAC,GAAGR,OAAO,CAA+B;IACnES,MAAM,EAAE,SAAS;IACjBC,OAAO,EAAEC,OAAO,KAAK;MACjBJ,MAAM,EAAEI,OAAO,CAACJ,MAAM,CAAC,CAAC,IAAII,OAAO,CAACJ,MAAM,CAAC;QAAEK,OAAO,EAAE;MAAK,CAAC,CAAC;MAC7DN,IAAI,EAAEK,OAAO,CAACE,OAAO,CAAC;IAC1B,CAAC,CAAC;IACFL,IAAIA,CAACF,IAAI,EAAEK,OAAO,EAAE;MAChB,IAAI,OAAOT,KAAK,CAACY,WAAW,KAAK,UAAU,IAAI,CAACZ,KAAK,CAACY,WAAW,CAACR,IAAI,CAAC,EAAE;QACrE;MACJ;MAEA,IAAI,OAAOF,MAAM,KAAK,UAAU,EAAE;QAC9B,OAAOA,MAAM,CAACO,OAAO,CAACE,OAAO,CAAC,CAAC,CAAC;MACpC;IACJ;EACJ,CAAC,CAAC;EAEF,IAAIP,IAAI,IAAI,CAACD,SAAS,CAACC,IAAI,CAAC,EAAE;IAC1B,OAAO,IAAI;EACf;EAEA,IAAIQ,WAAW,GAAG,IAAI;EACtB,IAAIR,IAAI,EAAE;IACNQ,WAAW,GAAGZ,KAAK,CAACY,WAAW,GAAGZ,KAAK,CAACY,WAAW,CAACR,IAAI,CAAC,GAAGC,MAAM;EACtE;EAEA,OAAOJ,QAAQ,CAAC;IAAEY,UAAU,EAAEC,OAAO,CAACV,IAAI,CAAC;IAAEC,MAAM;IAAEO,WAAW;IAAER,IAAI;IAAEE;EAAK,CAAC,CAAC;AACnF,CAAC;AAED,OAAO,MAAMS,SAA8C,gBAAGlB,KAAK,CAACmB,IAAI,CAACjB,kBAAkB,CAAC","ignoreList":[]}

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

@@ -1,17 +1,10 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.LegacyRichTextInput = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Alert = require("@webiny/ui/Alert");
-var LegacyRichTextInput = exports.LegacyRichTextInput = function LegacyRichTextInput() {
-  return /*#__PURE__*/_react.default.createElement(_Alert.Alert, {
+import React from "react";
+import { Alert } from "@webiny/ui/Alert/index.js";
+export const LegacyRichTextInput = () => {
+  return /*#__PURE__*/React.createElement(Alert, {
     title: "You have legacy editor enabled",
     type: "info"
-  }, "Your project has been upgraded from an older Webiny version, with EditorJS as the default rich text editor. We recommend switching to the new Lexical rich text editor, where possible.", /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), "Read more about this in our", " ", /*#__PURE__*/_react.default.createElement("a", {
+  }, "Your project has been upgraded from an older Webiny version, with EditorJS as the default rich text editor. We recommend switching to the new Lexical rich text editor, where possible.", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), "Read more about this in our", " ", /*#__PURE__*/React.createElement("a", {
     href: "https://webiny.link/hcms-legacy-rte-support",
     rel: "noreferrer",
     target: "_blank"

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_Alert","LegacyRichTextInput","exports","default","createElement","Alert","title","type","href","rel","target"],"sources":["LegacyRichTextInput.tsx"],"sourcesContent":["import React from \"react\";\nimport { Alert } from \"@webiny/ui/Alert\";\n\nexport const LegacyRichTextInput = () => {\n    return (\n        <Alert title={\"You have legacy editor enabled\"} type={\"info\"}>\n            Your project has been upgraded from an older Webiny version, with EditorJS as the\n            default rich text editor. We recommend switching to the new Lexical rich text editor,\n            where possible.\n            <br />\n            <br />\n            Read more about this in our{\" \"}\n            <a\n                href={\"https://webiny.link/hcms-legacy-rte-support\"}\n                rel=\"noreferrer\"\n                target={\"_blank\"}\n            >\n                upgrade guide\n            </a>\n            .\n        </Alert>\n    );\n};\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AAEO,IAAME,mBAAmB,GAAAC,OAAA,CAAAD,mBAAA,GAAG,SAAtBA,mBAAmBA,CAAA,EAAS;EACrC,oBACIJ,MAAA,CAAAM,OAAA,CAAAC,aAAA,CAACJ,MAAA,CAAAK,KAAK;IAACC,KAAK,EAAE,gCAAiC;IAACC,IAAI,EAAE;EAAO,GAAC,yLAI1D,eAAAV,MAAA,CAAAM,OAAA,CAAAC,aAAA,WAAK,CAAC,eACNP,MAAA,CAAAM,OAAA,CAAAC,aAAA,WAAK,CAAC,+BACqB,EAAC,GAAG,eAC/BP,MAAA,CAAAM,OAAA,CAAAC,aAAA;IACII,IAAI,EAAE,6CAA8C;IACpDC,GAAG,EAAC,YAAY;IAChBC,MAAM,EAAE;EAAS,GACpB,eAEE,CAAC,KAED,CAAC;AAEhB,CAAC","ignoreList":[]}
+{"version":3,"names":["React","Alert","LegacyRichTextInput","createElement","title","type","href","rel","target"],"sources":["LegacyRichTextInput.tsx"],"sourcesContent":["import React from \"react\";\nimport { Alert } from \"@webiny/ui/Alert/index.js\";\n\nexport const LegacyRichTextInput = () => {\n    return (\n        <Alert title={\"You have legacy editor enabled\"} type={\"info\"}>\n            Your project has been upgraded from an older Webiny version, with EditorJS as the\n            default rich text editor. We recommend switching to the new Lexical rich text editor,\n            where possible.\n            <br />\n            <br />\n            Read more about this in our{\" \"}\n            <a\n                href={\"https://webiny.link/hcms-legacy-rte-support\"}\n                rel=\"noreferrer\"\n                target={\"_blank\"}\n            >\n                upgrade guide\n            </a>\n            .\n        </Alert>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,KAAK,QAAQ,2BAA2B;AAEjD,OAAO,MAAMC,mBAAmB,GAAGA,CAAA,KAAM;EACrC,oBACIF,KAAA,CAAAG,aAAA,CAACF,KAAK;IAACG,KAAK,EAAE,gCAAiC;IAACC,IAAI,EAAE;EAAO,GAAC,yLAI1D,eAAAL,KAAA,CAAAG,aAAA,WAAK,CAAC,eACNH,KAAA,CAAAG,aAAA,WAAK,CAAC,+BACqB,EAAC,GAAG,eAC/BH,KAAA,CAAAG,aAAA;IACIG,IAAI,EAAE,6CAA8C;IACpDC,GAAG,EAAC,YAAY;IAChBC,MAAM,EAAE;EAAS,GACpB,eAEE,CAAC,KAED,CAAC;AAEhB,CAAC","ignoreList":[]}

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { CmsModelFieldRendererPlugin } from "@webiny/app-headless-cms-common/types";
+import type { CmsModelFieldRendererPlugin } from "@webiny/app-headless-cms-common/types/index.js";
 interface RendererOptionsProps {
     plugin: CmsModelFieldRendererPlugin | undefined;
 }

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

@@ -1,29 +1,28 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.RendererOptions = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _ModelFieldProvider = require("../../../ModelFieldProvider");
-var _Grid = require("@webiny/ui/Grid");
-var RendererOptions = exports.RendererOptions = function RendererOptions(_ref) {
-  var plugin = _ref.plugin;
-  var _useModelField = (0, _ModelFieldProvider.useModelField)(),
-    field = _useModelField.field;
+import React from "react";
+import { useModelField } from "../../../ModelFieldProvider/index.js";
+import { Grid, Heading, Text } from "@webiny/admin-ui";
+export const RendererOptions = ({
+  plugin
+}) => {
+  const {
+    field
+  } = useModelField();
   if (!plugin || !plugin.renderer.renderSettings) {
     return null;
   }
-  var settings = plugin.renderer.renderSettings({
-    field: field
+  const settings = plugin.renderer.renderSettings({
+    field
   });
   if (!settings) {
     return null;
   }
-  return /*#__PURE__*/_react.default.createElement(_Grid.Grid, null, /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Grid.Column, {
     span: 12
-  }, "Renderer Settings:"), settings);
+  }, /*#__PURE__*/React.createElement(Heading, {
+    level: 5
+  }, "Renderer settings"), /*#__PURE__*/React.createElement(Text, {
+    size: "sm"
+  }, "Configure additional settings for the selected field renderer.")), settings);
 };
 
 //# sourceMappingURL=RendererOptions.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_ModelFieldProvider","_Grid","RendererOptions","exports","_ref","plugin","_useModelField","useModelField","field","renderer","renderSettings","settings","default","createElement","Grid","Cell","span"],"sources":["RendererOptions.tsx"],"sourcesContent":["import React from \"react\";\nimport { CmsModelFieldRendererPlugin } from \"@webiny/app-headless-cms-common/types\";\nimport { useModelField } from \"~/admin/components/ModelFieldProvider\";\nimport { Cell, Grid } from \"@webiny/ui/Grid\";\n\ninterface RendererOptionsProps {\n    plugin: CmsModelFieldRendererPlugin | undefined;\n}\n\nexport const RendererOptions = ({ plugin }: RendererOptionsProps) => {\n    const { field } = useModelField();\n    if (!plugin || !plugin.renderer.renderSettings) {\n        return null;\n    }\n\n    const settings = plugin.renderer.renderSettings({ field });\n\n    if (!settings) {\n        return null;\n    }\n\n    return (\n        <Grid>\n            <Cell span={12}>Renderer Settings:</Cell>\n            {settings}\n        </Grid>\n    );\n};\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,mBAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AAMO,IAAMG,eAAe,GAAAC,OAAA,CAAAD,eAAA,GAAG,SAAlBA,eAAeA,CAAAE,IAAA,EAAyC;EAAA,IAAnCC,MAAM,GAAAD,IAAA,CAANC,MAAM;EACpC,IAAAC,cAAA,GAAkB,IAAAC,iCAAa,EAAC,CAAC;IAAzBC,KAAK,GAAAF,cAAA,CAALE,KAAK;EACb,IAAI,CAACH,MAAM,IAAI,CAACA,MAAM,CAACI,QAAQ,CAACC,cAAc,EAAE;IAC5C,OAAO,IAAI;EACf;EAEA,IAAMC,QAAQ,GAAGN,MAAM,CAACI,QAAQ,CAACC,cAAc,CAAC;IAAEF,KAAK,EAALA;EAAM,CAAC,CAAC;EAE1D,IAAI,CAACG,QAAQ,EAAE;IACX,OAAO,IAAI;EACf;EAEA,oBACId,MAAA,CAAAe,OAAA,CAAAC,aAAA,CAACZ,KAAA,CAAAa,IAAI,qBACDjB,MAAA,CAAAe,OAAA,CAAAC,aAAA,CAACZ,KAAA,CAAAc,IAAI;IAACC,IAAI,EAAE;EAAG,GAAC,oBAAwB,CAAC,EACxCL,QACC,CAAC;AAEf,CAAC","ignoreList":[]}
+{"version":3,"names":["React","useModelField","Grid","Heading","Text","RendererOptions","plugin","field","renderer","renderSettings","settings","createElement","Fragment","Column","span","level","size"],"sources":["RendererOptions.tsx"],"sourcesContent":["import React from \"react\";\nimport type { CmsModelFieldRendererPlugin } from \"@webiny/app-headless-cms-common/types/index.js\";\nimport { useModelField } from \"~/admin/components/ModelFieldProvider/index.js\";\nimport { Grid, Heading, Text } from \"@webiny/admin-ui\";\n\ninterface RendererOptionsProps {\n    plugin: CmsModelFieldRendererPlugin | undefined;\n}\n\nexport const RendererOptions = ({ plugin }: RendererOptionsProps) => {\n    const { field } = useModelField();\n    if (!plugin || !plugin.renderer.renderSettings) {\n        return null;\n    }\n\n    const settings = plugin.renderer.renderSettings({ field });\n\n    if (!settings) {\n        return null;\n    }\n\n    return (\n        <>\n            <Grid.Column span={12}>\n                <Heading level={5}>Renderer settings</Heading>\n                <Text size={\"sm\"}>\n                    Configure additional settings for the selected field renderer.\n                </Text>\n            </Grid.Column>\n            {settings}\n        </>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,aAAa;AACtB,SAASC,IAAI,EAAEC,OAAO,EAAEC,IAAI,QAAQ,kBAAkB;AAMtD,OAAO,MAAMC,eAAe,GAAGA,CAAC;EAAEC;AAA6B,CAAC,KAAK;EACjE,MAAM;IAAEC;EAAM,CAAC,GAAGN,aAAa,CAAC,CAAC;EACjC,IAAI,CAACK,MAAM,IAAI,CAACA,MAAM,CAACE,QAAQ,CAACC,cAAc,EAAE;IAC5C,OAAO,IAAI;EACf;EAEA,MAAMC,QAAQ,GAAGJ,MAAM,CAACE,QAAQ,CAACC,cAAc,CAAC;IAAEF;EAAM,CAAC,CAAC;EAE1D,IAAI,CAACG,QAAQ,EAAE;IACX,OAAO,IAAI;EACf;EAEA,oBACIV,KAAA,CAAAW,aAAA,CAAAX,KAAA,CAAAY,QAAA,qBACIZ,KAAA,CAAAW,aAAA,CAACT,IAAI,CAACW,MAAM;IAACC,IAAI,EAAE;EAAG,gBAClBd,KAAA,CAAAW,aAAA,CAACR,OAAO;IAACY,KAAK,EAAE;EAAE,GAAC,mBAA0B,CAAC,eAC9Cf,KAAA,CAAAW,aAAA,CAACP,IAAI;IAACY,IAAI,EAAE;EAAK,GAAC,gEAEZ,CACG,CAAC,EACbN,QACH,CAAC;AAEX,CAAC","ignoreList":[]}

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

@@ -1,55 +1,49 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _react = _interopRequireWildcard(require("react"));
-var _Grid = require("@webiny/ui/Grid");
-var _i18n = require("@webiny/app/i18n");
-var _Radio = require("@webiny/ui/Radio");
-var _emotion = require("emotion");
-var _validation = require("@webiny/validation");
-var _form = require("@webiny/form");
-var _allowCmsLegacyRichTextInput = require("../../../../utils/allowCmsLegacyRichTextInput");
-var _Typography = require("@webiny/ui/Typography");
-var _RendererOptions = require("./AppearanceTab/RendererOptions");
-var _LegacyRichTextInput = require("./AppearanceTab/LegacyRichTextInput");
-var _useRendererPlugins = require("./useRendererPlugins");
-var _ModelFieldProvider = require("../../ModelFieldProvider");
-var _templateObject;
-var t = _i18n.i18n.ns("app-headless-cms/admin/content-model-editor/tabs/appearance-tab");
-var style = {
-  noComponentsMessage: (0, _emotion.css)({
-    textAlign: "center",
-    padding: 25
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+import React, { useEffect } from "react";
+import { i18n } from "@webiny/app/i18n/index.js";
+import { css } from "@emotion/css";
+import { validation } from "@webiny/validation";
+import { useBind } from "@webiny/form";
+import { RendererOptions } from "./AppearanceTab/RendererOptions.js";
+import { useRendererPlugins } from "./useRendererPlugins.js";
+import { useModelField } from "../../ModelFieldProvider/index.js";
+import { RadioGroup, Text, Grid, Heading } from "@webiny/admin-ui";
+const t = i18n.ns("app-headless-cms/admin/content-model-editor/tabs/appearance-tab");
+const style = {
+  noComponentsMessage: /*#__PURE__*/css(process.env.NODE_ENV === "production" ? {
+    name: "4d8zrc",
+    styles: "text-align:center;padding:25px"
+  } : {
+    name: "16icgk8-noComponentsMessage",
+    styles: "text-align:center;padding:25px;label:noComponentsMessage;/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkFwcGVhcmFuY2VUYWIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWF5QiIsImZpbGUiOiJBcHBlYXJhbmNlVGFiLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyB1c2VFZmZlY3QgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7IGkxOG4gfSBmcm9tIFwiQHdlYmlueS9hcHAvaTE4bi9pbmRleC5qc1wiO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSBcIkBlbW90aW9uL2Nzc1wiO1xuaW1wb3J0IHsgdmFsaWRhdGlvbiB9IGZyb20gXCJAd2ViaW55L3ZhbGlkYXRpb25cIjtcbmltcG9ydCB7IHVzZUJpbmQgfSBmcm9tIFwiQHdlYmlueS9mb3JtXCI7XG5pbXBvcnQgeyBSZW5kZXJlck9wdGlvbnMgfSBmcm9tIFwiLi9BcHBlYXJhbmNlVGFiL1JlbmRlcmVyT3B0aW9ucy5qc1wiO1xuaW1wb3J0IHsgdXNlUmVuZGVyZXJQbHVnaW5zIH0gZnJvbSBcIi4vdXNlUmVuZGVyZXJQbHVnaW5zLmpzXCI7XG5pbXBvcnQgeyB1c2VNb2RlbEZpZWxkIH0gZnJvbSBcIn4vYWRtaW4vY29tcG9uZW50cy9Nb2RlbEZpZWxkUHJvdmlkZXIvaW5kZXguanNcIjtcbmltcG9ydCB7IFJhZGlvR3JvdXAsIFRleHQsIEdyaWQsIEhlYWRpbmcgfSBmcm9tIFwiQHdlYmlueS9hZG1pbi11aVwiO1xuXG5jb25zdCB0ID0gaTE4bi5ucyhcImFwcC1oZWFkbGVzcy1jbXMvYWRtaW4vY29udGVudC1tb2RlbC1lZGl0b3IvdGFicy9hcHBlYXJhbmNlLXRhYlwiKTtcblxuY29uc3Qgc3R5bGUgPSB7XG4gICAgbm9Db21wb25lbnRzTWVzc2FnZTogY3NzKHtcbiAgICAgICAgdGV4dEFsaWduOiBcImNlbnRlclwiLFxuICAgICAgICBwYWRkaW5nOiAyNVxuICAgIH0pLFxuICAgIHJhZGlvQ29udGFpbmVyOiBjc3Moe1xuICAgICAgICBtYXJnaW5Cb3R0b206IDEwLFxuICAgICAgICBkaXNwbGF5OiBcImZsZXhcIlxuICAgIH0pXG59O1xuXG5jb25zdCBBcHBlYXJhbmNlVGFiID0gKCkgPT4ge1xuICAgIGNvbnN0IHJlbmRlcmVycyA9IHVzZVJlbmRlcmVyUGx1Z2lucygpO1xuICAgIGNvbnN0IHsgZmllbGQgfSA9IHVzZU1vZGVsRmllbGQoKTtcblxuICAgIGNvbnN0IHJlbmRlcmVyTmFtZSA9IHVzZUJpbmQoe1xuICAgICAgICBuYW1lOiBcInJlbmRlcmVyLm5hbWVcIixcbiAgICAgICAgdmFsaWRhdGU6IHZhbGlkYXRpb24uY3JlYXRlKFwicmVxdWlyZWRcIilcbiAgICB9KTtcblxuICAgIGNvbnN0IHNlbGVjdGVkUGx1Z2luID0gcmVuZGVyZXJOYW1lLnZhbHVlXG4gICAgICAgID8gcmVuZGVyZXJzLmZpbmQocGwgPT4gcGwucmVuZGVyZXIucmVuZGVyZXJOYW1lID09PSByZW5kZXJlck5hbWUudmFsdWUpXG4gICAgICAgIDogdW5kZWZpbmVkO1xuXG4gICAgaWYgKHJlbmRlcmVycy5sZW5ndGggPT09IDApIHtcbiAgICAgICAgcmV0dXJuIChcbiAgICAgICAgICAgIDxHcmlkPlxuICAgICAgICAgICAgICAgIDxHcmlkLkNvbHVtblxuICAgICAgICAgICAgICAgICAgICBzcGFuPXsxMn1cbiAgICAgICAgICAgICAgICAgICAgY2xhc3NOYW1lPXtzdHlsZS5ub0NvbXBvbmVudHNNZXNzYWdlfVxuICAgICAgICAgICAgICAgID57dGBUaGVyZSBhcmUgbm8gY29tcG9uZW50cyB0aGF0IGNhbiByZW5kZXIgdGhpcyBmaWVsZC5gfTwvR3JpZC5Db2x1bW4+XG4gICAgICAgICAgICA8L0dyaWQ+XG4gICAgICAgICk7XG4gICAgfVxuXG4gICAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICAgICAgLy8gSWYgdGhlIGN1cnJlbnRseSBzZWxlY3RlZCByZW5kZXIgcGx1Z2luIGlzIG5vIGxvbmdlciBhdmFpbGFibGUsIHNlbGVjdCB0aGUgZmlyc3QgYXZhaWxhYmxlIG9uZS5cbiAgICAgICAgaWYgKHNlbGVjdGVkUGx1Z2luKSB7XG4gICAgICAgICAgICByZXR1cm47XG4gICAgICAgIH1cblxuICAgICAgICBpZiAocmVuZGVyZXJzWzBdKSB7XG4gICAgICAgICAgICByZW5kZXJlck5hbWUub25DaGFuZ2UocmVuZGVyZXJzWzBdLnJlbmRlcmVyLnJlbmRlcmVyTmFtZSk7XG4gICAgICAgICAgICByZXR1cm47XG4gICAgICAgIH1cblxuICAgICAgICBjb25zb2xlLmluZm8oYE5vIHJlbmRlcmVycyBmb3IgZmllbGQgJHtmaWVsZC5maWVsZElkfSBmb3VuZC5gLCBmaWVsZCk7XG4gICAgfSwgW2ZpZWxkLmlkLCBmaWVsZC5saXN0LCBmaWVsZC5wcmVkZWZpbmVkVmFsdWVzPy5lbmFibGVkLCBzZWxlY3RlZFBsdWdpbl0pO1xuXG4gICAgcmV0dXJuIChcbiAgICAgICAgPD5cbiAgICAgICAgICAgIDxHcmlkPlxuICAgICAgICAgICAgICAgIDw+XG4gICAgICAgICAgICAgICAgICAgIDxHcmlkLkNvbHVtbiBzcGFuPXsxMn0+XG4gICAgICAgICAgICAgICAgICAgICAgICA8SGVhZGluZyBsZXZlbD17NX0+RmllbGQgcmVuZGVyZXI8L0hlYWRpbmc+XG4gICAgICAgICAgICAgICAgICAgICAgICA8VGV4dCBzaXplPXtcInNtXCJ9PkNob29zZSBhIGNvbXBvbmVudCB0aGF0IHdpbGwgcmVuZGVyIHRoZSBmaWVsZC48L1RleHQ+XG4gICAgICAgICAgICAgICAgICAgIDwvR3JpZC5Db2x1bW4+XG4gICAgICAgICAgICAgICAgICAgIDxHcmlkLkNvbHVtbiBzcGFuPXsxMn0+XG4gICAgICAgICAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT17XCJtYi14bFwifT5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8UmFkaW9Hcm91cFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB7Li4ucmVuZGVyZXJOYW1lfVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBpdGVtcz17cmVuZGVyZXJzLm1hcChpdGVtID0+ICh7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBpZDogaXRlbS5yZW5kZXJlci5yZW5kZXJlck5hbWUsXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB2YWx1ZTogaXRlbS5yZW5kZXJlci5yZW5kZXJlck5hbWUsXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBsYWJlbDogKFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxkaXY+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxUZXh0IGFzPXtcImRpdlwifSBzaXplPXtcIm1kXCJ9PlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAge2l0ZW0ucmVuZGVyZXIubmFtZX1cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPC9UZXh0PlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8VGV4dFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgYXM9e1wiZGl2XCJ9XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBzaXplPXtcInNtXCJ9XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBjbGFzc05hbWU9e1widGV4dC1zbSB0ZXh0LW5ldXRyYWwtc3Ryb25nXCJ9XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIHtpdGVtLnJlbmRlcmVyLmRlc2NyaXB0aW9ufVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8L1RleHQ+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICApXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIH0pKX1cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAvPlxuICAgICAgICAgICAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICAgICAgICAgIDwvR3JpZC5Db2x1bW4+XG4gICAgICAgICAgICAgICAgICAgIDxSZW5kZXJlck9wdGlvbnMgcGx1Z2luPXtzZWxlY3RlZFBsdWdpbn0gLz5cbiAgICAgICAgICAgICAgICA8Lz5cbiAgICAgICAgICAgIDwvR3JpZD5cbiAgICAgICAgPC8+XG4gICAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IEFwcGVhcmFuY2VUYWI7XG4iXX0= */",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
   }),
-  radioContainer: (0, _emotion.css)({
-    marginBottom: 10,
-    display: "flex"
+  radioContainer: /*#__PURE__*/css(process.env.NODE_ENV === "production" ? {
+    name: "qpyps2",
+    styles: "margin-bottom:10px;display:flex"
+  } : {
+    name: "4btape-radioContainer",
+    styles: "margin-bottom:10px;display:flex;label:radioContainer;/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkFwcGVhcmFuY2VUYWIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWlCb0IiLCJmaWxlIjoiQXBwZWFyYW5jZVRhYi50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHsgdXNlRWZmZWN0IH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgeyBpMThuIH0gZnJvbSBcIkB3ZWJpbnkvYXBwL2kxOG4vaW5kZXguanNcIjtcbmltcG9ydCB7IGNzcyB9IGZyb20gXCJAZW1vdGlvbi9jc3NcIjtcbmltcG9ydCB7IHZhbGlkYXRpb24gfSBmcm9tIFwiQHdlYmlueS92YWxpZGF0aW9uXCI7XG5pbXBvcnQgeyB1c2VCaW5kIH0gZnJvbSBcIkB3ZWJpbnkvZm9ybVwiO1xuaW1wb3J0IHsgUmVuZGVyZXJPcHRpb25zIH0gZnJvbSBcIi4vQXBwZWFyYW5jZVRhYi9SZW5kZXJlck9wdGlvbnMuanNcIjtcbmltcG9ydCB7IHVzZVJlbmRlcmVyUGx1Z2lucyB9IGZyb20gXCIuL3VzZVJlbmRlcmVyUGx1Z2lucy5qc1wiO1xuaW1wb3J0IHsgdXNlTW9kZWxGaWVsZCB9IGZyb20gXCJ+L2FkbWluL2NvbXBvbmVudHMvTW9kZWxGaWVsZFByb3ZpZGVyL2luZGV4LmpzXCI7XG5pbXBvcnQgeyBSYWRpb0dyb3VwLCBUZXh0LCBHcmlkLCBIZWFkaW5nIH0gZnJvbSBcIkB3ZWJpbnkvYWRtaW4tdWlcIjtcblxuY29uc3QgdCA9IGkxOG4ubnMoXCJhcHAtaGVhZGxlc3MtY21zL2FkbWluL2NvbnRlbnQtbW9kZWwtZWRpdG9yL3RhYnMvYXBwZWFyYW5jZS10YWJcIik7XG5cbmNvbnN0IHN0eWxlID0ge1xuICAgIG5vQ29tcG9uZW50c01lc3NhZ2U6IGNzcyh7XG4gICAgICAgIHRleHRBbGlnbjogXCJjZW50ZXJcIixcbiAgICAgICAgcGFkZGluZzogMjVcbiAgICB9KSxcbiAgICByYWRpb0NvbnRhaW5lcjogY3NzKHtcbiAgICAgICAgbWFyZ2luQm90dG9tOiAxMCxcbiAgICAgICAgZGlzcGxheTogXCJmbGV4XCJcbiAgICB9KVxufTtcblxuY29uc3QgQXBwZWFyYW5jZVRhYiA9ICgpID0+IHtcbiAgICBjb25zdCByZW5kZXJlcnMgPSB1c2VSZW5kZXJlclBsdWdpbnMoKTtcbiAgICBjb25zdCB7IGZpZWxkIH0gPSB1c2VNb2RlbEZpZWxkKCk7XG5cbiAgICBjb25zdCByZW5kZXJlck5hbWUgPSB1c2VCaW5kKHtcbiAgICAgICAgbmFtZTogXCJyZW5kZXJlci5uYW1lXCIsXG4gICAgICAgIHZhbGlkYXRlOiB2YWxpZGF0aW9uLmNyZWF0ZShcInJlcXVpcmVkXCIpXG4gICAgfSk7XG5cbiAgICBjb25zdCBzZWxlY3RlZFBsdWdpbiA9IHJlbmRlcmVyTmFtZS52YWx1ZVxuICAgICAgICA/IHJlbmRlcmVycy5maW5kKHBsID0+IHBsLnJlbmRlcmVyLnJlbmRlcmVyTmFtZSA9PT0gcmVuZGVyZXJOYW1lLnZhbHVlKVxuICAgICAgICA6IHVuZGVmaW5lZDtcblxuICAgIGlmIChyZW5kZXJlcnMubGVuZ3RoID09PSAwKSB7XG4gICAgICAgIHJldHVybiAoXG4gICAgICAgICAgICA8R3JpZD5cbiAgICAgICAgICAgICAgICA8R3JpZC5Db2x1bW5cbiAgICAgICAgICAgICAgICAgICAgc3Bhbj17MTJ9XG4gICAgICAgICAgICAgICAgICAgIGNsYXNzTmFtZT17c3R5bGUubm9Db21wb25lbnRzTWVzc2FnZX1cbiAgICAgICAgICAgICAgICA+e3RgVGhlcmUgYXJlIG5vIGNvbXBvbmVudHMgdGhhdCBjYW4gcmVuZGVyIHRoaXMgZmllbGQuYH08L0dyaWQuQ29sdW1uPlxuICAgICAgICAgICAgPC9HcmlkPlxuICAgICAgICApO1xuICAgIH1cblxuICAgIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgICAgIC8vIElmIHRoZSBjdXJyZW50bHkgc2VsZWN0ZWQgcmVuZGVyIHBsdWdpbiBpcyBubyBsb25nZXIgYXZhaWxhYmxlLCBzZWxlY3QgdGhlIGZpcnN0IGF2YWlsYWJsZSBvbmUuXG4gICAgICAgIGlmIChzZWxlY3RlZFBsdWdpbikge1xuICAgICAgICAgICAgcmV0dXJuO1xuICAgICAgICB9XG5cbiAgICAgICAgaWYgKHJlbmRlcmVyc1swXSkge1xuICAgICAgICAgICAgcmVuZGVyZXJOYW1lLm9uQ2hhbmdlKHJlbmRlcmVyc1swXS5yZW5kZXJlci5yZW5kZXJlck5hbWUpO1xuICAgICAgICAgICAgcmV0dXJuO1xuICAgICAgICB9XG5cbiAgICAgICAgY29uc29sZS5pbmZvKGBObyByZW5kZXJlcnMgZm9yIGZpZWxkICR7ZmllbGQuZmllbGRJZH0gZm91bmQuYCwgZmllbGQpO1xuICAgIH0sIFtmaWVsZC5pZCwgZmllbGQubGlzdCwgZmllbGQucHJlZGVmaW5lZFZhbHVlcz8uZW5hYmxlZCwgc2VsZWN0ZWRQbHVnaW5dKTtcblxuICAgIHJldHVybiAoXG4gICAgICAgIDw+XG4gICAgICAgICAgICA8R3JpZD5cbiAgICAgICAgICAgICAgICA8PlxuICAgICAgICAgICAgICAgICAgICA8R3JpZC5Db2x1bW4gc3Bhbj17MTJ9PlxuICAgICAgICAgICAgICAgICAgICAgICAgPEhlYWRpbmcgbGV2ZWw9ezV9PkZpZWxkIHJlbmRlcmVyPC9IZWFkaW5nPlxuICAgICAgICAgICAgICAgICAgICAgICAgPFRleHQgc2l6ZT17XCJzbVwifT5DaG9vc2UgYSBjb21wb25lbnQgdGhhdCB3aWxsIHJlbmRlciB0aGUgZmllbGQuPC9UZXh0PlxuICAgICAgICAgICAgICAgICAgICA8L0dyaWQuQ29sdW1uPlxuICAgICAgICAgICAgICAgICAgICA8R3JpZC5Db2x1bW4gc3Bhbj17MTJ9PlxuICAgICAgICAgICAgICAgICAgICAgICAgPGRpdiBjbGFzc05hbWU9e1wibWIteGxcIn0+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgPFJhZGlvR3JvdXBcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgey4uLnJlbmRlcmVyTmFtZX1cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgaXRlbXM9e3JlbmRlcmVycy5tYXAoaXRlbSA9PiAoe1xuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgaWQ6IGl0ZW0ucmVuZGVyZXIucmVuZGVyZXJOYW1lLFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgdmFsdWU6IGl0ZW0ucmVuZGVyZXIucmVuZGVyZXJOYW1lLFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgbGFiZWw6IChcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8ZGl2PlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8VGV4dCBhcz17XCJkaXZcIn0gc2l6ZT17XCJtZFwifT5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIHtpdGVtLnJlbmRlcmVyLm5hbWV9XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDwvVGV4dD5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPFRleHRcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGFzPXtcImRpdlwifVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgc2l6ZT17XCJzbVwifVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgY2xhc3NOYW1lPXtcInRleHQtc20gdGV4dC1uZXV0cmFsLXN0cm9uZ1wifVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB7aXRlbS5yZW5kZXJlci5kZXNjcmlwdGlvbn1cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPC9UZXh0PlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgKVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB9KSl9XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgLz5cbiAgICAgICAgICAgICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgICAgICAgICA8L0dyaWQuQ29sdW1uPlxuICAgICAgICAgICAgICAgICAgICA8UmVuZGVyZXJPcHRpb25zIHBsdWdpbj17c2VsZWN0ZWRQbHVnaW59IC8+XG4gICAgICAgICAgICAgICAgPC8+XG4gICAgICAgICAgICA8L0dyaWQ+XG4gICAgICAgIDwvPlxuICAgICk7XG59O1xuXG5leHBvcnQgZGVmYXVsdCBBcHBlYXJhbmNlVGFiO1xuIl19 */",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
   })
 };
-var AppearanceTab = function AppearanceTab() {
-  var renderers = (0, _useRendererPlugins.useRendererPlugins)();
-  var _useModelField = (0, _ModelFieldProvider.useModelField)(),
-    field = _useModelField.field;
-  var rendererName = (0, _form.useBind)({
+const AppearanceTab = () => {
+  const renderers = useRendererPlugins();
+  const {
+    field
+  } = useModelField();
+  const rendererName = useBind({
     name: "renderer.name",
-    validate: _validation.validation.create("required")
+    validate: validation.create("required")
   });
-  var selectedPlugin = rendererName.value ? renderers.find(function (pl) {
-    return pl.renderer.rendererName === rendererName.value;
-  }) : undefined;
+  const selectedPlugin = rendererName.value ? renderers.find(pl => pl.renderer.rendererName === rendererName.value) : undefined;
   if (renderers.length === 0) {
-    return /*#__PURE__*/_react.default.createElement(_Grid.Grid, null, /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
+    return /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Grid.Column, {
       span: 12,
       className: style.noComponentsMessage
-    }, t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["There are no components that can render this field."])))));
+    }, t`There are no components that can render this field.`));
   }
-  (0, _react.useEffect)(function () {
+  useEffect(() => {
     // If the currently selected render plugin is no longer available, select the first available one.
     if (selectedPlugin) {
       return;
@@ -58,35 +52,35 @@ var AppearanceTab = function AppearanceTab() {
       rendererName.onChange(renderers[0].renderer.rendererName);
       return;
     }
-    console.info("No renderers for field ".concat(field.fieldId, " found."), field);
-  }, [field.id, field.multipleValues, field.predefinedValues?.enabled, selectedPlugin]);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Grid.Grid, null, _allowCmsLegacyRichTextInput.allowCmsLegacyRichTextInput && /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
-    span: 6
-  }, /*#__PURE__*/_react.default.createElement(_LegacyRichTextInput.LegacyRichTextInput, null)), /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
+    console.info(`No renderers for field ${field.fieldId} found.`, field);
+  }, [field.id, field.list, field.predefinedValues?.enabled, selectedPlugin]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Grid.Column, {
     span: 12
-  }, "Choose a component that will render the field:"), /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
+  }, /*#__PURE__*/React.createElement(Heading, {
+    level: 5
+  }, "Field renderer"), /*#__PURE__*/React.createElement(Text, {
+    size: "sm"
+  }, "Choose a component that will render the field.")), /*#__PURE__*/React.createElement(Grid.Column, {
     span: 12
-  }, /*#__PURE__*/_react.default.createElement(_Radio.RadioGroup, rendererName, function (_ref) {
-    var onChange = _ref.onChange,
-      getValue = _ref.getValue;
-    return renderers.map(function (item) {
-      var setValue = onChange(item.renderer.rendererName);
-      return /*#__PURE__*/_react.default.createElement("div", {
-        key: item.name,
-        className: style.radioContainer
-      }, /*#__PURE__*/_react.default.createElement(_Radio.Radio, {
-        value: getValue(item.renderer.rendererName),
-        onChange: setValue
-      }), /*#__PURE__*/_react.default.createElement("div", {
-        onClick: setValue
-      }, /*#__PURE__*/_react.default.createElement("div", null, item.renderer.name), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
-        use: "caption"
-      }, item.renderer.description))));
-    });
-  }))), /*#__PURE__*/_react.default.createElement(_RendererOptions.RendererOptions, {
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "mb-xl"
+  }, /*#__PURE__*/React.createElement(RadioGroup, Object.assign({}, rendererName, {
+    items: renderers.map(item => ({
+      id: item.renderer.rendererName,
+      value: item.renderer.rendererName,
+      label: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, {
+        as: "div",
+        size: "md"
+      }, item.renderer.name), /*#__PURE__*/React.createElement(Text, {
+        as: "div",
+        size: "sm",
+        className: "text-sm text-neutral-strong"
+      }, item.renderer.description))
+    }))
+  })))), /*#__PURE__*/React.createElement(RendererOptions, {
     plugin: selectedPlugin
-  }));
+  }))));
 };
-var _default = exports.default = AppearanceTab;
+export default AppearanceTab;
 
 //# sourceMappingURL=AppearanceTab.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_Grid","_i18n","_Radio","_emotion","_validation","_form","_allowCmsLegacyRichTextInput","_Typography","_RendererOptions","_LegacyRichTextInput","_useRendererPlugins","_ModelFieldProvider","_templateObject","t","i18n","ns","style","noComponentsMessage","css","textAlign","padding","radioContainer","marginBottom","display","AppearanceTab","renderers","useRendererPlugins","_useModelField","useModelField","field","rendererName","useBind","name","validate","validation","create","selectedPlugin","value","find","pl","renderer","undefined","length","default","createElement","Grid","Cell","span","className","_taggedTemplateLiteral2","useEffect","onChange","console","info","concat","fieldId","id","multipleValues","predefinedValues","enabled","Fragment","allowCmsLegacyRichTextInput","LegacyRichTextInput","RadioGroup","_ref","getValue","map","item","setValue","key","Radio","onClick","Typography","use","description","RendererOptions","plugin","_default","exports"],"sources":["AppearanceTab.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport { Grid, Cell } from \"@webiny/ui/Grid\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { Radio, RadioGroup } from \"@webiny/ui/Radio\";\nimport { css } from \"emotion\";\nimport { validation } from \"@webiny/validation\";\nimport { useBind } from \"@webiny/form\";\nimport { allowCmsLegacyRichTextInput } from \"~/utils/allowCmsLegacyRichTextInput\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { RendererOptions } from \"./AppearanceTab/RendererOptions\";\nimport { LegacyRichTextInput } from \"./AppearanceTab/LegacyRichTextInput\";\nimport { useRendererPlugins } from \"./useRendererPlugins\";\nimport { useModelField } from \"~/admin/components/ModelFieldProvider\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/content-model-editor/tabs/appearance-tab\");\n\nconst style = {\n    noComponentsMessage: css({\n        textAlign: \"center\",\n        padding: 25\n    }),\n    radioContainer: css({\n        marginBottom: 10,\n        display: \"flex\"\n    })\n};\n\nconst AppearanceTab = () => {\n    const renderers = useRendererPlugins();\n    const { field } = useModelField();\n\n    const rendererName = useBind({\n        name: \"renderer.name\",\n        validate: validation.create(\"required\")\n    });\n\n    const selectedPlugin = rendererName.value\n        ? renderers.find(pl => pl.renderer.rendererName === rendererName.value)\n        : undefined;\n\n    if (renderers.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    useEffect(() => {\n        // If the currently selected render plugin is no longer available, select the first available one.\n        if (selectedPlugin) {\n            return;\n        }\n\n        if (renderers[0]) {\n            rendererName.onChange(renderers[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, selectedPlugin]);\n\n    return (\n        <>\n            <Grid>\n                {allowCmsLegacyRichTextInput && (\n                    <Cell span={6}>\n                        <LegacyRichTextInput />\n                    </Cell>\n                )}\n                <Cell span={12}>Choose a component that will render the field:</Cell>\n                <Cell span={12}>\n                    <RadioGroup {...rendererName}>\n                        {({ onChange, getValue }) =>\n                            renderers.map(item => {\n                                const setValue = onChange(item.renderer.rendererName);\n                                return (\n                                    <div key={item.name} className={style.radioContainer}>\n                                        <Radio\n                                            value={getValue(item.renderer.rendererName)}\n                                            onChange={setValue}\n                                        />\n\n                                        <div onClick={setValue}>\n                                            <div>{item.renderer.name}</div>\n                                            <div>\n                                                <Typography use={\"caption\"}>\n                                                    {item.renderer.description}\n                                                </Typography>\n                                            </div>\n                                        </div>\n                                    </div>\n                                );\n                            })\n                        }\n                    </RadioGroup>\n                </Cell>\n            </Grid>\n            <RendererOptions plugin={selectedPlugin} />\n        </>\n    );\n};\n\nexport default AppearanceTab;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useEffect","i18n","css","validation","useBind","RendererOptions","useRendererPlugins","useModelField","RadioGroup","Text","Grid","Heading","t","ns","style","noComponentsMessage","process","env","NODE_ENV","name","styles","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","radioContainer","AppearanceTab","renderers","field","rendererName","validate","create","selectedPlugin","value","find","pl","renderer","undefined","length","createElement","Column","span","className","onChange","console","info","fieldId","id","list","predefinedValues","enabled","Fragment","level","size","Object","assign","items","map","item","label","as","description","plugin"],"sources":["AppearanceTab.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport { css } from \"@emotion/css\";\nimport { validation } from \"@webiny/validation\";\nimport { useBind } from \"@webiny/form\";\nimport { RendererOptions } from \"./AppearanceTab/RendererOptions.js\";\nimport { useRendererPlugins } from \"./useRendererPlugins.js\";\nimport { useModelField } from \"~/admin/components/ModelFieldProvider/index.js\";\nimport { RadioGroup, Text, Grid, Heading } from \"@webiny/admin-ui\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/content-model-editor/tabs/appearance-tab\");\n\nconst style = {\n    noComponentsMessage: css({\n        textAlign: \"center\",\n        padding: 25\n    }),\n    radioContainer: css({\n        marginBottom: 10,\n        display: \"flex\"\n    })\n};\n\nconst AppearanceTab = () => {\n    const renderers = useRendererPlugins();\n    const { field } = useModelField();\n\n    const rendererName = useBind({\n        name: \"renderer.name\",\n        validate: validation.create(\"required\")\n    });\n\n    const selectedPlugin = rendererName.value\n        ? renderers.find(pl => pl.renderer.rendererName === rendererName.value)\n        : undefined;\n\n    if (renderers.length === 0) {\n        return (\n            <Grid>\n                <Grid.Column\n                    span={12}\n                    className={style.noComponentsMessage}\n                >{t`There are no components that can render this field.`}</Grid.Column>\n            </Grid>\n        );\n    }\n\n    useEffect(() => {\n        // If the currently selected render plugin is no longer available, select the first available one.\n        if (selectedPlugin) {\n            return;\n        }\n\n        if (renderers[0]) {\n            rendererName.onChange(renderers[0].renderer.rendererName);\n            return;\n        }\n\n        console.info(`No renderers for field ${field.fieldId} found.`, field);\n    }, [field.id, field.list, field.predefinedValues?.enabled, selectedPlugin]);\n\n    return (\n        <>\n            <Grid>\n                <>\n                    <Grid.Column span={12}>\n                        <Heading level={5}>Field renderer</Heading>\n                        <Text size={\"sm\"}>Choose a component that will render the field.</Text>\n                    </Grid.Column>\n                    <Grid.Column span={12}>\n                        <div className={\"mb-xl\"}>\n                            <RadioGroup\n                                {...rendererName}\n                                items={renderers.map(item => ({\n                                    id: item.renderer.rendererName,\n                                    value: item.renderer.rendererName,\n                                    label: (\n                                        <div>\n                                            <Text as={\"div\"} size={\"md\"}>\n                                                {item.renderer.name}\n                                            </Text>\n                                            <Text\n                                                as={\"div\"}\n                                                size={\"sm\"}\n                                                className={\"text-sm text-neutral-strong\"}\n                                            >\n                                                {item.renderer.description}\n                                            </Text>\n                                        </div>\n                                    )\n                                }))}\n                            />\n                        </div>\n                    </Grid.Column>\n                    <RendererOptions plugin={selectedPlugin} />\n                </>\n            </Grid>\n        </>\n    );\n};\n\nexport default AppearanceTab;\n"],"mappings":"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","ignoreList":[]}