@webiny/app-headless-cms 0.0.0-unstable.78f581c1d2 → 0.0.0-unstable.7be00a75a9

package/admin/components/DropZone/Vertical.js

@@ -1,93 +1,35 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-
-var _Droppable = require("../Droppable");
-
-var InnerDivVertical = /*#__PURE__*/(0, _styled.default)("div", {
-  target: "e1yx4w3z0",
-  label: "InnerDivVertical"
-})({
-  position: "absolute",
-  width: 10,
-  height: "100%",
-  zIndex: 3,
-  borderRadius: 0,
-  display: "none",
-  boxSizing: "border-box",
-  border: "1px dashed black",
-  borderSpacing: 5
-});
-var BackgroundColorDiv = /*#__PURE__*/(0, _styled.default)("div", {
-  target: "e1yx4w3z1",
-  label: "BackgroundColorDiv"
-})({
-  width: "100%",
-  height: "100%"
-});
-var OuterDivVertical = /*#__PURE__*/(0, _styled.default)("div", {
-  target: "e1yx4w3z2",
-  label: "OuterDivVertical"
-})({
-  position: "absolute",
-  width: "30%",
-  top: 0,
-  height: "100%",
-  zIndex: 10,
-  backgroundColor: "transparent"
-}, function (props) {
-  var _InnerDivVertical, _ref;
-
-  return _ref = {}, (0, _defineProperty2.default)(_ref, props.last ? "right" : "left", -9), (0, _defineProperty2.default)(_ref, "textAlign", props.last ? "right" : "left"), (0, _defineProperty2.default)(_ref, InnerDivVertical, (_InnerDivVertical = {
-    borderColor: props.isOver ? "var(--mdc-theme-primary)" : "var(--mdc-theme-secondary)"
-  }, (0, _defineProperty2.default)(_InnerDivVertical, props.last ? "right" : "left", -2), (0, _defineProperty2.default)(_InnerDivVertical, "display", props.isDragging ? "block" : "none"), (0, _defineProperty2.default)(_InnerDivVertical, BackgroundColorDiv, {
-    opacity: 0.5,
-    backgroundColor: props.isOver ? "var(--mdc-theme-primary)" : "var(--mdc-theme-secondary)"
-  }), _InnerDivVertical)), _ref;
-});
-
-var Vertical = function Vertical(_ref2) {
-  var depth = _ref2.depth,
-      last = _ref2.last,
-      onDrop = _ref2.onDrop,
-      isVisible = _ref2.isVisible;
-  return /*#__PURE__*/_react.default.createElement(_Droppable.Droppable, {
-    onDrop: onDrop,
-    isVisible: isVisible
-  }, function (_ref3) {
-    var _ref4;
-
-    var isOver = _ref3.isOver,
-        isDragging = _ref3.isDragging,
-        drop = _ref3.drop;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      ref: drop,
-      style: (_ref4 = {
-        /* For dropzone debugging: border: "1px solid blue",*/
-        width: "30%",
-        maxWidth: "100px",
-        height: "100%",
-        position: "absolute",
-        top: 0
-      }, (0, _defineProperty2.default)(_ref4, last ? "right" : "left", 0), (0, _defineProperty2.default)(_ref4, "zIndex", isDragging ? 1000 + (depth || 0) : -1), _ref4)
-    }, /*#__PURE__*/_react.default.createElement(OuterDivVertical, {
-      isOver: isOver,
-      isDragging: isDragging,
-      last: last
-    }, /*#__PURE__*/_react.default.createElement(InnerDivVertical, null, /*#__PURE__*/_react.default.createElement(BackgroundColorDiv, null))));
-  });
-};
-
-var _default = Vertical;
-exports.default = _default;
+import react from "react";
+import { Droppable } from "../Droppable.js";
+import { cn } from "@webiny/admin-ui";
+const OuterDivVertical = ({ isOver, last, isDragging })=>/*#__PURE__*/ react.createElement("div", {
+        className: cn("absolute top-0 h-full w-[30%] z-10 bg-transparent", last ? "text-right -right-sm" : "text-left -left-sm")
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: cn("absolute w-md h-full z-3 border-dashed border-sm hidden", isOver ? "border-accent-default" : "border-success-default", last ? "-right-sm" : "-left-sm", isDragging && "block")
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: cn("w-full h-full opacity-50", isOver ? "bg-primary-muted" : "bg-success-muted")
+    })));
+const Vertical = ({ depth, last, onDrop, isVisible })=>/*#__PURE__*/ react.createElement(Droppable, {
+        onDrop: onDrop,
+        isVisible: isVisible
+    }, ({ isOver, isDragging, drop })=>/*#__PURE__*/ react.createElement("div", {
+            ref: (element)=>{
+                drop(element);
+            },
+            style: {
+                width: "30%",
+                maxWidth: "100px",
+                height: "100%",
+                position: "absolute",
+                top: 0,
+                [last ? "right" : "left"]: 0,
+                zIndex: isDragging ? 1000 + (depth || 0) : -1
+            }
+        }, /*#__PURE__*/ react.createElement(OuterDivVertical, {
+            isOver: isOver,
+            isDragging: isDragging,
+            last: last
+        })));
+const DropZone_Vertical = Vertical;
+export default DropZone_Vertical;
+
+//# sourceMappingURL=Vertical.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["InnerDivVertical","styled","position","width","height","zIndex","borderRadius","display","boxSizing","border","borderSpacing","BackgroundColorDiv","OuterDivVertical","top","backgroundColor","props","last","borderColor","isOver","isDragging","opacity","Vertical","depth","onDrop","isVisible","drop","maxWidth"],"sources":["Vertical.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { Droppable, IsVisibleCallable } from \"../Droppable\";\nimport { DragSource } from \"~/admin/components/FieldEditor/FieldEditorContext\";\n\nconst InnerDivVertical = styled(\"div\")({\n    position: \"absolute\",\n    width: 10,\n    height: \"100%\",\n    zIndex: 3,\n    borderRadius: 0,\n    display: \"none\",\n    boxSizing: \"border-box\",\n    border: \"1px dashed black\",\n    borderSpacing: 5\n});\n\nconst BackgroundColorDiv = styled(\"div\")({\n    width: \"100%\",\n    height: \"100%\"\n});\n\ninterface OuterDivVerticalProps {\n    isOver: boolean;\n    last?: boolean;\n    isVisible?: IsVisibleCallable;\n    isDragging?: boolean;\n}\n\nconst OuterDivVertical = styled(\"div\")(\n    {\n        position: \"absolute\",\n        width: \"30%\",\n        top: 0,\n        height: \"100%\",\n        zIndex: 10,\n        backgroundColor: \"transparent\"\n    },\n    (props: OuterDivVerticalProps) => ({\n        [props.last ? \"right\" : \"left\"]: -9,\n        textAlign: props.last ? \"right\" : \"left\",\n        // @ts-ignore\n        [InnerDivVertical]: {\n            borderColor: props.isOver ? \"var(--mdc-theme-primary)\" : \"var(--mdc-theme-secondary)\",\n            [props.last ? \"right\" : \"left\"]: -2,\n            display: props.isDragging ? \"block\" : \"none\",\n            // @ts-ignore\n            [BackgroundColorDiv]: {\n                opacity: 0.5,\n                backgroundColor: props.isOver\n                    ? \"var(--mdc-theme-primary)\"\n                    : \"var(--mdc-theme-secondary)\"\n            }\n        }\n    })\n);\n\ninterface VerticalProps {\n    depth?: number;\n    onDrop(item: DragSource): void;\n    last?: boolean;\n    isVisible?: any;\n}\n\nconst Vertical: React.FC<VerticalProps> = ({ depth, last, onDrop, isVisible }) => {\n    return (\n        <Droppable onDrop={onDrop} isVisible={isVisible}>\n            {({ isOver, isDragging, drop }) => (\n                <div\n                    ref={drop}\n                    style={{\n                        /* For dropzone debugging: border: \"1px solid blue\",*/\n                        width: \"30%\",\n                        maxWidth: \"100px\",\n                        height: \"100%\",\n                        position: \"absolute\",\n                        top: 0,\n                        [last ? \"right\" : \"left\"]: 0,\n                        zIndex: isDragging ? 1000 + (depth || 0) : -1\n                    }}\n                >\n                    <OuterDivVertical isOver={isOver} isDragging={isDragging} last={last}>\n                        <InnerDivVertical>\n                            <BackgroundColorDiv />\n                        </InnerDivVertical>\n                    </OuterDivVertical>\n                </div>\n            )}\n        </Droppable>\n    );\n};\n\nexport default Vertical;\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AAGA,IAAMA,gBAAgB,oBAAGC,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,GAAiB;EACnCC,QAAQ,EAAE,UADyB;EAEnCC,KAAK,EAAE,EAF4B;EAGnCC,MAAM,EAAE,MAH2B;EAInCC,MAAM,EAAE,CAJ2B;EAKnCC,YAAY,EAAE,CALqB;EAMnCC,OAAO,EAAE,MAN0B;EAOnCC,SAAS,EAAE,YAPwB;EAQnCC,MAAM,EAAE,kBAR2B;EASnCC,aAAa,EAAE;AAToB,CAAjB,CAAtB;AAYA,IAAMC,kBAAkB,oBAAGV,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,GAAiB;EACrCE,KAAK,EAAE,MAD8B;EAErCC,MAAM,EAAE;AAF6B,CAAjB,CAAxB;AAYA,IAAMQ,gBAAgB,oBAAGX,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,GAClB;EACIC,QAAQ,EAAE,UADd;EAEIC,KAAK,EAAE,KAFX;EAGIU,GAAG,EAAE,CAHT;EAIIT,MAAM,EAAE,MAJZ;EAKIC,MAAM,EAAE,EALZ;EAMIS,eAAe,EAAE;AANrB,CADkB,EASlB,UAACC,KAAD;EAAA;;EAAA,sDACKA,KAAK,CAACC,IAAN,GAAa,OAAb,GAAuB,MAD5B,EACqC,CAAC,CADtC,oDAEeD,KAAK,CAACC,IAAN,GAAa,OAAb,GAAuB,MAFtC,uCAIKhB,gBAJL;IAKQiB,WAAW,EAAEF,KAAK,CAACG,MAAN,GAAe,0BAAf,GAA4C;EALjE,oDAMSH,KAAK,CAACC,IAAN,GAAa,OAAb,GAAuB,MANhC,EAMyC,CAAC,CAN1C,+DAOiBD,KAAK,CAACI,UAAN,GAAmB,OAAnB,GAA6B,MAP9C,oDASSR,kBATT,EAS8B;IAClBS,OAAO,EAAE,GADS;IAElBN,eAAe,EAAEC,KAAK,CAACG,MAAN,GACX,0BADW,GAEX;EAJY,CAT9B;AAAA,CATkB,CAAtB;;AAmCA,IAAMG,QAAiC,GAAG,SAApCA,QAAoC,QAAwC;EAAA,IAArCC,KAAqC,SAArCA,KAAqC;EAAA,IAA9BN,IAA8B,SAA9BA,IAA8B;EAAA,IAAxBO,MAAwB,SAAxBA,MAAwB;EAAA,IAAhBC,SAAgB,SAAhBA,SAAgB;EAC9E,oBACI,6BAAC,oBAAD;IAAW,MAAM,EAAED,MAAnB;IAA2B,SAAS,EAAEC;EAAtC,GACK;IAAA;;IAAA,IAAGN,MAAH,SAAGA,MAAH;IAAA,IAAWC,UAAX,SAAWA,UAAX;IAAA,IAAuBM,IAAvB,SAAuBA,IAAvB;IAAA,oBACG;MACI,GAAG,EAAEA,IADT;MAEI,KAAK;QACD;QACAtB,KAAK,EAAE,KAFN;QAGDuB,QAAQ,EAAE,OAHT;QAIDtB,MAAM,EAAE,MAJP;QAKDF,QAAQ,EAAE,UALT;QAMDW,GAAG,EAAE;MANJ,wCAOAG,IAAI,GAAG,OAAH,GAAa,MAPjB,EAO0B,CAP1B,kDAQOG,UAAU,GAAG,QAAQG,KAAK,IAAI,CAAjB,CAAH,GAAyB,CAAC,CAR3C;IAFT,gBAaI,6BAAC,gBAAD;MAAkB,MAAM,EAAEJ,MAA1B;MAAkC,UAAU,EAAEC,UAA9C;MAA0D,IAAI,EAAEH;IAAhE,gBACI,6BAAC,gBAAD,qBACI,6BAAC,kBAAD,OADJ,CADJ,CAbJ,CADH;EAAA,CADL,CADJ;AAyBH,CA1BD;;eA4BeK,Q"}
+{"version":3,"file":"admin/components/DropZone/Vertical.js","sources":["../../../../src/admin/components/DropZone/Vertical.tsx"],"sourcesContent":["import React from \"react\";\nimport type { IsVisibleCallable } from \"../Droppable.js\";\nimport { Droppable } from \"../Droppable.js\";\nimport type { DragSource } from \"~/types.js\";\nimport { cn } from \"@webiny/admin-ui\";\n\ninterface OuterDivVerticalProps {\n    isOver: boolean;\n    last?: boolean;\n    isDragging?: boolean;\n}\n\nconst OuterDivVertical = ({ isOver, last, isDragging }: OuterDivVerticalProps) => (\n    <div\n        className={cn(\n            \"absolute top-0 h-full w-[30%] z-10 bg-transparent\",\n            last ? \"text-right -right-sm\" : \"text-left -left-sm\"\n        )}\n    >\n        <div\n            className={cn(\n                \"absolute w-md h-full z-3 border-dashed border-sm hidden\",\n                isOver ? \"border-accent-default\" : \"border-success-default\",\n                last ? \"-right-sm\" : \"-left-sm\",\n                isDragging && \"block\"\n            )}\n        >\n            <div\n                className={cn(\n                    \"w-full h-full opacity-50\",\n                    isOver ? \"bg-primary-muted\" : \"bg-success-muted\"\n                )}\n            />\n        </div>\n    </div>\n);\n\ninterface VerticalProps {\n    depth?: number;\n    onDrop(item: DragSource): void;\n    last?: boolean;\n    isVisible?: IsVisibleCallable;\n}\n\nconst Vertical = ({ depth, last, onDrop, isVisible }: VerticalProps) => {\n    return (\n        <Droppable onDrop={onDrop} isVisible={isVisible}>\n            {({ isOver, isDragging, drop }) => (\n                <div\n                    ref={element => {\n                        drop(element);\n                    }}\n                    style={{\n                        /* For dropzone debugging: border: \"1px solid blue\",*/\n                        width: \"30%\",\n                        maxWidth: \"100px\",\n                        height: \"100%\",\n                        position: \"absolute\",\n                        top: 0,\n                        [last ? \"right\" : \"left\"]: 0,\n                        zIndex: isDragging ? 1000 + (depth || 0) : -1\n                    }}\n                >\n                    <OuterDivVertical isOver={isOver} isDragging={isDragging} last={last} />\n                </div>\n            )}\n        </Droppable>\n    );\n};\n\nexport default Vertical;\n"],"names":["OuterDivVertical","isOver","last","isDragging","cn","Vertical","depth","onDrop","isVisible","Droppable","drop","element"],"mappings":";;;AAYA,MAAMA,mBAAmB,CAAC,EAAEC,MAAM,EAAEC,IAAI,EAAEC,UAAU,EAAyB,iBACzE,oBAAC;QACG,WAAWC,GACP,qDACAF,OAAO,yBAAyB;qBAGpC,oBAAC;QACG,WAAWE,GACP,2DACAH,SAAS,0BAA0B,0BACnCC,OAAO,cAAc,YACrBC,cAAc;qBAGlB,oBAAC;QACG,WAAWC,GACP,4BACAH,SAAS,qBAAqB;;AAclD,MAAMI,WAAW,CAAC,EAAEC,KAAK,EAAEJ,IAAI,EAAEK,MAAM,EAAEC,SAAS,EAAiB,GACxD,WAAP,GACI,oBAACC,WAASA;QAAC,QAAQF;QAAQ,WAAWC;OACjC,CAAC,EAAEP,MAAM,EAAEE,UAAU,EAAEO,IAAI,EAAE,iBAC1B,oBAAC;YACG,KAAKC,CAAAA;gBACDD,KAAKC;YACT;YACA,OAAO;gBAEH,OAAO;gBACP,UAAU;gBACV,QAAQ;gBACR,UAAU;gBACV,KAAK;gBACL,CAACT,OAAO,UAAU,OAAO,EAAE;gBAC3B,QAAQC,aAAa,OAAQG,CAAAA,SAAS,KAAK;YAC/C;yBAEA,oBAACN,kBAAgBA;YAAC,QAAQC;YAAQ,YAAYE;YAAY,MAAMD;;AAOpF,0BAAeG"}

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

@@ -1,4 +1,4 @@
-import Center from "./Center";
-import Horizontal from "./Horizontal";
-import Vertical from "./Vertical";
+import Center from "./Center.js";
+import Horizontal from "./Horizontal.js";
+import Vertical from "./Vertical.js";
 export { Center, Horizontal, Vertical };

package/admin/components/DropZone/index.js

@@ -1,31 +1,3 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "Center", {
-  enumerable: true,
-  get: function get() {
-    return _Center.default;
-  }
-});
-Object.defineProperty(exports, "Horizontal", {
-  enumerable: true,
-  get: function get() {
-    return _Horizontal.default;
-  }
-});
-Object.defineProperty(exports, "Vertical", {
-  enumerable: true,
-  get: function get() {
-    return _Vertical.default;
-  }
-});
-
-var _Center = _interopRequireDefault(require("./Center"));
-
-var _Horizontal = _interopRequireDefault(require("./Horizontal"));
-
-var _Vertical = _interopRequireDefault(require("./Vertical"));
+export { default as Center } from "./Center.js";
+export { default as Horizontal } from "./Horizontal.js";
+export { default as Vertical } from "./Vertical.js";

package/admin/components/Droppable.d.ts

@@ -1,8 +1,9 @@
 import * as React from "react";
-import { ConnectDropTarget } from "react-dnd";
-import { DragSource } from "./FieldEditor/FieldEditorContext";
+import type { ConnectDropTarget } from "react-dnd";
+import type { DragSource } from "../../types.js";
 export interface DroppableChildrenFunctionParams {
     isDragging: boolean;
+    isDroppable: boolean;
     isOver: boolean;
     item: any;
     drop: ConnectDropTarget;
@@ -11,8 +12,8 @@ export interface DroppableChildrenFunction {
     (params: DroppableChildrenFunctionParams): React.ReactElement;
 }
 interface IsVisibleParams {
-    type: "row" | "field" | "newField";
-    item: any;
+    type: DragSource["type"];
+    item: DragSource;
     isDragging: boolean;
 }
 export interface IsVisibleCallable {
@@ -25,9 +26,13 @@ export interface DroppableProps {
     type?: string;
     children: DroppableChildrenFunction;
     isDragging?: boolean;
-    isDroppable?: (item: any) => boolean;
+    isDroppable?: (item: DragSource) => boolean;
     isVisible?: IsVisibleCallable;
     onDrop?: OnDropCallable;
 }
-export declare const Droppable: React.FC<DroppableProps>;
+export type DragObject = {
+    item: IsVisibleParams;
+    isOver: boolean;
+};
+export declare const Droppable: React.ComponentType<DroppableProps>;
 export {};

package/admin/components/Droppable.js

@@ -1,61 +1,32 @@
-"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(_, monitor) {
-      if (typeof onDrop === "function") {
-        return onDrop(monitor.getItem());
-      }
-    }
-  }),
-      _useDrop2 = (0, _slicedToArray2.default)(_useDrop, 2),
-      _useDrop2$ = _useDrop2[0],
-      item = _useDrop2$.item,
-      isOver = _useDrop2$.isOver,
-      drop = _useDrop2[1];
-
-  if (item && !isVisible(item)) {
-    return null;
-  }
-
-  return children({
-    isDragging: Boolean(item),
-    isOver: isOver,
-    item: item,
-    drop: drop
-  });
+import { useDrop } from "react-dnd";
+import * as __rspack_external_react from "react";
+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()
+            }),
+        drop (item, monitor) {
+            if ("function" == typeof props.isDroppable && !props.isDroppable(item)) return;
+            if ("function" == typeof onDrop) return onDrop(monitor.getItem());
+        }
+    });
+    if (item && !isVisible(item)) return null;
+    let isDroppable = true;
+    if (item) isDroppable = props.isDroppable ? props.isDroppable(item) : isOver;
+    return children({
+        isDragging: Boolean(item),
+        isOver,
+        isDroppable,
+        item,
+        drop
+    });
 };
+const Droppable = /*#__PURE__*/ __rspack_external_react.memo(DroppableComponent);
+export { Droppable };
 
-var Droppable = /*#__PURE__*/React.memo(DroppableComponent);
-exports.Droppable = Droppable;
+//# sourceMappingURL=Droppable.js.map

package/admin/components/Droppable.js.map

@@ -1 +1 @@
-{"version":3,"names":["DroppableComponent","props","children","onDrop","isVisible","useDrop","accept","collect","monitor","isOver","shallow","item","getItem","drop","_","isDragging","Boolean","Droppable","React","memo"],"sources":["Droppable.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { ConnectDropTarget, useDrop } from \"react-dnd\";\nimport { DragSource } from \"~/admin/components/FieldEditor/FieldEditorContext\";\n\nexport interface DroppableChildrenFunctionParams {\n    isDragging: boolean;\n    isOver: boolean;\n    item: any;\n    drop: ConnectDropTarget;\n}\nexport interface DroppableChildrenFunction {\n    (params: DroppableChildrenFunctionParams): React.ReactElement;\n}\n\ninterface IsVisibleParams {\n    type: \"row\" | \"field\" | \"newField\";\n    item: any;\n    isDragging: boolean;\n}\nexport interface IsVisibleCallable {\n    (params: IsVisibleParams): boolean;\n}\nexport interface OnDropCallable {\n    (item: DragSource): void;\n}\nexport interface DroppableProps {\n    type?: string;\n    children: DroppableChildrenFunction;\n    isDragging?: boolean;\n    isDroppable?: (item: any) => boolean;\n    isVisible?: IsVisibleCallable;\n    onDrop?: OnDropCallable;\n}\n\nconst DroppableComponent: React.FC<DroppableProps> = props => {\n    const { children, onDrop, isVisible = () => true } = props;\n\n    const [{ item, isOver }, drop] = useDrop({\n        accept: \"element\",\n        collect: monitor => ({\n            isOver: monitor.isOver() && monitor.isOver({ shallow: true }),\n            item: monitor.getItem()\n        }),\n        drop(_, monitor) {\n            if (typeof onDrop === \"function\") {\n                return onDrop(monitor.getItem());\n            }\n        }\n    });\n\n    if (item && !isVisible(item)) {\n        return null;\n    }\n\n    return children({ isDragging: Boolean(item), isOver, item, drop });\n};\n\nexport const Droppable: React.FC<DroppableProps> = React.memo(DroppableComponent);\n"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AAiCA,IAAMA,kBAA4C,GAAG,SAA/CA,kBAA+C,CAAAC,KAAK,EAAI;EAC1D,IAAQC,QAAR,GAAqDD,KAArD,CAAQC,QAAR;EAAA,IAAkBC,MAAlB,GAAqDF,KAArD,CAAkBE,MAAlB;EAAA,uBAAqDF,KAArD,CAA0BG,SAA1B;EAAA,IAA0BA,SAA1B,iCAAsC;IAAA,OAAM,IAAN;EAAA,CAAtC;;EAEA,eAAiC,IAAAC,iBAAA,EAAQ;IACrCC,MAAM,EAAE,SAD6B;IAErCC,OAAO,EAAE,iBAAAC,OAAO;MAAA,OAAK;QACjBC,MAAM,EAAED,OAAO,CAACC,MAAR,MAAoBD,OAAO,CAACC,MAAR,CAAe;UAAEC,OAAO,EAAE;QAAX,CAAf,CADX;QAEjBC,IAAI,EAAEH,OAAO,CAACI,OAAR;MAFW,CAAL;IAAA,CAFqB;IAMrCC,IANqC,gBAMhCC,CANgC,EAM7BN,OAN6B,EAMpB;MACb,IAAI,OAAOL,MAAP,KAAkB,UAAtB,EAAkC;QAC9B,OAAOA,MAAM,CAACK,OAAO,CAACI,OAAR,EAAD,CAAb;MACH;IACJ;EAVoC,CAAR,CAAjC;EAAA;EAAA;EAAA,IAASD,IAAT,cAASA,IAAT;EAAA,IAAeF,MAAf,cAAeA,MAAf;EAAA,IAAyBI,IAAzB;;EAaA,IAAIF,IAAI,IAAI,CAACP,SAAS,CAACO,IAAD,CAAtB,EAA8B;IAC1B,OAAO,IAAP;EACH;;EAED,OAAOT,QAAQ,CAAC;IAAEa,UAAU,EAAEC,OAAO,CAACL,IAAD,CAArB;IAA6BF,MAAM,EAANA,MAA7B;IAAqCE,IAAI,EAAJA,IAArC;IAA2CE,IAAI,EAAJA;EAA3C,CAAD,CAAf;AACH,CArBD;;AAuBO,IAAMI,SAAmC,gBAAGC,KAAK,CAACC,IAAN,CAAWnB,kBAAX,CAA5C"}
+{"version":3,"file":"admin/components/Droppable.js","sources":["../../../src/admin/components/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: DragSource[\"type\"];\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"],"names":["DroppableComponent","props","children","onDrop","isVisible","item","isOver","drop","useDrop","monitor","isDroppable","Boolean","Droppable","React"],"mappings":";;AAyCA,MAAMA,qBAAqB,CAACC;IACxB,MAAM,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,YAAY,IAAM,IAAI,EAAE,GAAGH;IAErD,MAAM,CAAC,EAAEI,IAAI,EAAEC,MAAM,EAAE,EAAEC,KAAK,GAAGC,QAAsC;QACnE,QAAQ;QACR,SAASC,CAAAA,UAAY;gBACjB,QAAQA,QAAQ,MAAM,MAAMA,QAAQ,MAAM,CAAC;oBAAE,SAAS;gBAAK;gBAC3D,MAAMA,QAAQ,OAAO;YACzB;QACA,MAAKJ,IAAI,EAAEI,OAAO;YACd,IAAI,AAA6B,cAA7B,OAAOR,MAAM,WAAW,IAAmB,CAACA,MAAM,WAAW,CAACI,OAC9D;YAGJ,IAAI,AAAkB,cAAlB,OAAOF,QACP,OAAOA,OAAOM,QAAQ,OAAO;QAErC;IACJ;IAEA,IAAIJ,QAAQ,CAACD,UAAUC,OACnB,OAAO;IAGX,IAAIK,cAAc;IAClB,IAAIL,MACAK,cAAcT,MAAM,WAAW,GAAGA,MAAM,WAAW,CAACI,QAAQC;IAGhE,OAAOJ,SAAS;QAAE,YAAYS,QAAQN;QAAOC;QAAQI;QAAaL;QAAME;IAAK;AACjF;AAEO,MAAMK,YAASA,WAAAA,GAAwCC,wBAAAA,IAAU,CAACb"}

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,13 @@
+import react from "react";
+import { Alert } from "@webiny/admin-ui";
+const LegacyRichTextInput = ()=>/*#__PURE__*/ react.createElement(Alert, {
+        type: "info",
+        variant: "subtle"
+    }, /*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement("strong", null, "You have legacy editor enabled")), /*#__PURE__*/ react.createElement("div", null, "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"), "."));
+export { LegacyRichTextInput };
+
+//# sourceMappingURL=LegacyRichTextInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"admin/components/FieldEditor/EditFieldDialog/AppearanceTab/LegacyRichTextInput.js","sources":["../../../../../../src/admin/components/FieldEditor/EditFieldDialog/AppearanceTab/LegacyRichTextInput.tsx"],"sourcesContent":["import React from \"react\";\nimport { Alert } from \"@webiny/admin-ui\";\n\nexport const LegacyRichTextInput = () => {\n    return (\n        <Alert type={\"info\"} variant={\"subtle\"}>\n            <div>\n                <strong>You have legacy editor enabled</strong>\n            </div>\n            <div>\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\n                editor, 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            </div>\n        </Alert>\n    );\n};\n"],"names":["LegacyRichTextInput","Alert"],"mappings":";;AAGO,MAAMA,sBAAsB,IACxB,WAAP,GACI,oBAACC,OAAKA;QAAC,MAAM;QAAQ,SAAS;qBAC1B,oBAAC,2BACG,oBAAC,gBAAO,kDAEZ,oBAAC,aAAI,yMAID,oBAAC,2BACD,oBAAC,aAAK,+BACsB,mBAC5B,oBAAC;QACG,MAAM;QACN,KAAI;QACJ,QAAQ;OACX,kBAEG"}

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/index.js";
+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,21 @@
+import react from "react";
+import { useModelField } from "../../../ModelFieldProvider/index.js";
+import { Grid, Heading, Text } from "@webiny/admin-ui";
+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);
+};
+export { RendererOptions };
+
+//# sourceMappingURL=RendererOptions.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"admin/components/FieldEditor/EditFieldDialog/AppearanceTab/RendererOptions.js","sources":["../../../../../../src/admin/components/FieldEditor/EditFieldDialog/AppearanceTab/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"],"names":["RendererOptions","plugin","field","useModelField","settings","Grid","Heading","Text"],"mappings":";;;AASO,MAAMA,kBAAkB,CAAC,EAAEC,MAAM,EAAwB;IAC5D,MAAM,EAAEC,KAAK,EAAE,GAAGC;IAClB,IAAI,CAACF,UAAU,CAACA,OAAO,QAAQ,CAAC,cAAc,EAC1C,OAAO;IAGX,MAAMG,WAAWH,OAAO,QAAQ,CAAC,cAAc,CAAC;QAAEC;IAAM;IAExD,IAAI,CAACE,UACD,OAAO;IAGX,OAAO,WAAP,GACI,wDACI,oBAACC,KAAK,MAAM;QAAC,MAAM;qBACf,oBAACC,SAAOA;QAAC,OAAO;OAAG,oCACnB,oBAACC,MAAIA;QAAC,MAAM;OAAM,oEAIrBH;AAGb"}

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

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

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

@@ -1,107 +1,74 @@
-"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 _plugins = require("@webiny/plugins");
-
-var _Grid = require("@webiny/ui/Grid");
-
-var _i18n = require("@webiny/app/i18n");
-
-var _Radio = require("@webiny/ui/Radio");
-
-var _Typography = require("@webiny/ui/Typography");
-
-var _emotion = require("emotion");
-
-var _validation = require("@webiny/validation");
-
-var _templateObject, _templateObject2;
-
-var t = _i18n.i18n.ns("app-headless-cms/admin/views/components/editor/tabs/edit-field-dialog/appearance-tab");
-
-var style = {
-  topLabel: /*#__PURE__*/(0, _emotion.css)({
-    marginBottom: 25
-  }, "label:topLabel;"),
-  noComponentsMessage: /*#__PURE__*/(0, _emotion.css)({
-    textAlign: "center",
-    padding: 25
-  }, "label:noComponentsMessage;"),
-  radioContainer: /*#__PURE__*/(0, _emotion.css)({
-    marginBottom: 10
-  }, "label:radioContainer;")
+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 { Grid, Heading, RadioGroup, Text } from "@webiny/admin-ui";
+const t = i18n.ns("app-headless-cms/admin/content-model-editor/tabs/appearance-tab");
+const style = {
+    noComponentsMessage: css({
+        textAlign: "center",
+        padding: 25
+    }),
+    radioContainer: css({
+        marginBottom: 10,
+        display: "flex"
+    })
 };
-
-var AppearanceTab = function AppearanceTab(props) {
-  var field = props.field,
-      form = props.form;
-
-  var renderPlugins = _plugins.plugins.byType("cms-editor-field-renderer").filter(function (item) {
-    return item.renderer.canUse({
-      field: field
+const AppearanceTab = ()=>{
+    const renderers = useRendererPlugins();
+    const { field } = useModelField();
+    const rendererName = useBind({
+        name: "renderer.name",
+        validate: validation.create("required")
     });
-  });
-
-  (0, _react.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) {
-      return;
-    } else if (renderPlugins[0]) {
-      form.setValue("renderer.name", renderPlugins[0].renderer.rendererName);
-      return;
-    }
-
-    console.info("No renderers for field ".concat(field.fieldId, " found."), field);
-  });
-
-  if (renderPlugins.length === 0) {
-    return /*#__PURE__*/_react.default.createElement(_Grid.Grid, null, /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
-      span: 12,
-      className: style.noComponentsMessage
-    }, t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["There are no components that can render this field."])))));
-  }
-
-  var Bind = form.Bind;
-  return /*#__PURE__*/_react.default.createElement(_Grid.Grid, null, /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
-    span: 12
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: style.topLabel
-  }, t(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["Choose a component that will render the field:"])))), /*#__PURE__*/_react.default.createElement(Bind, {
-    name: "renderer.name",
-    validate: _validation.validation.create("required")
-  }, /*#__PURE__*/_react.default.createElement(_Radio.RadioGroup, null, function (_ref) {
-    var onChange = _ref.onChange,
-        getValue = _ref.getValue;
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, renderPlugins.map(function (item) {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        key: item.name,
-        className: style.radioContainer
-      }, /*#__PURE__*/_react.default.createElement(_Radio.Radio, {
-        value: getValue(item.renderer.rendererName),
-        onChange: onChange(item.renderer.rendererName),
-        label: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__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)))
-      }));
-    }));
-  }))));
+    const selectedPlugin = rendererName.value ? renderers.find((pl)=>pl.renderer.rendererName === rendererName.value) : void 0;
+    if (0 === renderers.length) return /*#__PURE__*/ react.createElement(Grid, null, /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 12,
+        className: style.noComponentsMessage
+    }, t`There are no components that can render this field.`));
+    useEffect(()=>{
+        if (selectedPlugin) return;
+        if (renderers[0]) return void rendererName.onChange(renderers[0].renderer.rendererName);
+        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
+    }, /*#__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: "mb-xl"
+    }, /*#__PURE__*/ react.createElement(RadioGroup, {
+        ...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 text-wrap"
+                }, item.renderer.description))
+            }))
+    }))), /*#__PURE__*/ react.createElement(RendererOptions, {
+        plugin: selectedPlugin
+    }))));
 };
+const EditFieldDialog_AppearanceTab = AppearanceTab;
+export default EditFieldDialog_AppearanceTab;
 
-var _default = AppearanceTab;
-exports.default = _default;
+//# sourceMappingURL=AppearanceTab.js.map