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

package/admin/components/DragPreview.js.map

@@ -1 +1 @@
-{"version":3,"names":["subscribedToOffsetChange","dragPreviewRef","onOffsetChange","monitor","offset","getClientOffset","transform","x","y","style","DragPreview","useState","dragHelperOpacity","setDragHelperOpacity","useDragLayer","initialMonitor","subscribeToOffsetChange","isDragging","useEffect","setTimeout","position","pointerEvents","zIndex","left","top","width","height","el","transition","display","opacity","backgroundColor","borderRadius"],"sources":["DragPreview.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { useDragLayer } from \"react-dnd\";\nimport { DragSourceMonitor } from \"react-dnd/lib/interfaces/monitors\";\nimport { DragSourceMonitorImpl } from \"react-dnd/lib/common/DragSourceMonitorImpl\";\n\nlet subscribedToOffsetChange = false;\n\nlet dragPreviewRef: HTMLDivElement | null = null;\n\nconst onOffsetChange = (monitor: DragSourceMonitor) => () => {\n    if (!dragPreviewRef) {\n        return;\n    }\n\n    const offset = monitor.getClientOffset();\n    if (!offset) {\n        return;\n    }\n\n    const transform = `translate(${offset.x - 15}px, ${offset.y - 15}px)`;\n    dragPreviewRef.style[\"transform\"] = transform;\n    // TODO @ts-refactor figure out better type\n    dragPreviewRef.style[\"-webkit-transform\" as any] = transform;\n};\n\nconst DragPreview: React.FC = () => {\n    const [dragHelperOpacity, setDragHelperOpacity] = useState(0);\n    const { isDragging } = useDragLayer(initialMonitor => {\n        /**\n         * We must cast because TS is complaining. We know that casting as DragSourceMonitorImpl is ok.\n         */\n        const monitor = initialMonitor as unknown as DragSourceMonitorImpl;\n        if (!subscribedToOffsetChange) {\n            monitor.subscribeToOffsetChange(onOffsetChange(monitor));\n            subscribedToOffsetChange = true;\n        }\n\n        return {\n            isDragging: monitor.isDragging()\n        };\n    });\n\n    useEffect(() => {\n        return () => {\n            subscribedToOffsetChange = false;\n            dragPreviewRef = null;\n        };\n    }, []);\n\n    // We track the value of \"isDragging\" and apply opacity=1 (after 100ms), when it switches to true.\n    // Without this, the drag cursor would be shown in the top-left corner for a short amount of time, and then it\n    // would be repositioned correctly. Definitely looks like a glitch. This also adds a nice little fade-in effect.\n    useEffect(() => {\n        if (isDragging) {\n            setTimeout(() => {\n                setDragHelperOpacity(isDragging ? 1 : 0);\n            }, 100);\n        } else {\n            setDragHelperOpacity(0);\n        }\n    }, [isDragging]);\n\n    if (!isDragging) {\n        return null;\n    }\n\n    if (!isDragging) {\n        return null;\n    }\n\n    return (\n        <div\n            style={{\n                position: \"fixed\",\n                pointerEvents: \"none\",\n                zIndex: 1001,\n                left: 0,\n                top: 0,\n                width: \"100%\",\n                height: \"100%\"\n            }}\n        >\n            <div\n                ref={el => (dragPreviewRef = el)}\n                style={{\n                    transition: \"opacity .25s ease-in-out\",\n                    display: \"block\",\n                    opacity: dragHelperOpacity\n                }}\n            >\n                <div\n                    style={{\n                        width: 30,\n                        height: 30,\n                        backgroundColor: \"var(--mdc-theme-primary)\",\n                        borderRadius: \"50%\"\n                    }}\n                />\n            </div>\n        </div>\n    );\n};\nexport default DragPreview;\n"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AAIA,IAAIA,wBAAwB,GAAG,KAA/B;AAEA,IAAIC,cAAqC,GAAG,IAA5C;;AAEA,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,CAACC,OAAD;EAAA,OAAgC,YAAM;IACzD,IAAI,CAACF,cAAL,EAAqB;MACjB;IACH;;IAED,IAAMG,MAAM,GAAGD,OAAO,CAACE,eAAR,EAAf;;IACA,IAAI,CAACD,MAAL,EAAa;MACT;IACH;;IAED,IAAME,SAAS,uBAAgBF,MAAM,CAACG,CAAP,GAAW,EAA3B,iBAAoCH,MAAM,CAACI,CAAP,GAAW,EAA/C,QAAf;IACAP,cAAc,CAACQ,KAAf,CAAqB,WAArB,IAAoCH,SAApC,CAXyD,CAYzD;;IACAL,cAAc,CAACQ,KAAf,CAAqB,mBAArB,IAAmDH,SAAnD;EACH,CAdsB;AAAA,CAAvB;;AAgBA,IAAMI,WAAqB,GAAG,SAAxBA,WAAwB,GAAM;EAChC,gBAAkD,IAAAC,eAAA,EAAS,CAAT,CAAlD;EAAA;EAAA,IAAOC,iBAAP;EAAA,IAA0BC,oBAA1B;;EACA,oBAAuB,IAAAC,sBAAA,EAAa,UAAAC,cAAc,EAAI;IAClD;AACR;AACA;IACQ,IAAMZ,OAAO,GAAGY,cAAhB;;IACA,IAAI,CAACf,wBAAL,EAA+B;MAC3BG,OAAO,CAACa,uBAAR,CAAgCd,cAAc,CAACC,OAAD,CAA9C;MACAH,wBAAwB,GAAG,IAA3B;IACH;;IAED,OAAO;MACHiB,UAAU,EAAEd,OAAO,CAACc,UAAR;IADT,CAAP;EAGH,CAbsB,CAAvB;EAAA,IAAQA,UAAR,iBAAQA,UAAR;;EAeA,IAAAC,gBAAA,EAAU,YAAM;IACZ,OAAO,YAAM;MACTlB,wBAAwB,GAAG,KAA3B;MACAC,cAAc,GAAG,IAAjB;IACH,CAHD;EAIH,CALD,EAKG,EALH,EAjBgC,CAwBhC;EACA;EACA;;EACA,IAAAiB,gBAAA,EAAU,YAAM;IACZ,IAAID,UAAJ,EAAgB;MACZE,UAAU,CAAC,YAAM;QACbN,oBAAoB,CAACI,UAAU,GAAG,CAAH,GAAO,CAAlB,CAApB;MACH,CAFS,EAEP,GAFO,CAAV;IAGH,CAJD,MAIO;MACHJ,oBAAoB,CAAC,CAAD,CAApB;IACH;EACJ,CARD,EAQG,CAACI,UAAD,CARH;;EAUA,IAAI,CAACA,UAAL,EAAiB;IACb,OAAO,IAAP;EACH;;EAED,IAAI,CAACA,UAAL,EAAiB;IACb,OAAO,IAAP;EACH;;EAED,oBACI;IACI,KAAK,EAAE;MACHG,QAAQ,EAAE,OADP;MAEHC,aAAa,EAAE,MAFZ;MAGHC,MAAM,EAAE,IAHL;MAIHC,IAAI,EAAE,CAJH;MAKHC,GAAG,EAAE,CALF;MAMHC,KAAK,EAAE,MANJ;MAOHC,MAAM,EAAE;IAPL;EADX,gBAWI;IACI,GAAG,EAAE,aAAAC,EAAE;MAAA,OAAK1B,cAAc,GAAG0B,EAAtB;IAAA,CADX;IAEI,KAAK,EAAE;MACHC,UAAU,EAAE,0BADT;MAEHC,OAAO,EAAE,OAFN;MAGHC,OAAO,EAAElB;IAHN;EAFX,gBAQI;IACI,KAAK,EAAE;MACHa,KAAK,EAAE,EADJ;MAEHC,MAAM,EAAE,EAFL;MAGHK,eAAe,EAAE,0BAHd;MAIHC,YAAY,EAAE;IAJX;EADX,EARJ,CAXJ,CADJ;AA+BH,CA5ED;;eA6EetB,W"}
+{"version":3,"file":"admin/components/DragPreview.js","sources":["../../../src/admin/components/DragPreview.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport type { DragSourceMonitor } from \"react-dnd\";\nimport { useDragLayer } from \"react-dnd\";\nimport type { DragSourceMonitorImpl } from \"~/types.js\";\n\nlet subscribedToOffsetChange = false;\n\nlet dragPreviewRef: HTMLDivElement | null = null;\n\nconst onOffsetChange = (monitor: DragSourceMonitor) => () => {\n    if (!dragPreviewRef) {\n        return;\n    }\n\n    const offset = monitor.getClientOffset();\n    if (!offset) {\n        return;\n    }\n\n    const transform = `translate(${offset.x - 15}px, ${offset.y - 15}px)`;\n    dragPreviewRef.style[\"transform\"] = transform;\n    // TODO @ts-refactor figure out better type / possibly not needed in newer browsers\n    // @ts-expect-error\n    dragPreviewRef.style[\"-webkit-transform\"] = transform;\n};\n\nconst DragPreview = () => {\n    const [dragHelperOpacity, setDragHelperOpacity] = useState(0);\n    const { isDragging } = useDragLayer(initialMonitor => {\n        /**\n         * We must cast because TS is complaining. We know that casting as DragSourceMonitorImpl is ok.\n         */\n        const monitor = initialMonitor as unknown as DragSourceMonitorImpl;\n        if (!subscribedToOffsetChange) {\n            monitor.subscribeToOffsetChange(onOffsetChange(monitor));\n            subscribedToOffsetChange = true;\n        }\n\n        return {\n            isDragging: monitor.isDragging()\n        };\n    });\n\n    useEffect(() => {\n        return () => {\n            subscribedToOffsetChange = false;\n            dragPreviewRef = null;\n        };\n    }, []);\n\n    // We track the value of \"isDragging\" and apply opacity=1 (after 100ms), when it switches to true.\n    // Without this, the drag cursor would be shown in the top-left corner for a short amount of time, and then it\n    // would be repositioned correctly. Definitely looks like a glitch. This also adds a nice little fade-in effect.\n    useEffect(() => {\n        if (isDragging) {\n            setTimeout(() => {\n                setDragHelperOpacity(isDragging ? 1 : 0);\n            }, 100);\n        } else {\n            setDragHelperOpacity(0);\n        }\n    }, [isDragging]);\n\n    if (!isDragging) {\n        return null;\n    }\n\n    if (!isDragging) {\n        return null;\n    }\n\n    return (\n        <div\n            style={{ zIndex: 1001 }}\n            className=\"fixed pointer-events-none left-0 top-0 w-full h-full\"\n        >\n            <div\n                ref={el => {\n                    dragPreviewRef = el;\n                }}\n                className=\"transition-opacity duration-250 ease-in-out block\"\n                style={{ opacity: dragHelperOpacity }}\n            >\n                <div className=\"size-lg rounded-full bg-primary\" />\n            </div>\n        </div>\n    );\n};\nexport default DragPreview;\n"],"names":["subscribedToOffsetChange","dragPreviewRef","onOffsetChange","monitor","offset","transform","DragPreview","dragHelperOpacity","setDragHelperOpacity","useState","isDragging","useDragLayer","initialMonitor","useEffect","setTimeout","el"],"mappings":";;AAKA,IAAIA,2BAA2B;AAE/B,IAAIC,iBAAwC;AAE5C,MAAMC,iBAAiB,CAACC,UAA+B;QACnD,IAAI,CAACF,gBACD;QAGJ,MAAMG,SAASD,QAAQ,eAAe;QACtC,IAAI,CAACC,QACD;QAGJ,MAAMC,YAAY,CAAC,UAAU,EAAED,OAAO,CAAC,GAAG,GAAG,IAAI,EAAEA,OAAO,CAAC,GAAG,GAAG,GAAG,CAAC;QACrEH,eAAe,KAAK,CAAC,YAAY,GAAGI;QAGpCJ,eAAe,KAAK,CAAC,oBAAoB,GAAGI;IAChD;AAEA,MAAMC,cAAc;IAChB,MAAM,CAACC,mBAAmBC,qBAAqB,GAAGC,SAAS;IAC3D,MAAM,EAAEC,UAAU,EAAE,GAAGC,aAAaC,CAAAA;QAIhC,MAAMT,UAAUS;QAChB,IAAI,CAACZ,0BAA0B;YAC3BG,QAAQ,uBAAuB,CAACD,eAAeC;YAC/CH,2BAA2B;QAC/B;QAEA,OAAO;YACH,YAAYG,QAAQ,UAAU;QAClC;IACJ;IAEAU,UAAU,IACC;YACHb,2BAA2B;YAC3BC,iBAAiB;QACrB,GACD,EAAE;IAKLY,UAAU;QACN,IAAIH,YACAI,WAAW;YACPN,qBAAqBE,aAAa,IAAI;QAC1C,GAAG;aAEHF,qBAAqB;IAE7B,GAAG;QAACE;KAAW;IAEf,IAAI,CAACA,YACD,OAAO;IAGX,IAAI,CAACA,YACD,OAAO;IAGX,OAAO,WAAP,GACI,oBAAC;QACG,OAAO;YAAE,QAAQ;QAAK;QACtB,WAAU;qBAEV,oBAAC;QACG,KAAKK,CAAAA;YACDd,iBAAiBc;QACrB;QACA,WAAU;QACV,OAAO;YAAE,SAASR;QAAkB;qBAEpC,oBAAC;QAAI,WAAU;;AAI/B;AACA,+BAAeD"}

package/admin/components/Draggable.d.ts

@@ -1,5 +1,6 @@
-import React, { ReactElement } from "react";
-import { ConnectDragSource } from "react-dnd";
+import type { ReactElement } from "react";
+import React from "react";
+import type { ConnectDragSource } from "react-dnd";
 interface DraggableChildrenFunctionParams {
     isDragging: boolean;
     drag: ConnectDragSource;
@@ -13,5 +14,5 @@ export interface DraggableProps {
     endDrag?: any;
     target?: string[];
 }
-declare const MemoizedDraggable: React.FC<DraggableProps>;
+declare const MemoizedDraggable: React.ComponentType<DraggableProps>;
 export default MemoizedDraggable;

package/admin/components/Draggable.js

@@ -1,66 +1,32 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _reactDnd = require("react-dnd");
-
-var emptyImage = "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==";
-
-var Draggable = function Draggable(props) {
-  var children = props.children,
-      beginDrag = props.beginDrag,
-      endDrag = props.endDrag,
-      target = props.target;
-
-  var _useDrag = (0, _reactDnd.useDrag)({
-    item: {
-      type: "element",
-      target: target
-    },
-    collect: function collect(monitor) {
-      return {
-        isDragging: monitor.isDragging()
-      };
-    },
-    begin: function begin(monitor) {
-      if (typeof beginDrag === "function") {
-        return beginDrag(props, monitor);
-      }
-
-      return beginDrag;
-    },
-    end: function end(item, monitor) {
-      if (typeof endDrag === "function") {
-        return endDrag(item, monitor);
-      }
-
-      return endDrag;
-    }
-  }),
-      _useDrag2 = (0, _slicedToArray2.default)(_useDrag, 3),
-      isDragging = _useDrag2[0].isDragging,
-      drag = _useDrag2[1],
-      preview = _useDrag2[2];
-
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactDnd.DragPreviewImage, {
-    connect: preview,
-    src: emptyImage
-  }), children({
-    isDragging: isDragging,
-    drag: drag
-  }));
+import react from "react";
+import { DragPreviewImage, useDrag } from "react-dnd";
+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 ("function" == typeof beginDrag) return beginDrag(props, monitor);
+            return beginDrag;
+        },
+        collect: (monitor)=>({
+                isDragging: monitor.isDragging()
+            }),
+        end (item, monitor) {
+            if ("function" == typeof endDrag) return endDrag(item, monitor);
+            return endDrag;
+        }
+    });
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(DragPreviewImage, {
+        connect: preview,
+        src: emptyImage
+    }), children({
+        isDragging,
+        drag
+    }));
 };
+const MemoizedDraggable = /*#__PURE__*/ react.memo(Draggable);
+const components_Draggable = MemoizedDraggable;
+export default components_Draggable;
 
-var MemoizedDraggable = /*#__PURE__*/_react.default.memo(Draggable);
-
-var _default = MemoizedDraggable;
-exports.default = _default;
+//# sourceMappingURL=Draggable.js.map

package/admin/components/Draggable.js.map

@@ -1 +1 @@
-{"version":3,"names":["emptyImage","Draggable","props","children","beginDrag","endDrag","target","useDrag","item","type","collect","monitor","isDragging","begin","end","drag","preview","MemoizedDraggable","React","memo"],"sources":["Draggable.tsx"],"sourcesContent":["import React, { ReactElement } from \"react\";\nimport { useDrag, DragPreviewImage, ConnectDragSource } 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: React.FC<DraggableProps> = props => {\n    const { children, beginDrag, endDrag, target } = props;\n\n    const [{ isDragging }, drag, preview] = useDrag({\n        item: { type: \"element\", target },\n        collect: monitor => ({\n            isDragging: monitor.isDragging()\n        }),\n        begin(monitor) {\n            if (typeof beginDrag === \"function\") {\n                return beginDrag(props, monitor);\n            }\n            return beginDrag;\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.FC<DraggableProps> = React.memo(Draggable);\nexport default MemoizedDraggable;\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AAEA,IAAMA,UAAU,GAAG,4EAAnB;;AAiBA,IAAMC,SAAmC,GAAG,SAAtCA,SAAsC,CAAAC,KAAK,EAAI;EACjD,IAAQC,QAAR,GAAiDD,KAAjD,CAAQC,QAAR;EAAA,IAAkBC,SAAlB,GAAiDF,KAAjD,CAAkBE,SAAlB;EAAA,IAA6BC,OAA7B,GAAiDH,KAAjD,CAA6BG,OAA7B;EAAA,IAAsCC,MAAtC,GAAiDJ,KAAjD,CAAsCI,MAAtC;;EAEA,eAAwC,IAAAC,iBAAA,EAAQ;IAC5CC,IAAI,EAAE;MAAEC,IAAI,EAAE,SAAR;MAAmBH,MAAM,EAANA;IAAnB,CADsC;IAE5CI,OAAO,EAAE,iBAAAC,OAAO;MAAA,OAAK;QACjBC,UAAU,EAAED,OAAO,CAACC,UAAR;MADK,CAAL;IAAA,CAF4B;IAK5CC,KAL4C,iBAKtCF,OALsC,EAK7B;MACX,IAAI,OAAOP,SAAP,KAAqB,UAAzB,EAAqC;QACjC,OAAOA,SAAS,CAACF,KAAD,EAAQS,OAAR,CAAhB;MACH;;MACD,OAAOP,SAAP;IACH,CAV2C;IAW5CU,GAX4C,eAWxCN,IAXwC,EAWlCG,OAXkC,EAWzB;MACf,IAAI,OAAON,OAAP,KAAmB,UAAvB,EAAmC;QAC/B,OAAOA,OAAO,CAACG,IAAD,EAAOG,OAAP,CAAd;MACH;;MACD,OAAON,OAAP;IACH;EAhB2C,CAAR,CAAxC;EAAA;EAAA,IAASO,UAAT,gBAASA,UAAT;EAAA,IAAuBG,IAAvB;EAAA,IAA6BC,OAA7B;;EAmBA,oBACI,yEACI,6BAAC,0BAAD;IAAkB,OAAO,EAAEA,OAA3B;IAAoC,GAAG,EAAEhB;EAAzC,EADJ,EAEKG,QAAQ,CAAC;IAAES,UAAU,EAAVA,UAAF;IAAcG,IAAI,EAAJA;EAAd,CAAD,CAFb,CADJ;AAMH,CA5BD;;AA8BA,IAAME,iBAA2C,gBAAGC,cAAA,CAAMC,IAAN,CAAWlB,SAAX,CAApD;;eACegB,iB"}
+{"version":3,"file":"admin/components/Draggable.js","sources":["../../../src/admin/components/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"],"names":["emptyImage","Draggable","props","children","beginDrag","endDrag","isDragging","drag","preview","useDrag","monitor","item","DragPreviewImage","MemoizedDraggable","React"],"mappings":";;AAKA,MAAMA,aAAa;AAiBnB,MAAMC,YAAY,CAACC;IACf,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,OAAO,EAAE,GAAGH;IAEzC,MAAM,CAAC,EAAEI,UAAU,EAAE,EAAEC,MAAMC,QAAQ,GAAGC,QAAQ;QAC5C,MAAM;QACN,MAAKC,OAAO;YACR,IAAI,AAAqB,cAArB,OAAON,WACP,OAAOA,UAAUF,OAAOQ;YAE5B,OAAON;QACX;QACA,SAASM,CAAAA,UAAY;gBACjB,YAAYA,QAAQ,UAAU;YAClC;QACA,KAAIC,IAAI,EAAED,OAAO;YACb,IAAI,AAAmB,cAAnB,OAAOL,SACP,OAAOA,QAAQM,MAAMD;YAEzB,OAAOL;QACX;IACJ;IAEA,OAAO,WAAP,GACI,wDACI,oBAACO,kBAAgBA;QAAC,SAASJ;QAAS,KAAKR;QACxCG,SAAS;QAAEG;QAAYC;IAAK;AAGzC;AAEA,MAAMM,oBAAiBA,WAAAA,GAAwCC,MAAAA,IAAU,CAACb;AAC1E,6BAAeY"}

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

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

package/admin/components/DropZone/Center.js

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

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

@@ -1 +1 @@
-{"version":3,"names":["Container","styled","isOver","backgroundColor","boxSizing","height","minHeight","position","userSelect","width","border","opacity","Add","top","left","transform","margin","color","Center","onDrop","children","style","drop"],"sources":["Center.tsx"],"sourcesContent":["import React, { CSSProperties } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { Droppable, OnDropCallable } from \"./../Droppable\";\n\n// @ts-ignore\nconst Container = styled(\"div\")(({ isOver }: { isOver: boolean }) => ({\n    backgroundColor: \"transparent\",\n    boxSizing: \"border-box\",\n    height: \"100%\",\n    minHeight: 100,\n    position: \"relative\",\n    userSelect: \"none\",\n    width: \"100%\",\n    border: isOver\n        ? \"2px dashed var(--mdc-theme-primary)\"\n        : \"2px dashed var(--mdc-theme-secondary)\",\n    opacity: 1\n}));\n\n// @ts-ignore\nconst Add = styled(\"div\")(({ isOver }: { isOver: boolean }) => ({\n    position: \"absolute\",\n    top: \"50%\",\n    left: \"50%\",\n    transform: \"translate(-50%,-50%)\",\n    margin: 0,\n    color: isOver ? \"var(--mdc-theme-primary)\" : \"var(--mdc-theme-secondary)\"\n}));\n\ninterface CenterProps {\n    type?: string;\n    onDrop: OnDropCallable;\n    children: React.ReactNode;\n    active?: boolean;\n    highlight?: boolean;\n    style?: CSSProperties;\n}\n\nconst Center: React.FC<CenterProps> = ({ onDrop, children, style }) => {\n    return (\n        <Droppable onDrop={onDrop}>\n            {({ isOver, drop }) => (\n                <div\n                    ref={drop}\n                    style={{ width: \"100%\", height: \"100%\", ...style }}\n                    data-testid={\"cms-editor-first-field-area\"}\n                >\n                    <Container isOver={isOver}>\n                        <Add isOver={isOver}>{children}</Add>\n                    </Container>\n                </div>\n            )}\n        </Droppable>\n    );\n};\n\nexport default Center;\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;AACA,IAAMA,SAAS,oBAAGC,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,GAAiB;EAAA,IAAGC,MAAH,QAAGA,MAAH;EAAA,OAAsC;IAClEC,eAAe,EAAE,aADiD;IAElEC,SAAS,EAAE,YAFuD;IAGlEC,MAAM,EAAE,MAH0D;IAIlEC,SAAS,EAAE,GAJuD;IAKlEC,QAAQ,EAAE,UALwD;IAMlEC,UAAU,EAAE,MANsD;IAOlEC,KAAK,EAAE,MAP2D;IAQlEC,MAAM,EAAER,MAAM,GACR,qCADQ,GAER,uCAV4D;IAWlES,OAAO,EAAE;EAXyD,CAAtC;AAAA,CAAjB,CAAf,C,CAcA;;AACA,IAAMC,GAAG,oBAAGX,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,GAAiB;EAAA,IAAGC,MAAH,SAAGA,MAAH;EAAA,OAAsC;IAC5DK,QAAQ,EAAE,UADkD;IAE5DM,GAAG,EAAE,KAFuD;IAG5DC,IAAI,EAAE,KAHsD;IAI5DC,SAAS,EAAE,sBAJiD;IAK5DC,MAAM,EAAE,CALoD;IAM5DC,KAAK,EAAEf,MAAM,GAAG,0BAAH,GAAgC;EANe,CAAtC;AAAA,CAAjB,CAAT;;AAkBA,IAAMgB,MAA6B,GAAG,SAAhCA,MAAgC,QAAiC;EAAA,IAA9BC,MAA8B,SAA9BA,MAA8B;EAAA,IAAtBC,QAAsB,SAAtBA,QAAsB;EAAA,IAAZC,KAAY,SAAZA,KAAY;EACnE,oBACI,6BAAC,oBAAD;IAAW,MAAM,EAAEF;EAAnB,GACK;IAAA,IAAGjB,MAAH,SAAGA,MAAH;IAAA,IAAWoB,IAAX,SAAWA,IAAX;IAAA,oBACG;MACI,GAAG,EAAEA,IADT;MAEI,KAAK;QAAIb,KAAK,EAAE,MAAX;QAAmBJ,MAAM,EAAE;MAA3B,GAAsCgB,KAAtC,CAFT;MAGI,eAAa;IAHjB,gBAKI,6BAAC,SAAD;MAAW,MAAM,EAAEnB;IAAnB,gBACI,6BAAC,GAAD;MAAK,MAAM,EAAEA;IAAb,GAAsBkB,QAAtB,CADJ,CALJ,CADH;EAAA,CADL,CADJ;AAeH,CAhBD;;eAkBeF,M"}
+{"version":3,"file":"admin/components/DropZone/Center.js","sources":["../../../../src/admin/components/DropZone/Center.tsx"],"sourcesContent":["import type { CSSProperties } from \"react\";\nimport React from \"react\";\nimport type { DroppableProps, OnDropCallable } from \"./../Droppable.js\";\nimport { Droppable } from \"./../Droppable.js\";\nimport { cn, cva } from \"@webiny/admin-ui\";\n\nconst droppableContainerVariants = cva(\n    \"bg-transparent box-border h-full min-h-[120px] relative user-select-none w-full border-md border-dashed\",\n    {\n        variants: {\n            isOver: {\n                true: \"border-accent-default text-accent-primary\",\n                false: \"border-success-default text-success-primary\"\n            },\n            isDroppable: {\n                false: \"border-success-default 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: true };\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={element => {\n                        drop(element);\n                    }}\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=\"absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 m-0\">\n                            {children}\n                        </div>\n                    </div>\n                </div>\n            )}\n        </Droppable>\n    );\n};\n\nexport default Center;\n"],"names":["droppableContainerVariants","cva","getInert","isDroppable","Center","onDrop","children","style","Droppable","isOver","drop","element","cn"],"mappings":";;;AAMA,MAAMA,6BAA6BC,IAC/B,2GACA;IACI,UAAU;QACN,QAAQ;YACJ,MAAM;YACN,OAAO;QACX;QACA,aAAa;YACT,OAAO;QACX;IACJ;IACA,iBAAiB;QACb,QAAQ;QACR,aAAa;IACjB;AACJ;AAaJ,MAAMC,WAAW,CAACC,cACPA,cAAc,CAAC,IAAI;QAAE,OAAO;IAAK;AAG5C,MAAMC,SAAS,CAAC,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,KAAK,EAAEJ,WAAW,EAAe,GAC1D,WAAP,GACI,oBAACK,WAASA;QAAC,QAAQH;QAAQ,aAAaF;OACnC,CAAC,EAAEM,MAAM,EAAEC,IAAI,EAAEP,WAAW,EAAE,iBAC3B,oBAAC;YACG,KAAKQ,CAAAA;gBACDD,KAAKC;YACT;YACA,OAAO;gBAAE,OAAO;gBAAQ,QAAQ;gBAAQ,GAAGJ,KAAK;YAAC;YACjD,eAAa;YACZ,GAAGL,SAASC,YAAY;yBAEzB,oBAAC;YAAI,WAAWS,GAAGZ,2BAA2B;gBAAES;gBAAQN;YAAY;yBAChE,oBAAC;YAAI,WAAU;WACVG;AAS7B,wBAAeF"}

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

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

package/admin/components/DropZone/Horizontal.js

@@ -1,97 +1,35 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-
-var _Droppable = require("../Droppable");
-
-var _excluded = ["last", "onDrop", "isVisible"];
-var InnerDiv = /*#__PURE__*/(0, _styled.default)("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__*/(0, _styled.default)("div", {
-  target: "e1uuull91",
-  label: "BackgroundColorDiv"
-})({
-  width: "100%",
-  height: "100%"
-});
-var OuterDiv = /*#__PURE__*/(0, _styled.default)("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 = {}, (0, _defineProperty2.default)(_ref, props.last ? "bottom" : "top", -15), (0, _defineProperty2.default)(_ref, InnerDiv, (0, _defineProperty2.default)({
-    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 = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
-  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,
-      "data-testid": rest["data-testid"],
-      style: (_ref4 = {
-        /* For dropzone debugging: border: "1px solid blue",*/
-        height: "15px",
-        width: "100%",
-        position: "absolute"
-      }, (0, _defineProperty2.default)(_ref4, last ? "bottom" : "top", 0), (0, _defineProperty2.default)(_ref4, "left", 0), (0, _defineProperty2.default)(_ref4, "zIndex", isDragging ? 1000 : -1), _ref4)
-    }, /*#__PURE__*/_react.default.createElement(OuterDiv, {
-      isOver: isOver,
-      isDragging: isDragging,
-      last: last ? true : false
-    }, /*#__PURE__*/_react.default.createElement(InnerDiv, null, /*#__PURE__*/_react.default.createElement(BackgroundColorDiv, null))));
-  });
-};
-
-var _default = Horizontal;
-exports.default = _default;
+import react from "react";
+import { Droppable } from "../Droppable.js";
+import { cn } from "@webiny/admin-ui";
+const OuterDiv = ({ isOver, isDragging, last })=>/*#__PURE__*/ react.createElement("div", {
+        className: cn("absolute w-full z-10 bg-transparent flex justify-center", last ? "-bottom-md" : "-top-md")
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: cn("h-md w-full z-3 border-dashed border-sm hidden", isOver ? "border-accent-default" : "border-success-default", isDragging && "block")
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: cn("w-full h-full opacity-50", isOver ? "bg-primary-muted" : "bg-success-muted")
+    })));
+const Horizontal = ({ last, onDrop, isVisible, ...rest })=>/*#__PURE__*/ react.createElement(Droppable, {
+        onDrop: onDrop,
+        isVisible: isVisible
+    }, ({ isOver, isDragging, drop })=>/*#__PURE__*/ react.createElement("div", {
+            ref: (element)=>{
+                drop(element);
+            },
+            "data-testid": rest["data-testid"],
+            style: {
+                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
+        })));
+const DropZone_Horizontal = Horizontal;
+export default DropZone_Horizontal;
+
+//# sourceMappingURL=Horizontal.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["InnerDiv","styled","height","width","zIndex","borderRadius","boxSizing","display","border","borderSpacing","BackgroundColorDiv","OuterDiv","margin","padding","backgroundColor","position","justifyContent","props","last","borderColor","isOver","isDragging","opacity","Horizontal","onDrop","isVisible","rest","drop"],"sources":["Horizontal.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 InnerDiv = styled(\"div\")({\n    height: 15,\n    width: \"100%\",\n    zIndex: 3,\n    borderRadius: 0,\n    boxSizing: \"border-box\",\n    display: \"none\",\n    border: \"1px dashed black\",\n    borderSpacing: 5\n});\n\nconst BackgroundColorDiv = styled(\"div\")({\n    width: \"100%\",\n    height: \"100%\"\n});\n\ninterface OuterDivProps {\n    isOver: boolean;\n    isDragging: boolean;\n    last: boolean;\n}\n\nconst OuterDiv = styled(\"div\")(\n    {\n        margin: 0,\n        padding: 0,\n        width: \"calc(100% + 2px)\",\n        zIndex: 10,\n        backgroundColor: \"transparent\",\n        position: \"absolute\",\n        display: \"flex\",\n        justifyContent: \"center\"\n    },\n    (props: OuterDivProps) => ({\n        [props.last ? \"bottom\" : \"top\"]: -15,\n        // @ts-ignore\n        [InnerDiv]: {\n            borderColor: props.isOver ? \"var(--mdc-theme-primary)\" : \"var(--mdc-theme-secondary)\",\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 HorizontalProps {\n    onDrop(item: DragSource): void;\n    last?: boolean;\n    isVisible?: IsVisibleCallable;\n    [\"data-testid\"]?: string;\n}\n\nconst Horizontal: React.FC<HorizontalProps> = ({ last, onDrop, isVisible, ...rest }) => {\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: \"15px\",\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 ? true : false}>\n                        <InnerDiv>\n                            <BackgroundColorDiv />\n                        </InnerDiv>\n                    </OuterDiv>\n                </div>\n            )}\n        </Droppable>\n    );\n};\n\nexport default Horizontal;\n"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AACA;;;AAGA,IAAMA,QAAQ,oBAAGC,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,GAAiB;EAC3BC,MAAM,EAAE,EADmB;EAE3BC,KAAK,EAAE,MAFoB;EAG3BC,MAAM,EAAE,CAHmB;EAI3BC,YAAY,EAAE,CAJa;EAK3BC,SAAS,EAAE,YALgB;EAM3BC,OAAO,EAAE,MANkB;EAO3BC,MAAM,EAAE,kBAPmB;EAQ3BC,aAAa,EAAE;AARY,CAAjB,CAAd;AAWA,IAAMC,kBAAkB,oBAAGT,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,GAAiB;EACrCE,KAAK,EAAE,MAD8B;EAErCD,MAAM,EAAE;AAF6B,CAAjB,CAAxB;AAWA,IAAMS,QAAQ,oBAAGV,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,GACV;EACIW,MAAM,EAAE,CADZ;EAEIC,OAAO,EAAE,CAFb;EAGIV,KAAK,EAAE,kBAHX;EAIIC,MAAM,EAAE,EAJZ;EAKIU,eAAe,EAAE,aALrB;EAMIC,QAAQ,EAAE,UANd;EAOIR,OAAO,EAAE,MAPb;EAQIS,cAAc,EAAE;AARpB,CADU,EAWV,UAACC,KAAD;EAAA;;EAAA,sDACKA,KAAK,CAACC,IAAN,GAAa,QAAb,GAAwB,KAD7B,EACqC,CAAC,EADtC,uCAGKlB,QAHL;IAIQmB,WAAW,EAAEF,KAAK,CAACG,MAAN,GAAe,0BAAf,GAA4C,4BAJjE;IAKQb,OAAO,EAAEU,KAAK,CAACI,UAAN,GAAmB,OAAnB,GAA6B;EAL9C,GAOSX,kBAPT,EAO8B;IAClBY,OAAO,EAAE,GADS;IAElBR,eAAe,EAAEG,KAAK,CAACG,MAAN,GACX,0BADW,GAEX;EAJY,CAP9B;AAAA,CAXU,CAAd;;AAmCA,IAAMG,UAAqC,GAAG,SAAxCA,UAAwC,QAA0C;EAAA,IAAvCL,IAAuC,SAAvCA,IAAuC;EAAA,IAAjCM,MAAiC,SAAjCA,MAAiC;EAAA,IAAzBC,SAAyB,SAAzBA,SAAyB;EAAA,IAAXC,IAAW;EACpF,oBACI,6BAAC,oBAAD;IAAW,MAAM,EAAEF,MAAnB;IAA2B,SAAS,EAAEC;EAAtC,GACK;IAAA;;IAAA,IAAGL,MAAH,SAAGA,MAAH;IAAA,IAAWC,UAAX,SAAWA,UAAX;IAAA,IAAuBM,IAAvB,SAAuBA,IAAvB;IAAA,oBACG;MACI,GAAG,EAAEA,IADT;MAEI,eAAaD,IAAI,CAAC,aAAD,CAFrB;MAGI,KAAK;QACD;QACAxB,MAAM,EAAE,MAFP;QAGDC,KAAK,EAAE,MAHN;QAIDY,QAAQ,EAAE;MAJT,wCAKAG,IAAI,GAAG,QAAH,GAAc,KALlB,EAK0B,CAL1B,gDAMK,CANL,kDAOOG,UAAU,GAAG,IAAH,GAAU,CAAC,CAP5B;IAHT,gBAaI,6BAAC,QAAD;MAAU,MAAM,EAAED,MAAlB;MAA0B,UAAU,EAAEC,UAAtC;MAAkD,IAAI,EAAEH,IAAI,GAAG,IAAH,GAAU;IAAtE,gBACI,6BAAC,QAAD,qBACI,6BAAC,kBAAD,OADJ,CADJ,CAbJ,CADH;EAAA,CADL,CADJ;AAyBH,CA1BD;;eA4BeK,U"}
+{"version":3,"file":"admin/components/DropZone/Horizontal.js","sources":["../../../../src/admin/components/DropZone/Horizontal.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 OuterDivProps {\n    isOver: boolean;\n    isDragging: boolean;\n    last: boolean;\n}\n\nconst OuterDiv = ({ isOver, isDragging, last }: OuterDivProps) => (\n    <div\n        className={cn(\n            \"absolute w-full z-10 bg-transparent flex justify-center\",\n            last ? \"-bottom-md\" : \"-top-md\"\n        )}\n    >\n        <div\n            className={cn(\n                \"h-md w-full z-3 border-dashed border-sm hidden\",\n                isOver ? \"border-accent-default\" : \"border-success-default\",\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 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={element => {\n                        drop(element);\n                    }}\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"],"names":["OuterDiv","isOver","isDragging","last","cn","Horizontal","onDrop","isVisible","rest","Droppable","drop","element"],"mappings":";;;AAYA,MAAMA,WAAW,CAAC,EAAEC,MAAM,EAAEC,UAAU,EAAEC,IAAI,EAAiB,iBACzD,oBAAC;QACG,WAAWC,GACP,2DACAD,OAAO,eAAe;qBAG1B,oBAAC;QACG,WAAWC,GACP,kDACAH,SAAS,0BAA0B,0BACnCC,cAAc;qBAGlB,oBAAC;QACG,WAAWE,GACP,4BACAH,SAAS,qBAAqB;;AAclD,MAAMI,aAAa,CAAC,EAAEF,IAAI,EAAEG,MAAM,EAAEC,SAAS,EAAE,GAAGC,MAAuB,GAC9D,WAAP,GACI,oBAACC,WAASA;QAAC,QAAQH;QAAQ,WAAWC;OACjC,CAAC,EAAEN,MAAM,EAAEC,UAAU,EAAEQ,IAAI,EAAE,iBAC1B,oBAAC;YACG,KAAKC,CAAAA;gBACDD,KAAKC;YACT;YACA,eAAaH,IAAI,CAAC,cAAc;YAChC,OAAO;gBAEH,QAAQ;gBACR,OAAO;gBACP,UAAU;gBACV,CAACL,OAAO,WAAW,MAAM,EAAE;gBAC3B,MAAM;gBACN,QAAQD,aAAa,OAAO;YAChC;yBAEA,oBAACF,UAAQA;YAAC,QAAQC;YAAQ,YAAYC;YAAY,MAAMC,QAAQ;;AAOpF,4BAAeE"}

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

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