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

package/admin/components/Droppable.js

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

package/admin/components/Droppable.js.map

@@ -0,0 +1 @@
+{"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\";\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.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const LegacyRichTextInput: () => React.JSX.Element;

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

@@ -0,0 +1,14 @@
+import React from "react";
+import { Alert } from "@webiny/ui/Alert";
+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.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"
+  }, "upgrade guide"), ".");
+};
+
+//# sourceMappingURL=LegacyRichTextInput.js.map

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

@@ -0,0 +1 @@
+{"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\";\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,kBAAkB;AAExC,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

@@ -0,0 +1,7 @@
+import React from "react";
+import type { CmsModelFieldRendererPlugin } from "@webiny/app-headless-cms-common/types";
+interface RendererOptionsProps {
+    plugin: CmsModelFieldRendererPlugin | undefined;
+}
+export declare const RendererOptions: ({ plugin }: RendererOptionsProps) => React.JSX.Element | null;
+export {};

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

@@ -0,0 +1,28 @@
+import React from "react";
+import { useModelField } from "../../../ModelFieldProvider";
+import { Grid, Heading, Text } from "@webiny/admin-ui";
+export const RendererOptions = ({
+  plugin
+}) => {
+  const {
+    field
+  } = useModelField();
+  if (!plugin || !plugin.renderer.renderSettings) {
+    return null;
+  }
+  const settings = plugin.renderer.renderSettings({
+    field
+  });
+  if (!settings) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Grid.Column, {
+    span: 12
+  }, /*#__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

@@ -0,0 +1 @@
+{"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\";\nimport { useModelField } from \"~/admin/components/ModelFieldProvider\";\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.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-declare const AppearanceTab: (props: any) => JSX.Element;
+import React from "react";
+declare const AppearanceTab: () => React.JSX.Element;
 export default AppearanceTab;

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

@@ -1,83 +1,92 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
-var _templateObject, _templateObject2;
-
+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 { plugins } from "@webiny/plugins";
-import { Grid, Cell } from "@webiny/ui/Grid";
 import { i18n } from "@webiny/app/i18n";
-import { Radio, RadioGroup } from "@webiny/ui/Radio";
-import { Typography } from "@webiny/ui/Typography";
-import { css } from "emotion";
+import { css } from "@emotion/css";
 import { validation } from "@webiny/validation";
-var t = i18n.ns("app-headless-cms/admin/views/components/editor/tabs/edit-field-dialog/appearance-tab");
-var style = {
-  topLabel: /*#__PURE__*/css({
-    marginBottom: 25
-  }, "label:topLabel;"),
-  noComponentsMessage: /*#__PURE__*/css({
-    textAlign: "center",
-    padding: 25
-  }, "label:noComponentsMessage;"),
-  radioContainer: /*#__PURE__*/css({
-    marginBottom: 10
-  }, "label:radioContainer;")
+import { useBind } from "@webiny/form";
+import { allowCmsLegacyRichTextInput } from "../../../../utils/allowCmsLegacyRichTextInput";
+import { RendererOptions } from "./AppearanceTab/RendererOptions";
+import { LegacyRichTextInput } from "./AppearanceTab/LegacyRichTextInput";
+import { useRendererPlugins } from "./useRendererPlugins";
+import { useModelField } from "../../ModelFieldProvider";
+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;",
+    map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkFwcGVhcmFuY2VUYWIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWV5QiIsImZpbGUiOiJBcHBlYXJhbmNlVGFiLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyB1c2VFZmZlY3QgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7IGkxOG4gfSBmcm9tIFwiQHdlYmlueS9hcHAvaTE4blwiO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSBcIkBlbW90aW9uL2Nzc1wiO1xuaW1wb3J0IHsgdmFsaWRhdGlvbiB9IGZyb20gXCJAd2ViaW55L3ZhbGlkYXRpb25cIjtcbmltcG9ydCB7IHVzZUJpbmQgfSBmcm9tIFwiQHdlYmlueS9mb3JtXCI7XG5pbXBvcnQgeyBhbGxvd0Ntc0xlZ2FjeVJpY2hUZXh0SW5wdXQgfSBmcm9tIFwifi91dGlscy9hbGxvd0Ntc0xlZ2FjeVJpY2hUZXh0SW5wdXRcIjtcbmltcG9ydCB7IFJlbmRlcmVyT3B0aW9ucyB9IGZyb20gXCIuL0FwcGVhcmFuY2VUYWIvUmVuZGVyZXJPcHRpb25zXCI7XG5pbXBvcnQgeyBMZWdhY3lSaWNoVGV4dElucHV0IH0gZnJvbSBcIi4vQXBwZWFyYW5jZVRhYi9MZWdhY3lSaWNoVGV4dElucHV0XCI7XG5pbXBvcnQgeyB1c2VSZW5kZXJlclBsdWdpbnMgfSBmcm9tIFwiLi91c2VSZW5kZXJlclBsdWdpbnNcIjtcbmltcG9ydCB7IHVzZU1vZGVsRmllbGQgfSBmcm9tIFwifi9hZG1pbi9jb21wb25lbnRzL01vZGVsRmllbGRQcm92aWRlclwiO1xuaW1wb3J0IHsgUmFkaW9Hcm91cCwgVGV4dCwgR3JpZCwgSGVhZGluZyB9IGZyb20gXCJAd2ViaW55L2FkbWluLXVpXCI7XG5cbmNvbnN0IHQgPSBpMThuLm5zKFwiYXBwLWhlYWRsZXNzLWNtcy9hZG1pbi9jb250ZW50LW1vZGVsLWVkaXRvci90YWJzL2FwcGVhcmFuY2UtdGFiXCIpO1xuXG5jb25zdCBzdHlsZSA9IHtcbiAgICBub0NvbXBvbmVudHNNZXNzYWdlOiBjc3Moe1xuICAgICAgICB0ZXh0QWxpZ246IFwiY2VudGVyXCIsXG4gICAgICAgIHBhZGRpbmc6IDI1XG4gICAgfSksXG4gICAgcmFkaW9Db250YWluZXI6IGNzcyh7XG4gICAgICAgIG1hcmdpbkJvdHRvbTogMTAsXG4gICAgICAgIGRpc3BsYXk6IFwiZmxleFwiXG4gICAgfSlcbn07XG5cbmNvbnN0IEFwcGVhcmFuY2VUYWIgPSAoKSA9PiB7XG4gICAgY29uc3QgcmVuZGVyZXJzID0gdXNlUmVuZGVyZXJQbHVnaW5zKCk7XG4gICAgY29uc3QgeyBmaWVsZCB9ID0gdXNlTW9kZWxGaWVsZCgpO1xuXG4gICAgY29uc3QgcmVuZGVyZXJOYW1lID0gdXNlQmluZCh7XG4gICAgICAgIG5hbWU6IFwicmVuZGVyZXIubmFtZVwiLFxuICAgICAgICB2YWxpZGF0ZTogdmFsaWRhdGlvbi5jcmVhdGUoXCJyZXF1aXJlZFwiKVxuICAgIH0pO1xuXG4gICAgY29uc3Qgc2VsZWN0ZWRQbHVnaW4gPSByZW5kZXJlck5hbWUudmFsdWVcbiAgICAgICAgPyByZW5kZXJlcnMuZmluZChwbCA9PiBwbC5yZW5kZXJlci5yZW5kZXJlck5hbWUgPT09IHJlbmRlcmVyTmFtZS52YWx1ZSlcbiAgICAgICAgOiB1bmRlZmluZWQ7XG5cbiAgICBpZiAocmVuZGVyZXJzLmxlbmd0aCA9PT0gMCkge1xuICAgICAgICByZXR1cm4gKFxuICAgICAgICAgICAgPEdyaWQ+XG4gICAgICAgICAgICAgICAgPEdyaWQuQ29sdW1uXG4gICAgICAgICAgICAgICAgICAgIHNwYW49ezEyfVxuICAgICAgICAgICAgICAgICAgICBjbGFzc05hbWU9e3N0eWxlLm5vQ29tcG9uZW50c01lc3NhZ2V9XG4gICAgICAgICAgICAgICAgPnt0YFRoZXJlIGFyZSBubyBjb21wb25lbnRzIHRoYXQgY2FuIHJlbmRlciB0aGlzIGZpZWxkLmB9PC9HcmlkLkNvbHVtbj5cbiAgICAgICAgICAgIDwvR3JpZD5cbiAgICAgICAgKTtcbiAgICB9XG5cbiAgICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgICAgICAvLyBJZiB0aGUgY3VycmVudGx5IHNlbGVjdGVkIHJlbmRlciBwbHVnaW4gaXMgbm8gbG9uZ2VyIGF2YWlsYWJsZSwgc2VsZWN0IHRoZSBmaXJzdCBhdmFpbGFibGUgb25lLlxuICAgICAgICBpZiAoc2VsZWN0ZWRQbHVnaW4pIHtcbiAgICAgICAgICAgIHJldHVybjtcbiAgICAgICAgfVxuXG4gICAgICAgIGlmIChyZW5kZXJlcnNbMF0pIHtcbiAgICAgICAgICAgIHJlbmRlcmVyTmFtZS5vbkNoYW5nZShyZW5kZXJlcnNbMF0ucmVuZGVyZXIucmVuZGVyZXJOYW1lKTtcbiAgICAgICAgICAgIHJldHVybjtcbiAgICAgICAgfVxuXG4gICAgICAgIGNvbnNvbGUuaW5mbyhgTm8gcmVuZGVyZXJzIGZvciBmaWVsZCAke2ZpZWxkLmZpZWxkSWR9IGZvdW5kLmAsIGZpZWxkKTtcbiAgICB9LCBbZmllbGQuaWQsIGZpZWxkLm11bHRpcGxlVmFsdWVzLCBmaWVsZC5wcmVkZWZpbmVkVmFsdWVzPy5lbmFibGVkLCBzZWxlY3RlZFBsdWdpbl0pO1xuXG4gICAgcmV0dXJuIChcbiAgICAgICAgPD5cbiAgICAgICAgICAgIDxHcmlkPlxuICAgICAgICAgICAgICAgIDw+XG4gICAgICAgICAgICAgICAgICAgIHthbGxvd0Ntc0xlZ2FjeVJpY2hUZXh0SW5wdXQgJiYgKFxuICAgICAgICAgICAgICAgICAgICAgICAgPEdyaWQuQ29sdW1uIHNwYW49ezZ9PlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxMZWdhY3lSaWNoVGV4dElucHV0IC8+XG4gICAgICAgICAgICAgICAgICAgICAgICA8L0dyaWQuQ29sdW1uPlxuICAgICAgICAgICAgICAgICAgICApfVxuICAgICAgICAgICAgICAgICAgICA8R3JpZC5Db2x1bW4gc3Bhbj17MTJ9PlxuICAgICAgICAgICAgICAgICAgICAgICAgPEhlYWRpbmcgbGV2ZWw9ezV9PkZpZWxkIHJlbmRlcmVyPC9IZWFkaW5nPlxuICAgICAgICAgICAgICAgICAgICAgICAgPFRleHQgc2l6ZT17XCJzbVwifT5DaG9vc2UgYSBjb21wb25lbnQgdGhhdCB3aWxsIHJlbmRlciB0aGUgZmllbGQuPC9UZXh0PlxuICAgICAgICAgICAgICAgICAgICA8L0dyaWQuQ29sdW1uPlxuICAgICAgICAgICAgICAgICAgICA8R3JpZC5Db2x1bW4gc3Bhbj17MTJ9PlxuICAgICAgICAgICAgICAgICAgICAgICAgPGRpdiBjbGFzc05hbWU9e1wid2J5LW1iLXhsXCJ9PlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxSYWRpb0dyb3VwXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIHsuLi5yZW5kZXJlck5hbWV9XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGl0ZW1zPXtyZW5kZXJlcnMubWFwKGl0ZW0gPT4gKHtcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGlkOiBpdGVtLnJlbmRlcmVyLnJlbmRlcmVyTmFtZSxcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIHZhbHVlOiBpdGVtLnJlbmRlcmVyLnJlbmRlcmVyTmFtZSxcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGxhYmVsOiAoXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPGRpdj5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPFRleHQgYXM9e1wiZGl2XCJ9IHNpemU9e1wibWRcIn0+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB7aXRlbS5yZW5kZXJlci5uYW1lfVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8L1RleHQ+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxUZXh0XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBhcz17XCJkaXZcIn1cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIHNpemU9e1wic21cIn1cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGNsYXNzTmFtZT17XCJ3YnktdGV4dC1zbSB3YnktdGV4dC1uZXV0cmFsLXN0cm9uZ1wifVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB7aXRlbS5yZW5kZXJlci5kZXNjcmlwdGlvbn1cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPC9UZXh0PlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgKVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB9KSl9XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgLz5cbiAgICAgICAgICAgICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgICAgICAgICA8L0dyaWQuQ29sdW1uPlxuICAgICAgICAgICAgICAgICAgICA8UmVuZGVyZXJPcHRpb25zIHBsdWdpbj17c2VsZWN0ZWRQbHVnaW59IC8+XG4gICAgICAgICAgICAgICAgPC8+XG4gICAgICAgICAgICA8L0dyaWQ+XG4gICAgICAgIDwvPlxuICAgICk7XG59O1xuXG5leHBvcnQgZGVmYXVsdCBBcHBlYXJhbmNlVGFiO1xuIl19 */",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+  }),
+  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;",
+    map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkFwcGVhcmFuY2VUYWIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW1Cb0IiLCJmaWxlIjoiQXBwZWFyYW5jZVRhYi50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHsgdXNlRWZmZWN0IH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgeyBpMThuIH0gZnJvbSBcIkB3ZWJpbnkvYXBwL2kxOG5cIjtcbmltcG9ydCB7IGNzcyB9IGZyb20gXCJAZW1vdGlvbi9jc3NcIjtcbmltcG9ydCB7IHZhbGlkYXRpb24gfSBmcm9tIFwiQHdlYmlueS92YWxpZGF0aW9uXCI7XG5pbXBvcnQgeyB1c2VCaW5kIH0gZnJvbSBcIkB3ZWJpbnkvZm9ybVwiO1xuaW1wb3J0IHsgYWxsb3dDbXNMZWdhY3lSaWNoVGV4dElucHV0IH0gZnJvbSBcIn4vdXRpbHMvYWxsb3dDbXNMZWdhY3lSaWNoVGV4dElucHV0XCI7XG5pbXBvcnQgeyBSZW5kZXJlck9wdGlvbnMgfSBmcm9tIFwiLi9BcHBlYXJhbmNlVGFiL1JlbmRlcmVyT3B0aW9uc1wiO1xuaW1wb3J0IHsgTGVnYWN5UmljaFRleHRJbnB1dCB9IGZyb20gXCIuL0FwcGVhcmFuY2VUYWIvTGVnYWN5UmljaFRleHRJbnB1dFwiO1xuaW1wb3J0IHsgdXNlUmVuZGVyZXJQbHVnaW5zIH0gZnJvbSBcIi4vdXNlUmVuZGVyZXJQbHVnaW5zXCI7XG5pbXBvcnQgeyB1c2VNb2RlbEZpZWxkIH0gZnJvbSBcIn4vYWRtaW4vY29tcG9uZW50cy9Nb2RlbEZpZWxkUHJvdmlkZXJcIjtcbmltcG9ydCB7IFJhZGlvR3JvdXAsIFRleHQsIEdyaWQsIEhlYWRpbmcgfSBmcm9tIFwiQHdlYmlueS9hZG1pbi11aVwiO1xuXG5jb25zdCB0ID0gaTE4bi5ucyhcImFwcC1oZWFkbGVzcy1jbXMvYWRtaW4vY29udGVudC1tb2RlbC1lZGl0b3IvdGFicy9hcHBlYXJhbmNlLXRhYlwiKTtcblxuY29uc3Qgc3R5bGUgPSB7XG4gICAgbm9Db21wb25lbnRzTWVzc2FnZTogY3NzKHtcbiAgICAgICAgdGV4dEFsaWduOiBcImNlbnRlclwiLFxuICAgICAgICBwYWRkaW5nOiAyNVxuICAgIH0pLFxuICAgIHJhZGlvQ29udGFpbmVyOiBjc3Moe1xuICAgICAgICBtYXJnaW5Cb3R0b206IDEwLFxuICAgICAgICBkaXNwbGF5OiBcImZsZXhcIlxuICAgIH0pXG59O1xuXG5jb25zdCBBcHBlYXJhbmNlVGFiID0gKCkgPT4ge1xuICAgIGNvbnN0IHJlbmRlcmVycyA9IHVzZVJlbmRlcmVyUGx1Z2lucygpO1xuICAgIGNvbnN0IHsgZmllbGQgfSA9IHVzZU1vZGVsRmllbGQoKTtcblxuICAgIGNvbnN0IHJlbmRlcmVyTmFtZSA9IHVzZUJpbmQoe1xuICAgICAgICBuYW1lOiBcInJlbmRlcmVyLm5hbWVcIixcbiAgICAgICAgdmFsaWRhdGU6IHZhbGlkYXRpb24uY3JlYXRlKFwicmVxdWlyZWRcIilcbiAgICB9KTtcblxuICAgIGNvbnN0IHNlbGVjdGVkUGx1Z2luID0gcmVuZGVyZXJOYW1lLnZhbHVlXG4gICAgICAgID8gcmVuZGVyZXJzLmZpbmQocGwgPT4gcGwucmVuZGVyZXIucmVuZGVyZXJOYW1lID09PSByZW5kZXJlck5hbWUudmFsdWUpXG4gICAgICAgIDogdW5kZWZpbmVkO1xuXG4gICAgaWYgKHJlbmRlcmVycy5sZW5ndGggPT09IDApIHtcbiAgICAgICAgcmV0dXJuIChcbiAgICAgICAgICAgIDxHcmlkPlxuICAgICAgICAgICAgICAgIDxHcmlkLkNvbHVtblxuICAgICAgICAgICAgICAgICAgICBzcGFuPXsxMn1cbiAgICAgICAgICAgICAgICAgICAgY2xhc3NOYW1lPXtzdHlsZS5ub0NvbXBvbmVudHNNZXNzYWdlfVxuICAgICAgICAgICAgICAgID57dGBUaGVyZSBhcmUgbm8gY29tcG9uZW50cyB0aGF0IGNhbiByZW5kZXIgdGhpcyBmaWVsZC5gfTwvR3JpZC5Db2x1bW4+XG4gICAgICAgICAgICA8L0dyaWQ+XG4gICAgICAgICk7XG4gICAgfVxuXG4gICAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICAgICAgLy8gSWYgdGhlIGN1cnJlbnRseSBzZWxlY3RlZCByZW5kZXIgcGx1Z2luIGlzIG5vIGxvbmdlciBhdmFpbGFibGUsIHNlbGVjdCB0aGUgZmlyc3QgYXZhaWxhYmxlIG9uZS5cbiAgICAgICAgaWYgKHNlbGVjdGVkUGx1Z2luKSB7XG4gICAgICAgICAgICByZXR1cm47XG4gICAgICAgIH1cblxuICAgICAgICBpZiAocmVuZGVyZXJzWzBdKSB7XG4gICAgICAgICAgICByZW5kZXJlck5hbWUub25DaGFuZ2UocmVuZGVyZXJzWzBdLnJlbmRlcmVyLnJlbmRlcmVyTmFtZSk7XG4gICAgICAgICAgICByZXR1cm47XG4gICAgICAgIH1cblxuICAgICAgICBjb25zb2xlLmluZm8oYE5vIHJlbmRlcmVycyBmb3IgZmllbGQgJHtmaWVsZC5maWVsZElkfSBmb3VuZC5gLCBmaWVsZCk7XG4gICAgfSwgW2ZpZWxkLmlkLCBmaWVsZC5tdWx0aXBsZVZhbHVlcywgZmllbGQucHJlZGVmaW5lZFZhbHVlcz8uZW5hYmxlZCwgc2VsZWN0ZWRQbHVnaW5dKTtcblxuICAgIHJldHVybiAoXG4gICAgICAgIDw+XG4gICAgICAgICAgICA8R3JpZD5cbiAgICAgICAgICAgICAgICA8PlxuICAgICAgICAgICAgICAgICAgICB7YWxsb3dDbXNMZWdhY3lSaWNoVGV4dElucHV0ICYmIChcbiAgICAgICAgICAgICAgICAgICAgICAgIDxHcmlkLkNvbHVtbiBzcGFuPXs2fT5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8TGVnYWN5UmljaFRleHRJbnB1dCAvPlxuICAgICAgICAgICAgICAgICAgICAgICAgPC9HcmlkLkNvbHVtbj5cbiAgICAgICAgICAgICAgICAgICAgKX1cbiAgICAgICAgICAgICAgICAgICAgPEdyaWQuQ29sdW1uIHNwYW49ezEyfT5cbiAgICAgICAgICAgICAgICAgICAgICAgIDxIZWFkaW5nIGxldmVsPXs1fT5GaWVsZCByZW5kZXJlcjwvSGVhZGluZz5cbiAgICAgICAgICAgICAgICAgICAgICAgIDxUZXh0IHNpemU9e1wic21cIn0+Q2hvb3NlIGEgY29tcG9uZW50IHRoYXQgd2lsbCByZW5kZXIgdGhlIGZpZWxkLjwvVGV4dD5cbiAgICAgICAgICAgICAgICAgICAgPC9HcmlkLkNvbHVtbj5cbiAgICAgICAgICAgICAgICAgICAgPEdyaWQuQ29sdW1uIHNwYW49ezEyfT5cbiAgICAgICAgICAgICAgICAgICAgICAgIDxkaXYgY2xhc3NOYW1lPXtcIndieS1tYi14bFwifT5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8UmFkaW9Hcm91cFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB7Li4ucmVuZGVyZXJOYW1lfVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBpdGVtcz17cmVuZGVyZXJzLm1hcChpdGVtID0+ICh7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBpZDogaXRlbS5yZW5kZXJlci5yZW5kZXJlck5hbWUsXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB2YWx1ZTogaXRlbS5yZW5kZXJlci5yZW5kZXJlck5hbWUsXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBsYWJlbDogKFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxkaXY+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxUZXh0IGFzPXtcImRpdlwifSBzaXplPXtcIm1kXCJ9PlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAge2l0ZW0ucmVuZGVyZXIubmFtZX1cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPC9UZXh0PlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8VGV4dFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgYXM9e1wiZGl2XCJ9XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBzaXplPXtcInNtXCJ9XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBjbGFzc05hbWU9e1wid2J5LXRleHQtc20gd2J5LXRleHQtbmV1dHJhbC1zdHJvbmdcIn1cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAge2l0ZW0ucmVuZGVyZXIuZGVzY3JpcHRpb259XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDwvVGV4dD5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIClcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgfSkpfVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIC8+XG4gICAgICAgICAgICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgICAgICAgICAgPC9HcmlkLkNvbHVtbj5cbiAgICAgICAgICAgICAgICAgICAgPFJlbmRlcmVyT3B0aW9ucyBwbHVnaW49e3NlbGVjdGVkUGx1Z2lufSAvPlxuICAgICAgICAgICAgICAgIDwvPlxuICAgICAgICAgICAgPC9HcmlkPlxuICAgICAgICA8Lz5cbiAgICApO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgQXBwZWFyYW5jZVRhYjtcbiJdfQ== */",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+  })
 };
-
-var AppearanceTab = function AppearanceTab(props) {
-  var field = props.field,
-      form = props.form;
-  var renderPlugins = plugins.byType("cms-editor-field-renderer").filter(function (item) {
-    return item.renderer.canUse({
-      field: field
-    });
-  });
-  useEffect(function () {
-    // If the currently selected render plugin is no longer available, select the first available one.
-    var currentlySelectedRenderAvailable = renderPlugins.find(function (item) {
-      return item.renderer.rendererName === field.renderer.name;
-    });
-
-    if (!currentlySelectedRenderAvailable) {
-      if (renderPlugins[0]) {
-        form.setValue("renderer.name", renderPlugins[0].renderer.rendererName);
-      } else {
-        console.log("No renderers for field ".concat(field.fieldId, " found."), field);
-      }
-    }
+const AppearanceTab = () => {
+  const renderers = useRendererPlugins();
+  const {
+    field
+  } = useModelField();
+  const rendererName = useBind({
+    name: "renderer.name",
+    validate: validation.create("required")
   });
-
-  if (renderPlugins.length === 0) {
-    return /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Cell, {
+  const selectedPlugin = rendererName.value ? renderers.find(pl => pl.renderer.rendererName === rendererName.value) : undefined;
+  if (renderers.length === 0) {
+    return /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Grid.Column, {
       span: 12,
       className: style.noComponentsMessage
-    }, t(_templateObject || (_templateObject = _taggedTemplateLiteral(["There are no components that can render this field."])))));
+    }, t`There are no components that can render this field.`));
   }
-
-  var Bind = form.Bind;
-  return /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Cell, {
+  useEffect(() => {
+    // If the currently selected render plugin is no longer available, select the first available one.
+    if (selectedPlugin) {
+      return;
+    }
+    if (renderers[0]) {
+      rendererName.onChange(renderers[0].renderer.rendererName);
+      return;
+    }
+    console.info(`No renderers for field ${field.fieldId} found.`, field);
+  }, [field.id, field.multipleValues, field.predefinedValues?.enabled, selectedPlugin]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(React.Fragment, null, allowCmsLegacyRichTextInput && /*#__PURE__*/React.createElement(Grid.Column, {
+    span: 6
+  }, /*#__PURE__*/React.createElement(LegacyRichTextInput, null)), /*#__PURE__*/React.createElement(Grid.Column, {
+    span: 12
+  }, /*#__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.createElement("div", {
-    className: style.topLabel
-  }, t(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["Choose a component that will render the field:"])))), /*#__PURE__*/React.createElement(Bind, {
-    name: "renderer.name",
-    validate: validation.create("required")
-  }, /*#__PURE__*/React.createElement(RadioGroup, null, function (_ref) {
-    var onChange = _ref.onChange,
-        getValue = _ref.getValue;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, renderPlugins.map(function (item) {
-      return /*#__PURE__*/React.createElement("div", {
-        key: item.name,
-        className: style.radioContainer
-      }, /*#__PURE__*/React.createElement(Radio, {
-        value: getValue(item.renderer.rendererName),
-        onChange: onChange(item.renderer.rendererName),
-        label: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, item.renderer.name), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Typography, {
-          use: "caption"
-        }, item.renderer.description)))
-      }));
-    }));
+    className: "wby-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: "wby-text-sm wby-text-neutral-strong"
+      }, item.renderer.description))
+    }))
+  })))), /*#__PURE__*/React.createElement(RendererOptions, {
+    plugin: selectedPlugin
   }))));
 };
+export default AppearanceTab;
 
-export default AppearanceTab;
+//# sourceMappingURL=AppearanceTab.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","i18n","css","validation","useBind","allowCmsLegacyRichTextInput","RendererOptions","LegacyRichTextInput","useRendererPlugins","useModelField","RadioGroup","Text","Grid","Heading","t","ns","style","noComponentsMessage","process","env","NODE_ENV","name","styles","map","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","multipleValues","predefinedValues","enabled","Fragment","level","size","Object","assign","items","item","label","as","description","plugin"],"sources":["AppearanceTab.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { css } from \"@emotion/css\";\nimport { validation } from \"@webiny/validation\";\nimport { useBind } from \"@webiny/form\";\nimport { allowCmsLegacyRichTextInput } from \"~/utils/allowCmsLegacyRichTextInput\";\nimport { RendererOptions } from \"./AppearanceTab/RendererOptions\";\nimport { LegacyRichTextInput } from \"./AppearanceTab/LegacyRichTextInput\";\nimport { useRendererPlugins } from \"./useRendererPlugins\";\nimport { useModelField } from \"~/admin/components/ModelFieldProvider\";\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.multipleValues, field.predefinedValues?.enabled, selectedPlugin]);\n\n    return (\n        <>\n            <Grid>\n                <>\n                    {allowCmsLegacyRichTextInput && (\n                        <Grid.Column span={6}>\n                            <LegacyRichTextInput />\n                        </Grid.Column>\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={\"wby-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={\"wby-text-sm wby-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":[]}

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

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

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

@@ -1,90 +1,92 @@
-import _camelCase from "lodash/camelCase";
 import React, { useEffect, useCallback, useRef, useMemo } from "react";
-import { Input } from "@webiny/ui/Input";
-import { Switch } from "@webiny/ui/Switch";
-import { Grid, Cell } from "@webiny/ui/Grid";
+import camelCase from "lodash/camelCase";
+import { Grid, Switch, Input, Label } from "@webiny/admin-ui";
 import { validation } from "@webiny/validation";
-import { useFieldEditor } from "./..";
-import { useContentModelEditor } from "../../ContentModelEditor/useContentModelEditor";
+import { Tags } from "@webiny/ui/Tags";
+import { useForm, Bind } from "@webiny/form";
+import { useModelFieldEditor } from "./..";
+import { useModelEditor } from "../../../hooks";
+import { useModelField } from "../../../hooks";
+const GeneralTab = () => {
+  const form = useForm();
+  const {
+    field,
+    fieldPlugin
+  } = useModelField();
+  const inputRef = useRef(null);
+  const {
+    data: contentModel
+  } = useModelEditor();
+  const {
+    getField
+  } = useModelFieldEditor();
 
-var GeneralTab = function GeneralTab(_ref) {
-  var field = _ref.field,
-      form = _ref.form,
-      fieldPlugin = _ref.fieldPlugin;
-  var Bind = form.Bind,
-      setValue = form.setValue;
-  var inputRef = useRef(null);
-
-  var _useContentModelEdito = useContentModelEditor(),
-      data = _useContentModelEdito.data;
-
-  var _useFieldEditor = useFieldEditor(),
-      getField = _useFieldEditor.getField; // Had problems with auto-focusing the "label" field. A couple of comments on this.
+  // Had problems with autofocusing 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
   //    in the RMWC / Material library. If you were to click somewhere on screen, and then apply focus, then
   //    it seems it's behaving correctly. ¯\_(ツ)_/¯
-
-
-  useEffect(function () {
-    setTimeout(function () {
-      inputRef.current && inputRef.current.focus();
-    }, 200);
+  useEffect(() => {
+    setTimeout(() => {
+      if (!inputRef.current) {
+        return;
+      }
+      inputRef.current.focus();
+    }, /* The value of 400 was determined by manual testing. */400);
   }, []);
-  var afterChangeLabel = useCallback(function (value) {
-    setValue("fieldId", _camelCase(value));
+  const afterChangeLabel = useCallback(value => {
+    form.setValue("fieldId", camelCase(value));
   }, []);
-  var beforeChangeFieldId = useCallback(function (value, baseOnChange) {
-    var newValue = value.trim();
-    baseOnChange(newValue);
+  const beforeChangeFieldId = useCallback((value, baseOnChange) => {
+    baseOnChange(value.trim());
   }, []);
-  var fieldIdValidator = useCallback(function (fieldId) {
+  const fieldIdValidator = useCallback(fieldId => {
     if (fieldId.trim().toLowerCase() !== "id") {
       return true;
     }
-
-    throw new Error("Cannot use \"id\" as Field ID.");
-  }, undefined);
-  var uniqueFieldIdValidator = useCallback(function (fieldId) {
-    var existingField = getField({
-      fieldId: fieldId
+    throw new Error(`Cannot use "id" as Field ID.`);
+  }, []);
+  const uniqueFieldIdValidator = useCallback(fieldId => {
+    const existingField = getField({
+      fieldId
     });
-
     if (!existingField) {
-      return;
+      return false;
     }
-
     if (existingField.id === field.id) {
       return true;
     }
-
     throw new Error("Please enter a unique Field ID.");
-  }, undefined);
-  var additionalSettings = null;
-
+  }, []);
+  let additionalSettings = null;
   if (typeof fieldPlugin.field.renderSettings === "function") {
     additionalSettings = fieldPlugin.field.renderSettings({
-      form: form,
-      afterChangeLabel: afterChangeLabel,
-      uniqueFieldIdValidator: uniqueFieldIdValidator,
-      contentModel: data
+      afterChangeLabel,
+      uniqueFieldIdValidator,
+      contentModel
     });
   }
-
-  var predefinedValuesEnabled = useMemo(function () {
-    return fieldPlugin.field.allowPredefinedValues && typeof fieldPlugin.field.renderPredefinedValues === "function";
-  }, [field.fieldId]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Cell, {
+  const predefinedValuesEnabled = useMemo(() => (fieldPlugin.field.allowPredefinedValues || false) && typeof fieldPlugin.field.renderPredefinedValues === "function", [field.fieldId]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Grid, {
+    gap: "comfortable"
+  }, /*#__PURE__*/React.createElement(Grid.Column, {
     span: 6
   }, /*#__PURE__*/React.createElement(Bind, {
     name: "label",
     validators: validation.create("required"),
-    afterChange: !field.id && afterChangeLabel
+    afterChange: value => {
+      if (field.id) {
+        return;
+      }
+      afterChangeLabel(value);
+    }
   }, /*#__PURE__*/React.createElement(Input, {
     label: "Label",
-    inputRef: inputRef
-  }))), /*#__PURE__*/React.createElement(Cell, {
+    size: "lg",
+    inputRef: inputRef,
+    "data-testid": "cms.editor.field.settings.general.label"
+  }))), /*#__PURE__*/React.createElement(Grid.Column, {
     span: 6
   }, /*#__PURE__*/React.createElement(Bind, {
     name: "fieldId",
@@ -92,29 +94,50 @@ var GeneralTab = function GeneralTab(_ref) {
     beforeChange: beforeChangeFieldId
   }, /*#__PURE__*/React.createElement(Input, {
     label: "Field ID",
-    disabled: !!field.id
-  }))), /*#__PURE__*/React.createElement(Cell, {
+    size: "lg",
+    "data-testid": `cms.editor.field.settings.general.label-${field.id}`
+  }))), /*#__PURE__*/React.createElement(Grid.Column, {
     span: 6
   }, /*#__PURE__*/React.createElement(Bind, {
     name: "multipleValues"
   }, /*#__PURE__*/React.createElement(Switch, {
     label: fieldPlugin.field.multipleValuesLabel,
-    disabled: !fieldPlugin.field.allowMultipleValues
-  }))), /*#__PURE__*/React.createElement(Cell, {
+    disabled: !fieldPlugin.field.allowMultipleValues,
+    "data-testid": `cms.editor.field.settings.general.switch-multiplevalues`
+  }))), /*#__PURE__*/React.createElement(Grid.Column, {
     span: 6
   }, /*#__PURE__*/React.createElement(Bind, {
     name: "predefinedValues.enabled"
   }, /*#__PURE__*/React.createElement(Switch, {
     label: "Use predefined values",
-    disabled: !predefinedValuesEnabled
-  }))), /*#__PURE__*/React.createElement(Cell, {
+    disabled: !predefinedValuesEnabled,
+    "data-testid": `cms.editor.field.settings.general.switch-predefinedvalues`
+  }))), /*#__PURE__*/React.createElement(Grid.Column, {
     span: 12
   }, /*#__PURE__*/React.createElement(Bind, {
     name: "helpText"
   }, /*#__PURE__*/React.createElement(Input, {
-    label: "Help text",
-    description: "Help text (optional)"
-  })))), additionalSettings);
+    label: /*#__PURE__*/React.createElement(Label, {
+      text: "Help text",
+      description: "(optional)"
+    }),
+    size: "lg",
+    "data-testid": `cms.editor.field.settings.general.helptext`
+  }))), /*#__PURE__*/React.createElement(Grid.Column, {
+    span: 12
+  }, /*#__PURE__*/React.createElement(Bind, {
+    name: "tags"
+  }, /*#__PURE__*/React.createElement(Tags, {
+    label: /*#__PURE__*/React.createElement(Label, {
+      text: "Tags",
+      description: "(optional)"
+    }),
+    protectedTags: fieldPlugin.field.tags,
+    "data-testid": `cms.editor.field.settings.general.tags`
+  }))), /*#__PURE__*/React.createElement(Grid.Column, {
+    span: 12
+  }, additionalSettings)));
 };
+export default GeneralTab;
 
-export default GeneralTab;
+//# sourceMappingURL=GeneralTab.js.map