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

package/admin/components/Draggable.js

@@ -1,49 +1,41 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React from "react";
 import { useDrag, DragPreviewImage } from "react-dnd";
-var emptyImage = "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==";
-var Draggable = /*#__PURE__*/React.memo(function (props) {
-  var children = props.children,
-      beginDrag = props.beginDrag,
-      endDrag = props.endDrag,
-      target = props.target;
-
-  var _useDrag = useDrag({
-    item: {
-      type: "element",
-      target: target
-    },
-    collect: function collect(monitor) {
-      return {
-        isDragging: monitor.isDragging()
-      };
-    },
-    begin: function begin(monitor) {
+const emptyImage = "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==";
+const Draggable = props => {
+  const {
+    children,
+    beginDrag,
+    endDrag
+  } = props;
+  const [{
+    isDragging
+  }, drag, preview] = useDrag({
+    type: "element",
+    item(monitor) {
       if (typeof beginDrag === "function") {
         return beginDrag(props, monitor);
       }
-
       return beginDrag;
     },
-    end: function end(item, monitor) {
+    collect: monitor => ({
+      isDragging: monitor.isDragging()
+    }),
+    end(item, monitor) {
       if (typeof endDrag === "function") {
         return endDrag(item, monitor);
       }
-
       return endDrag;
     }
-  }),
-      _useDrag2 = _slicedToArray(_useDrag, 3),
-      isDragging = _useDrag2[0].isDragging,
-      drag = _useDrag2[1],
-      preview = _useDrag2[2];
-
+  });
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DragPreviewImage, {
     connect: preview,
     src: emptyImage
   }), children({
-    isDragging: isDragging,
-    drag: drag
+    isDragging,
+    drag
   }));
-});
-export default Draggable;
+};
+const MemoizedDraggable = /*#__PURE__*/React.memo(Draggable);
+export default MemoizedDraggable;
+
+//# sourceMappingURL=Draggable.js.map

package/admin/components/Draggable.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useDrag","DragPreviewImage","emptyImage","Draggable","props","children","beginDrag","endDrag","isDragging","drag","preview","type","item","monitor","collect","end","createElement","Fragment","connect","src","MemoizedDraggable","memo"],"sources":["Draggable.tsx"],"sourcesContent":["import type { ReactElement } from \"react\";\nimport React from \"react\";\nimport type { ConnectDragSource } from \"react-dnd\";\nimport { useDrag, DragPreviewImage } from \"react-dnd\";\n\nconst emptyImage = \"data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\";\n\ninterface DraggableChildrenFunctionParams {\n    isDragging: boolean;\n    drag: ConnectDragSource;\n}\nexport interface DraggableChildrenFunction {\n    (params: DraggableChildrenFunctionParams): ReactElement;\n}\n\nexport interface DraggableProps {\n    children: DraggableChildrenFunction;\n    beginDrag?: any;\n    endDrag?: any;\n    target?: string[];\n}\n\nconst Draggable = (props: DraggableProps) => {\n    const { children, beginDrag, endDrag } = props;\n\n    const [{ isDragging }, drag, preview] = useDrag({\n        type: \"element\",\n        item(monitor) {\n            if (typeof beginDrag === \"function\") {\n                return beginDrag(props, monitor);\n            }\n            return beginDrag;\n        },\n        collect: monitor => ({\n            isDragging: monitor.isDragging()\n        }),\n        end(item, monitor) {\n            if (typeof endDrag === \"function\") {\n                return endDrag(item, monitor);\n            }\n            return endDrag;\n        }\n    });\n\n    return (\n        <>\n            <DragPreviewImage connect={preview} src={emptyImage} />\n            {children({ isDragging, drag })}\n        </>\n    );\n};\n\nconst MemoizedDraggable: React.ComponentType<DraggableProps> = React.memo(Draggable);\nexport default MemoizedDraggable;\n"],"mappings":"AACA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,OAAO,EAAEC,gBAAgB,QAAQ,WAAW;AAErD,MAAMC,UAAU,GAAG,4EAA4E;AAiB/F,MAAMC,SAAS,GAAIC,KAAqB,IAAK;EACzC,MAAM;IAAEC,QAAQ;IAAEC,SAAS;IAAEC;EAAQ,CAAC,GAAGH,KAAK;EAE9C,MAAM,CAAC;IAAEI;EAAW,CAAC,EAAEC,IAAI,EAAEC,OAAO,CAAC,GAAGV,OAAO,CAAC;IAC5CW,IAAI,EAAE,SAAS;IACfC,IAAIA,CAACC,OAAO,EAAE;MACV,IAAI,OAAOP,SAAS,KAAK,UAAU,EAAE;QACjC,OAAOA,SAAS,CAACF,KAAK,EAAES,OAAO,CAAC;MACpC;MACA,OAAOP,SAAS;IACpB,CAAC;IACDQ,OAAO,EAAED,OAAO,KAAK;MACjBL,UAAU,EAAEK,OAAO,CAACL,UAAU,CAAC;IACnC,CAAC,CAAC;IACFO,GAAGA,CAACH,IAAI,EAAEC,OAAO,EAAE;MACf,IAAI,OAAON,OAAO,KAAK,UAAU,EAAE;QAC/B,OAAOA,OAAO,CAACK,IAAI,EAAEC,OAAO,CAAC;MACjC;MACA,OAAON,OAAO;IAClB;EACJ,CAAC,CAAC;EAEF,oBACIR,KAAA,CAAAiB,aAAA,CAAAjB,KAAA,CAAAkB,QAAA,qBACIlB,KAAA,CAAAiB,aAAA,CAACf,gBAAgB;IAACiB,OAAO,EAAER,OAAQ;IAACS,GAAG,EAAEjB;EAAW,CAAE,CAAC,EACtDG,QAAQ,CAAC;IAAEG,UAAU;IAAEC;EAAK,CAAC,CAChC,CAAC;AAEX,CAAC;AAED,MAAMW,iBAAsD,gBAAGrB,KAAK,CAACsB,IAAI,CAAClB,SAAS,CAAC;AACpF,eAAeiB,iBAAiB","ignoreList":[]}

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

@@ -1,12 +1,14 @@
-import React, { CSSProperties } from "react";
-import { DragSource } from "../FieldEditor/FieldEditorContext";
-declare type Props = {
+import type { CSSProperties } from "react";
+import React from "react";
+import type { DroppableProps, OnDropCallable } from "./../Droppable";
+interface CenterProps {
     type?: string;
-    onDrop(item: DragSource): void;
+    onDrop: OnDropCallable;
     children: React.ReactNode;
     active?: boolean;
     highlight?: boolean;
     style?: CSSProperties;
-};
-export default function Center({ onDrop, children, style }: Props): JSX.Element;
-export {};
+    isDroppable?: DroppableProps["isDroppable"];
+}
+declare const Center: ({ onDrop, children, style, isDroppable }: CenterProps) => React.JSX.Element;
+export default Center;

package/admin/components/DropZone/Center.js

@@ -1,60 +1,56 @@
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import React from "react";
-import styled from "@emotion/styled";
-import Droppable from "./../Droppable";
-// @ts-ignore
-var Container = /*#__PURE__*/styled("div", {
-  target: "e14zhyp10",
-  label: "Container"
-})(function (_ref) {
-  var isOver = _ref.isOver;
-  return {
-    backgroundColor: "transparent",
-    boxSizing: "border-box",
-    height: "100%",
-    minHeight: 100,
-    position: "relative",
-    userSelect: "none",
-    width: "100%",
-    border: isOver ? "2px dashed var(--mdc-theme-primary)" : "2px dashed var(--mdc-theme-secondary)",
-    opacity: 1
-  };
-}); // @ts-ignore
-
-var Add = /*#__PURE__*/styled("div", {
-  target: "e14zhyp11",
-  label: "Add"
-})(function (_ref2) {
-  var isOver = _ref2.isOver;
-  return {
-    position: "absolute",
-    top: "50%",
-    left: "50%",
-    transform: "translate(-50%,-50%)",
-    margin: 0,
-    color: isOver ? "var(--mdc-theme-primary)" : "var(--mdc-theme-secondary)"
-  };
+import { Droppable } from "./../Droppable";
+import { cn, cva } from "@webiny/admin-ui";
+const droppableContainerVariants = cva("wby-bg-transparent wby-box-border wby-h-full wby-min-h-[120px] wby-relative wby-user-select-none wby-w-full wby-border-md wby-border-dashed", {
+  variants: {
+    isOver: {
+      true: "wby-border-accent-default wby-text-accent-primary",
+      false: "wby-border-success-default wby-text-success-primary"
+    },
+    isDroppable: {
+      false: "wby-border-success-default wby-text-accent-primary"
+    }
+  },
+  defaultVariants: {
+    isOver: false,
+    isDroppable: true
+  }
 });
-export default function Center(_ref3) {
-  var onDrop = _ref3.onDrop,
-      children = _ref3.children,
-      style = _ref3.style;
+const getInert = isDroppable => {
+  return isDroppable ? {} : {
+    inert: ""
+  };
+};
+const Center = ({
+  onDrop,
+  children,
+  style,
+  isDroppable
+}) => {
   return /*#__PURE__*/React.createElement(Droppable, {
-    onDrop: onDrop
-  }, function (_ref4) {
-    var isOver = _ref4.isOver,
-        drop = _ref4.drop;
-    return /*#__PURE__*/React.createElement("div", {
-      ref: drop,
-      style: _objectSpread({
-        width: "100%",
-        height: "100%"
-      }, style),
-      "data-testid": "cms-editor-first-field-area"
-    }, /*#__PURE__*/React.createElement(Container, {
-      isOver: isOver
-    }, /*#__PURE__*/React.createElement(Add, {
-      isOver: isOver
-    }, children)));
-  });
-}
+    onDrop: onDrop,
+    isDroppable: isDroppable
+  }, ({
+    isOver,
+    drop,
+    isDroppable
+  }) => /*#__PURE__*/React.createElement("div", Object.assign({
+    ref: drop,
+    style: {
+      width: "100%",
+      height: "100%",
+      ...style
+    },
+    "data-testid": "cms-editor-first-field-area"
+  }, getInert(isDroppable)), /*#__PURE__*/React.createElement("div", {
+    className: cn(droppableContainerVariants({
+      isOver,
+      isDroppable
+    }))
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "wby-absolute wby-top-1/2 wby-left-1/2 wby-transform wby--translate-x-1/2 wby--translate-y-1/2 wby-m-0"
+  }, children))));
+};
+export default Center;
+
+//# sourceMappingURL=Center.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","Droppable","cn","cva","droppableContainerVariants","variants","isOver","true","false","isDroppable","defaultVariants","getInert","inert","Center","onDrop","children","style","createElement","drop","Object","assign","ref","width","height","className"],"sources":["Center.tsx"],"sourcesContent":["import type { CSSProperties } from \"react\";\nimport React from \"react\";\nimport type { DroppableProps, OnDropCallable } from \"./../Droppable\";\nimport { Droppable } from \"./../Droppable\";\nimport { cn, cva } from \"@webiny/admin-ui\";\n\nconst droppableContainerVariants = cva(\n    \"wby-bg-transparent wby-box-border wby-h-full wby-min-h-[120px] wby-relative wby-user-select-none wby-w-full wby-border-md wby-border-dashed\",\n    {\n        variants: {\n            isOver: {\n                true: \"wby-border-accent-default wby-text-accent-primary\",\n                false: \"wby-border-success-default wby-text-success-primary\"\n            },\n            isDroppable: {\n                false: \"wby-border-success-default wby-text-accent-primary\"\n            }\n        },\n        defaultVariants: {\n            isOver: false,\n            isDroppable: true\n        }\n    }\n);\n\ninterface CenterProps {\n    type?: string;\n    onDrop: OnDropCallable;\n    children: React.ReactNode;\n    active?: boolean;\n    highlight?: boolean;\n    style?: CSSProperties;\n    isDroppable?: DroppableProps[\"isDroppable\"];\n}\n\nconst getInert = (isDroppable: boolean) => {\n    return isDroppable ? {} : { inert: \"\" };\n};\n\nconst Center = ({ onDrop, children, style, isDroppable }: CenterProps) => {\n    return (\n        <Droppable onDrop={onDrop} isDroppable={isDroppable}>\n            {({ isOver, drop, isDroppable }) => (\n                <div\n                    ref={drop}\n                    style={{ width: \"100%\", height: \"100%\", ...style }}\n                    data-testid={\"cms-editor-first-field-area\"}\n                    {...getInert(isDroppable)}\n                >\n                    <div className={cn(droppableContainerVariants({ isOver, isDroppable }))}>\n                        <div className=\"wby-absolute wby-top-1/2 wby-left-1/2 wby-transform wby--translate-x-1/2 wby--translate-y-1/2 wby-m-0\">\n                            {children}\n                        </div>\n                    </div>\n                </div>\n            )}\n        </Droppable>\n    );\n};\n\nexport default Center;\n"],"mappings":"AACA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,SAAS;AAClB,SAASC,EAAE,EAAEC,GAAG,QAAQ,kBAAkB;AAE1C,MAAMC,0BAA0B,GAAGD,GAAG,CAClC,6IAA6I,EAC7I;EACIE,QAAQ,EAAE;IACNC,MAAM,EAAE;MACJC,IAAI,EAAE,mDAAmD;MACzDC,KAAK,EAAE;IACX,CAAC;IACDC,WAAW,EAAE;MACTD,KAAK,EAAE;IACX;EACJ,CAAC;EACDE,eAAe,EAAE;IACbJ,MAAM,EAAE,KAAK;IACbG,WAAW,EAAE;EACjB;AACJ,CACJ,CAAC;AAYD,MAAME,QAAQ,GAAIF,WAAoB,IAAK;EACvC,OAAOA,WAAW,GAAG,CAAC,CAAC,GAAG;IAAEG,KAAK,EAAE;EAAG,CAAC;AAC3C,CAAC;AAED,MAAMC,MAAM,GAAGA,CAAC;EAAEC,MAAM;EAAEC,QAAQ;EAAEC,KAAK;EAAEP;AAAyB,CAAC,KAAK;EACtE,oBACIT,KAAA,CAAAiB,aAAA,CAAChB,SAAS;IAACa,MAAM,EAAEA,MAAO;IAACL,WAAW,EAAEA;EAAY,GAC/C,CAAC;IAAEH,MAAM;IAAEY,IAAI;IAAET;EAAY,CAAC,kBAC3BT,KAAA,CAAAiB,aAAA,QAAAE,MAAA,CAAAC,MAAA;IACIC,GAAG,EAAEH,IAAK;IACVF,KAAK,EAAE;MAAEM,KAAK,EAAE,MAAM;MAAEC,MAAM,EAAE,MAAM;MAAE,GAAGP;IAAM,CAAE;IACnD,eAAa;EAA8B,GACvCL,QAAQ,CAACF,WAAW,CAAC,gBAEzBT,KAAA,CAAAiB,aAAA;IAAKO,SAAS,EAAEtB,EAAE,CAACE,0BAA0B,CAAC;MAAEE,MAAM;MAAEG;IAAY,CAAC,CAAC;EAAE,gBACpET,KAAA,CAAAiB,aAAA;IAAKO,SAAS,EAAC;EAAuG,GACjHT,QACA,CACJ,CACJ,CAEF,CAAC;AAEpB,CAAC;AAED,eAAeF,MAAM","ignoreList":[]}

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

@@ -1,9 +1,11 @@
-/// <reference types="react" />
-import { DragSource } from "../FieldEditor/FieldEditorContext";
-declare type HorizontalProps = {
+import React from "react";
+import type { IsVisibleCallable } from "../Droppable";
+import type { DragSource } from "../../../types";
+interface HorizontalProps {
     onDrop(item: DragSource): void;
     last?: boolean;
-    isVisible?: any;
-};
-declare const Horizontal: ({ last, onDrop, isVisible, ...rest }: HorizontalProps) => JSX.Element;
+    isVisible?: IsVisibleCallable;
+    ["data-testid"]?: string;
+}
+declare const Horizontal: ({ last, onDrop, isVisible, ...rest }: HorizontalProps) => React.JSX.Element;
 export default Horizontal;

package/admin/components/DropZone/Horizontal.js

@@ -1,83 +1,48 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["last", "onDrop", "isVisible"];
 import React from "react";
-import styled from "@emotion/styled";
-import Droppable from "../Droppable";
-var InnerDiv = /*#__PURE__*/styled("div", {
-  target: "e1uuull90",
-  label: "InnerDiv"
-})({
-  height: 15,
-  width: "100%",
-  zIndex: 3,
-  borderRadius: 0,
-  boxSizing: "border-box",
-  display: "none",
-  border: "1px dashed black",
-  borderSpacing: 5
-});
-var BackgroundColorDiv = /*#__PURE__*/styled("div", {
-  target: "e1uuull91",
-  label: "BackgroundColorDiv"
-})({
-  width: "100%",
-  height: "100%"
-});
-var OuterDiv = /*#__PURE__*/styled("div", {
-  target: "e1uuull92",
-  label: "OuterDiv"
-})({
-  margin: 0,
-  padding: 0,
-  width: "calc(100% + 2px)",
-  zIndex: 10,
-  backgroundColor: "transparent",
-  position: "absolute",
-  display: "flex",
-  justifyContent: "center"
-}, function (props) {
-  var _ref;
-
-  return _ref = {}, _defineProperty(_ref, props.last ? "bottom" : "top", -15), _defineProperty(_ref, InnerDiv, _defineProperty({
-    borderColor: props.isOver ? "var(--mdc-theme-primary)" : "var(--mdc-theme-secondary)",
-    display: props.isDragging ? "block" : "none"
-  }, BackgroundColorDiv, {
-    opacity: 0.5,
-    backgroundColor: props.isOver ? "var(--mdc-theme-primary)" : "var(--mdc-theme-secondary)"
-  })), _ref;
-});
-
-var Horizontal = function Horizontal(_ref2) {
-  var last = _ref2.last,
-      onDrop = _ref2.onDrop,
-      isVisible = _ref2.isVisible,
-      rest = _objectWithoutProperties(_ref2, _excluded);
-
+import { Droppable } from "../Droppable";
+import { cn } from "@webiny/admin-ui";
+const OuterDiv = ({
+  isOver,
+  isDragging,
+  last
+}) => /*#__PURE__*/React.createElement("div", {
+  className: cn("wby-absolute wby-w-full wby-z-10 wby-bg-transparent wby-flex wby-justify-center", last ? "-wby-bottom-md" : "-wby-top-md")
+}, /*#__PURE__*/React.createElement("div", {
+  className: cn("wby-h-md wby-w-full wby-z-3 wby-border-dashed wby-border-sm wby-hidden", isOver ? "wby-border-accent-default" : "wby-border-success-default", isDragging && "wby-block")
+}, /*#__PURE__*/React.createElement("div", {
+  className: cn("wby-w-full wby-h-full wby-opacity-50", isOver ? "wby-bg-primary-muted" : "wby-bg-success-muted")
+})));
+const Horizontal = ({
+  last,
+  onDrop,
+  isVisible,
+  ...rest
+}) => {
   return /*#__PURE__*/React.createElement(Droppable, {
     onDrop: onDrop,
     isVisible: isVisible
-  }, function (_ref3) {
-    var _ref4;
-
-    var isOver = _ref3.isOver,
-        isDragging = _ref3.isDragging,
-        drop = _ref3.drop;
-    return /*#__PURE__*/React.createElement("div", {
-      ref: drop,
-      "data-testid": rest["data-testid"],
-      style: (_ref4 = {
-        /* For dropzone debugging: border: "1px solid blue",*/
-        height: "15px",
-        width: "100%",
-        position: "absolute"
-      }, _defineProperty(_ref4, last ? "bottom" : "top", 0), _defineProperty(_ref4, "left", 0), _defineProperty(_ref4, "zIndex", isDragging ? 1000 : -1), _ref4)
-    }, /*#__PURE__*/React.createElement(OuterDiv, {
-      isOver: isOver,
-      isDragging: isDragging,
-      last: last
-    }, /*#__PURE__*/React.createElement(InnerDiv, null, /*#__PURE__*/React.createElement(BackgroundColorDiv, null))));
-  });
+  }, ({
+    isOver,
+    isDragging,
+    drop
+  }) => /*#__PURE__*/React.createElement("div", {
+    ref: drop,
+    "data-testid": rest["data-testid"],
+    style: {
+      /* For dropzone debugging: border: "1px solid blue",*/
+      height: "16px",
+      width: "100%",
+      position: "absolute",
+      [last ? "bottom" : "top"]: 0,
+      left: 0,
+      zIndex: isDragging ? 1000 : -1
+    }
+  }, /*#__PURE__*/React.createElement(OuterDiv, {
+    isOver: isOver,
+    isDragging: isDragging,
+    last: last ?? false
+  })));
 };
+export default Horizontal;
 
-export default Horizontal;
+//# sourceMappingURL=Horizontal.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","Droppable","cn","OuterDiv","isOver","isDragging","last","createElement","className","Horizontal","onDrop","isVisible","rest","drop","ref","style","height","width","position","left","zIndex"],"sources":["Horizontal.tsx"],"sourcesContent":["import React from \"react\";\nimport type { IsVisibleCallable } from \"../Droppable\";\nimport { Droppable } from \"../Droppable\";\nimport type { DragSource } from \"~/types\";\nimport { cn } from \"@webiny/admin-ui\";\n\ninterface OuterDivProps {\n    isOver: boolean;\n    isDragging: boolean;\n    last: boolean;\n}\n\nconst OuterDiv = ({ isOver, isDragging, last }: OuterDivProps) => (\n    <div\n        className={cn(\n            \"wby-absolute wby-w-full wby-z-10 wby-bg-transparent wby-flex wby-justify-center\",\n            last ? \"-wby-bottom-md\" : \"-wby-top-md\"\n        )}\n    >\n        <div\n            className={cn(\n                \"wby-h-md wby-w-full wby-z-3 wby-border-dashed wby-border-sm wby-hidden\",\n                isOver ? \"wby-border-accent-default\" : \"wby-border-success-default\",\n                isDragging && \"wby-block\"\n            )}\n        >\n            <div\n                className={cn(\n                    \"wby-w-full wby-h-full wby-opacity-50\",\n                    isOver ? \"wby-bg-primary-muted\" : \"wby-bg-success-muted\"\n                )}\n            />\n        </div>\n    </div>\n);\n\ninterface HorizontalProps {\n    onDrop(item: DragSource): void;\n    last?: boolean;\n    isVisible?: IsVisibleCallable;\n    [\"data-testid\"]?: string;\n}\n\nconst Horizontal = ({ last, onDrop, isVisible, ...rest }: HorizontalProps) => {\n    return (\n        <Droppable onDrop={onDrop} isVisible={isVisible}>\n            {({ isOver, isDragging, drop }) => (\n                <div\n                    ref={drop}\n                    data-testid={rest[\"data-testid\"]}\n                    style={{\n                        /* For dropzone debugging: border: \"1px solid blue\",*/\n                        height: \"16px\",\n                        width: \"100%\",\n                        position: \"absolute\",\n                        [last ? \"bottom\" : \"top\"]: 0,\n                        left: 0,\n                        zIndex: isDragging ? 1000 : -1\n                    }}\n                >\n                    <OuterDiv isOver={isOver} isDragging={isDragging} last={last ?? false} />\n                </div>\n            )}\n        </Droppable>\n    );\n};\n\nexport default Horizontal;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,SAAS;AAElB,SAASC,EAAE,QAAQ,kBAAkB;AAQrC,MAAMC,QAAQ,GAAGA,CAAC;EAAEC,MAAM;EAAEC,UAAU;EAAEC;AAAoB,CAAC,kBACzDN,KAAA,CAAAO,aAAA;EACIC,SAAS,EAAEN,EAAE,CACT,iFAAiF,EACjFI,IAAI,GAAG,gBAAgB,GAAG,aAC9B;AAAE,gBAEFN,KAAA,CAAAO,aAAA;EACIC,SAAS,EAAEN,EAAE,CACT,wEAAwE,EACxEE,MAAM,GAAG,2BAA2B,GAAG,4BAA4B,EACnEC,UAAU,IAAI,WAClB;AAAE,gBAEFL,KAAA,CAAAO,aAAA;EACIC,SAAS,EAAEN,EAAE,CACT,sCAAsC,EACtCE,MAAM,GAAG,sBAAsB,GAAG,sBACtC;AAAE,CACL,CACA,CACJ,CACR;AASD,MAAMK,UAAU,GAAGA,CAAC;EAAEH,IAAI;EAAEI,MAAM;EAAEC,SAAS;EAAE,GAAGC;AAAsB,CAAC,KAAK;EAC1E,oBACIZ,KAAA,CAAAO,aAAA,CAACN,SAAS;IAACS,MAAM,EAAEA,MAAO;IAACC,SAAS,EAAEA;EAAU,GAC3C,CAAC;IAAEP,MAAM;IAAEC,UAAU;IAAEQ;EAAK,CAAC,kBAC1Bb,KAAA,CAAAO,aAAA;IACIO,GAAG,EAAED,IAAK;IACV,eAAaD,IAAI,CAAC,aAAa,CAAE;IACjCG,KAAK,EAAE;MACH;MACAC,MAAM,EAAE,MAAM;MACdC,KAAK,EAAE,MAAM;MACbC,QAAQ,EAAE,UAAU;MACpB,CAACZ,IAAI,GAAG,QAAQ,GAAG,KAAK,GAAG,CAAC;MAC5Ba,IAAI,EAAE,CAAC;MACPC,MAAM,EAAEf,UAAU,GAAG,IAAI,GAAG,CAAC;IACjC;EAAE,gBAEFL,KAAA,CAAAO,aAAA,CAACJ,QAAQ;IAACC,MAAM,EAAEA,MAAO;IAACC,UAAU,EAAEA,UAAW;IAACC,IAAI,EAAEA,IAAI,IAAI;EAAM,CAAE,CACvE,CAEF,CAAC;AAEpB,CAAC;AAED,eAAeG,UAAU","ignoreList":[]}

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

@@ -1,10 +1,11 @@
-/// <reference types="react" />
-import { DragSource } from "../FieldEditor/FieldEditorContext";
-declare type VerticalProps = {
+import React from "react";
+import type { IsVisibleCallable } from "../Droppable";
+import type { DragSource } from "../../../types";
+interface VerticalProps {
     depth?: number;
     onDrop(item: DragSource): void;
     last?: boolean;
-    isVisible?: any;
-};
-declare const Vertical: ({ depth, last, onDrop, isVisible }: VerticalProps) => JSX.Element;
+    isVisible?: IsVisibleCallable;
+}
+declare const Vertical: ({ depth, last, onDrop, isVisible }: VerticalProps) => React.JSX.Element;
 export default Vertical;

package/admin/components/DropZone/Vertical.js

@@ -1,79 +1,48 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from "react";
-import styled from "@emotion/styled";
-import Droppable from "../Droppable";
-var InnerDivVertical = /*#__PURE__*/styled("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__*/styled("div", {
-  target: "e1yx4w3z1",
-  label: "BackgroundColorDiv"
-})({
-  width: "100%",
-  height: "100%"
-});
-var OuterDivVertical = /*#__PURE__*/styled("div", {
-  target: "e1yx4w3z2",
-  label: "OuterDivVertical"
-})({
-  position: "absolute",
-  width: "30%",
-  top: 0,
-  height: "100%",
-  zIndex: 10,
-  backgroundColor: "transparent"
-}, function (props) {
-  var _InnerDivVertical, _ref;
-
-  return _ref = {}, _defineProperty(_ref, props.last ? "right" : "left", -9), _defineProperty(_ref, "textAlign", props.last ? "right" : "left"), _defineProperty(_ref, InnerDivVertical, (_InnerDivVertical = {
-    borderColor: props.isOver ? "var(--mdc-theme-primary)" : "var(--mdc-theme-secondary)"
-  }, _defineProperty(_InnerDivVertical, props.last ? "right" : "left", -2), _defineProperty(_InnerDivVertical, "display", props.isDragging ? "block" : "none"), _defineProperty(_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;
+import { Droppable } from "../Droppable";
+import { cn } from "@webiny/admin-ui";
+const OuterDivVertical = ({
+  isOver,
+  last,
+  isDragging
+}) => /*#__PURE__*/React.createElement("div", {
+  className: cn("wby-absolute wby-top-0 wby-h-full wby-w-[30%] wby-z-10 wby-bg-transparent", last ? "wby-text-right -wby-right-sm" : "wby-text-left -wby-left-sm")
+}, /*#__PURE__*/React.createElement("div", {
+  className: cn("wby-absolute wby-w-md wby-h-full wby-z-3 wby-border-dashed wby-border-sm wby-hidden", isOver ? "wby-border-accent-default" : "wby-border-success-default", last ? "-wby-right-sm" : "-wby-left-sm", isDragging && "wby-block")
+}, /*#__PURE__*/React.createElement("div", {
+  className: cn("wby-w-full wby-h-full wby-opacity-50", isOver ? "wby-bg-primary-muted" : "wby-bg-success-muted")
+})));
+const Vertical = ({
+  depth,
+  last,
+  onDrop,
+  isVisible
+}) => {
   return /*#__PURE__*/React.createElement(Droppable, {
     onDrop: onDrop,
     isVisible: isVisible
-  }, function (_ref3) {
-    var _ref4;
-
-    var isOver = _ref3.isOver,
-        isDragging = _ref3.isDragging,
-        drop = _ref3.drop;
-    return /*#__PURE__*/React.createElement("div", {
-      ref: drop,
-      style: (_ref4 = {
-        /* For dropzone debugging: border: "1px solid blue",*/
-        width: "30%",
-        maxWidth: "100px",
-        height: "100%",
-        position: "absolute",
-        top: 0
-      }, _defineProperty(_ref4, last ? "right" : "left", 0), _defineProperty(_ref4, "zIndex", isDragging ? 1000 + depth : -1), _ref4)
-    }, /*#__PURE__*/React.createElement(OuterDivVertical, {
-      isOver: isOver,
-      isDragging: isDragging,
-      last: last
-    }, /*#__PURE__*/React.createElement(InnerDivVertical, null, /*#__PURE__*/React.createElement(BackgroundColorDiv, null))));
-  });
+  }, ({
+    isOver,
+    isDragging,
+    drop
+  }) => /*#__PURE__*/React.createElement("div", {
+    ref: drop,
+    style: {
+      /* For dropzone debugging: border: "1px solid blue",*/
+      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
+  })));
 };
+export default Vertical;
 
-export default Vertical;
+//# sourceMappingURL=Vertical.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","Droppable","cn","OuterDivVertical","isOver","last","isDragging","createElement","className","Vertical","depth","onDrop","isVisible","drop","ref","style","width","maxWidth","height","position","top","zIndex"],"sources":["Vertical.tsx"],"sourcesContent":["import React from \"react\";\nimport type { IsVisibleCallable } from \"../Droppable\";\nimport { Droppable } from \"../Droppable\";\nimport type { DragSource } from \"~/types\";\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            \"wby-absolute wby-top-0 wby-h-full wby-w-[30%] wby-z-10 wby-bg-transparent\",\n            last ? \"wby-text-right -wby-right-sm\" : \"wby-text-left -wby-left-sm\"\n        )}\n    >\n        <div\n            className={cn(\n                \"wby-absolute wby-w-md wby-h-full wby-z-3 wby-border-dashed wby-border-sm wby-hidden\",\n                isOver ? \"wby-border-accent-default\" : \"wby-border-success-default\",\n                last ? \"-wby-right-sm\" : \"-wby-left-sm\",\n                isDragging && \"wby-block\"\n            )}\n        >\n            <div\n                className={cn(\n                    \"wby-w-full wby-h-full wby-opacity-50\",\n                    isOver ? \"wby-bg-primary-muted\" : \"wby-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={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                </div>\n            )}\n        </Droppable>\n    );\n};\n\nexport default Vertical;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,SAAS;AAElB,SAASC,EAAE,QAAQ,kBAAkB;AAQrC,MAAMC,gBAAgB,GAAGA,CAAC;EAAEC,MAAM;EAAEC,IAAI;EAAEC;AAAkC,CAAC,kBACzEN,KAAA,CAAAO,aAAA;EACIC,SAAS,EAAEN,EAAE,CACT,2EAA2E,EAC3EG,IAAI,GAAG,8BAA8B,GAAG,4BAC5C;AAAE,gBAEFL,KAAA,CAAAO,aAAA;EACIC,SAAS,EAAEN,EAAE,CACT,qFAAqF,EACrFE,MAAM,GAAG,2BAA2B,GAAG,4BAA4B,EACnEC,IAAI,GAAG,eAAe,GAAG,cAAc,EACvCC,UAAU,IAAI,WAClB;AAAE,gBAEFN,KAAA,CAAAO,aAAA;EACIC,SAAS,EAAEN,EAAE,CACT,sCAAsC,EACtCE,MAAM,GAAG,sBAAsB,GAAG,sBACtC;AAAE,CACL,CACA,CACJ,CACR;AASD,MAAMK,QAAQ,GAAGA,CAAC;EAAEC,KAAK;EAAEL,IAAI;EAAEM,MAAM;EAAEC;AAAyB,CAAC,KAAK;EACpE,oBACIZ,KAAA,CAAAO,aAAA,CAACN,SAAS;IAACU,MAAM,EAAEA,MAAO;IAACC,SAAS,EAAEA;EAAU,GAC3C,CAAC;IAAER,MAAM;IAAEE,UAAU;IAAEO;EAAK,CAAC,kBAC1Bb,KAAA,CAAAO,aAAA;IACIO,GAAG,EAAED,IAAK;IACVE,KAAK,EAAE;MACH;MACAC,KAAK,EAAE,KAAK;MACZC,QAAQ,EAAE,OAAO;MACjBC,MAAM,EAAE,MAAM;MACdC,QAAQ,EAAE,UAAU;MACpBC,GAAG,EAAE,CAAC;MACN,CAACf,IAAI,GAAG,OAAO,GAAG,MAAM,GAAG,CAAC;MAC5BgB,MAAM,EAAEf,UAAU,GAAG,IAAI,IAAII,KAAK,IAAI,CAAC,CAAC,GAAG,CAAC;IAChD;EAAE,gBAEFV,KAAA,CAAAO,aAAA,CAACJ,gBAAgB;IAACC,MAAM,EAAEA,MAAO;IAACE,UAAU,EAAEA,UAAW;IAACD,IAAI,EAAEA;EAAK,CAAE,CACtE,CAEF,CAAC;AAEpB,CAAC;AAED,eAAeI,QAAQ","ignoreList":[]}

package/admin/components/DropZone/index.js

@@ -1,4 +1,6 @@
 import Center from "./Center";
 import Horizontal from "./Horizontal";
 import Vertical from "./Vertical";
-export { Center, Horizontal, Vertical };
+export { Center, Horizontal, Vertical };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["Center","Horizontal","Vertical"],"sources":["index.ts"],"sourcesContent":["import Center from \"./Center\";\nimport Horizontal from \"./Horizontal\";\nimport Vertical from \"./Vertical\";\n\nexport { Center, Horizontal, Vertical };\n"],"mappings":"AAAA,OAAOA,MAAM;AACb,OAAOC,UAAU;AACjB,OAAOC,QAAQ;AAEf,SAASF,MAAM,EAAEC,UAAU,EAAEC,QAAQ","ignoreList":[]}

package/admin/components/Droppable.d.ts

@@ -1,23 +1,38 @@
 import * as React from "react";
-import { ConnectDropTarget } from "react-dnd";
-import { DragSource } from "./FieldEditor/FieldEditorContext";
-export declare type DroppableChildrenFunction = (params: {
+import type { ConnectDropTarget } from "react-dnd";
+import type { DragSource } from "../../types";
+export interface DroppableChildrenFunctionParams {
     isDragging: boolean;
+    isDroppable: boolean;
     isOver: boolean;
     item: any;
     drop: ConnectDropTarget;
-}) => React.ReactElement;
-export declare type DroppableProps = {
+}
+export interface DroppableChildrenFunction {
+    (params: DroppableChildrenFunctionParams): React.ReactElement;
+}
+interface IsVisibleParams {
+    type: "row" | "field" | "newField";
+    item: DragSource;
+    isDragging: boolean;
+}
+export interface IsVisibleCallable {
+    (params: IsVisibleParams): boolean;
+}
+export interface OnDropCallable {
+    (item: DragSource): void;
+}
+export interface DroppableProps {
     type?: string;
     children: DroppableChildrenFunction;
     isDragging?: boolean;
-    isDroppable?: (item: any) => boolean;
-    isVisible?: (params: {
-        type: string;
-        item: any;
-        isDragging: boolean;
-    }) => boolean;
-    onDrop?: (item: DragSource) => void;
+    isDroppable?: (item: DragSource) => boolean;
+    isVisible?: IsVisibleCallable;
+    onDrop?: OnDropCallable;
+}
+export type DragObject = {
+    item: IsVisibleParams;
+    isOver: boolean;
 };
-declare const Droppable: React.MemoExoticComponent<(props: DroppableProps) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)>) | (new (props: any) => React.Component<any, any, any>)>>;
-export default Droppable;
+export declare const Droppable: React.ComponentType<DroppableProps>;
+export {};