@webiny/app-headless-cms 6.3.0-beta.4 → 6.4.0-beta.0

package/admin/components/DragPreview.js

@@ -1,80 +1,59 @@
-import React, { useEffect, useState } from "react";
+import react, { useEffect, useState } from "react";
 import { useDragLayer } from "react-dnd";
 let subscribedToOffsetChange = false;
 let dragPreviewRef = null;
-const onOffsetChange = monitor => () => {
-  if (!dragPreviewRef) {
-    return;
-  }
-  const offset = monitor.getClientOffset();
-  if (!offset) {
-    return;
-  }
-  const transform = `translate(${offset.x - 15}px, ${offset.y - 15}px)`;
-  dragPreviewRef.style["transform"] = transform;
-  // TODO @ts-refactor figure out better type / possibly not needed in newer browsers
-  // @ts-expect-error
-  dragPreviewRef.style["-webkit-transform"] = transform;
-};
-const DragPreview = () => {
-  const [dragHelperOpacity, setDragHelperOpacity] = useState(0);
-  const {
-    isDragging
-  } = useDragLayer(initialMonitor => {
-    /**
-     * We must cast because TS is complaining. We know that casting as DragSourceMonitorImpl is ok.
-     */
-    const monitor = initialMonitor;
-    if (!subscribedToOffsetChange) {
-      monitor.subscribeToOffsetChange(onOffsetChange(monitor));
-      subscribedToOffsetChange = true;
-    }
-    return {
-      isDragging: monitor.isDragging()
-    };
-  });
-  useEffect(() => {
-    return () => {
-      subscribedToOffsetChange = false;
-      dragPreviewRef = null;
+const onOffsetChange = (monitor)=>()=>{
+        if (!dragPreviewRef) return;
+        const offset = monitor.getClientOffset();
+        if (!offset) return;
+        const transform = `translate(${offset.x - 15}px, ${offset.y - 15}px)`;
+        dragPreviewRef.style["transform"] = transform;
+        dragPreviewRef.style["-webkit-transform"] = transform;
     };
-  }, []);
-
-  // We track the value of "isDragging" and apply opacity=1 (after 100ms), when it switches to true.
-  // Without this, the drag cursor would be shown in the top-left corner for a short amount of time, and then it
-  // would be repositioned correctly. Definitely looks like a glitch. This also adds a nice little fade-in effect.
-  useEffect(() => {
-    if (isDragging) {
-      setTimeout(() => {
-        setDragHelperOpacity(isDragging ? 1 : 0);
-      }, 100);
-    } else {
-      setDragHelperOpacity(0);
-    }
-  }, [isDragging]);
-  if (!isDragging) {
-    return null;
-  }
-  if (!isDragging) {
-    return null;
-  }
-  return /*#__PURE__*/React.createElement("div", {
-    style: {
-      zIndex: 1001
-    },
-    className: "fixed pointer-events-none left-0 top-0 w-full h-full"
-  }, /*#__PURE__*/React.createElement("div", {
-    ref: el => {
-      dragPreviewRef = el;
-    },
-    className: "transition-opacity duration-250 ease-in-out block",
-    style: {
-      opacity: dragHelperOpacity
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "size-lg rounded-full bg-primary"
-  })));
+const DragPreview = ()=>{
+    const [dragHelperOpacity, setDragHelperOpacity] = useState(0);
+    const { isDragging } = useDragLayer((initialMonitor)=>{
+        const monitor = initialMonitor;
+        if (!subscribedToOffsetChange) {
+            monitor.subscribeToOffsetChange(onOffsetChange(monitor));
+            subscribedToOffsetChange = true;
+        }
+        return {
+            isDragging: monitor.isDragging()
+        };
+    });
+    useEffect(()=>()=>{
+            subscribedToOffsetChange = false;
+            dragPreviewRef = null;
+        }, []);
+    useEffect(()=>{
+        if (isDragging) setTimeout(()=>{
+            setDragHelperOpacity(isDragging ? 1 : 0);
+        }, 100);
+        else setDragHelperOpacity(0);
+    }, [
+        isDragging
+    ]);
+    if (!isDragging) return null;
+    if (!isDragging) return null;
+    return /*#__PURE__*/ react.createElement("div", {
+        style: {
+            zIndex: 1001
+        },
+        className: "fixed pointer-events-none left-0 top-0 w-full h-full"
+    }, /*#__PURE__*/ react.createElement("div", {
+        ref: (el)=>{
+            dragPreviewRef = el;
+        },
+        className: "transition-opacity duration-250 ease-in-out block",
+        style: {
+            opacity: dragHelperOpacity
+        }
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "size-lg rounded-full bg-primary"
+    })));
 };
-export default DragPreview;
+const components_DragPreview = DragPreview;
+export default components_DragPreview;
 
 //# sourceMappingURL=DragPreview.js.map

package/admin/components/DragPreview.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useState","useDragLayer","subscribedToOffsetChange","dragPreviewRef","onOffsetChange","monitor","offset","getClientOffset","transform","x","y","style","DragPreview","dragHelperOpacity","setDragHelperOpacity","isDragging","initialMonitor","subscribeToOffsetChange","setTimeout","createElement","zIndex","className","ref","el","opacity"],"sources":["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"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAElD,SAASC,YAAY,QAAQ,WAAW;AAGxC,IAAIC,wBAAwB,GAAG,KAAK;AAEpC,IAAIC,cAAqC,GAAG,IAAI;AAEhD,MAAMC,cAAc,GAAIC,OAA0B,IAAK,MAAM;EACzD,IAAI,CAACF,cAAc,EAAE;IACjB;EACJ;EAEA,MAAMG,MAAM,GAAGD,OAAO,CAACE,eAAe,CAAC,CAAC;EACxC,IAAI,CAACD,MAAM,EAAE;IACT;EACJ;EAEA,MAAME,SAAS,GAAG,aAAaF,MAAM,CAACG,CAAC,GAAG,EAAE,OAAOH,MAAM,CAACI,CAAC,GAAG,EAAE,KAAK;EACrEP,cAAc,CAACQ,KAAK,CAAC,WAAW,CAAC,GAAGH,SAAS;EAC7C;EACA;EACAL,cAAc,CAACQ,KAAK,CAAC,mBAAmB,CAAC,GAAGH,SAAS;AACzD,CAAC;AAED,MAAMI,WAAW,GAAGA,CAAA,KAAM;EACtB,MAAM,CAACC,iBAAiB,EAAEC,oBAAoB,CAAC,GAAGd,QAAQ,CAAC,CAAC,CAAC;EAC7D,MAAM;IAAEe;EAAW,CAAC,GAAGd,YAAY,CAACe,cAAc,IAAI;IAClD;AACR;AACA;IACQ,MAAMX,OAAO,GAAGW,cAAkD;IAClE,IAAI,CAACd,wBAAwB,EAAE;MAC3BG,OAAO,CAACY,uBAAuB,CAACb,cAAc,CAACC,OAAO,CAAC,CAAC;MACxDH,wBAAwB,GAAG,IAAI;IACnC;IAEA,OAAO;MACHa,UAAU,EAAEV,OAAO,CAACU,UAAU,CAAC;IACnC,CAAC;EACL,CAAC,CAAC;EAEFhB,SAAS,CAAC,MAAM;IACZ,OAAO,MAAM;MACTG,wBAAwB,GAAG,KAAK;MAChCC,cAAc,GAAG,IAAI;IACzB,CAAC;EACL,CAAC,EAAE,EAAE,CAAC;;EAEN;EACA;EACA;EACAJ,SAAS,CAAC,MAAM;IACZ,IAAIgB,UAAU,EAAE;MACZG,UAAU,CAAC,MAAM;QACbJ,oBAAoB,CAACC,UAAU,GAAG,CAAC,GAAG,CAAC,CAAC;MAC5C,CAAC,EAAE,GAAG,CAAC;IACX,CAAC,MAAM;MACHD,oBAAoB,CAAC,CAAC,CAAC;IAC3B;EACJ,CAAC,EAAE,CAACC,UAAU,CAAC,CAAC;EAEhB,IAAI,CAACA,UAAU,EAAE;IACb,OAAO,IAAI;EACf;EAEA,IAAI,CAACA,UAAU,EAAE;IACb,OAAO,IAAI;EACf;EAEA,oBACIjB,KAAA,CAAAqB,aAAA;IACIR,KAAK,EAAE;MAAES,MAAM,EAAE;IAAK,CAAE;IACxBC,SAAS,EAAC;EAAsD,gBAEhEvB,KAAA,CAAAqB,aAAA;IACIG,GAAG,EAAEC,EAAE,IAAI;MACPpB,cAAc,GAAGoB,EAAE;IACvB,CAAE;IACFF,SAAS,EAAC,mDAAmD;IAC7DV,KAAK,EAAE;MAAEa,OAAO,EAAEX;IAAkB;EAAE,gBAEtCf,KAAA,CAAAqB,aAAA;IAAKE,SAAS,EAAC;EAAiC,CAAE,CACjD,CACJ,CAAC;AAEd,CAAC;AACD,eAAeT,WAAW","ignoreList":[]}
+{"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.js

@@ -1,41 +1,32 @@
-import React from "react";
-import { useDrag, DragPreviewImage } from "react-dnd";
+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 (typeof beginDrag === "function") {
-        return beginDrag(props, monitor);
-      }
-      return beginDrag;
-    },
-    collect: monitor => ({
-      isDragging: monitor.isDragging()
-    }),
-    end(item, monitor) {
-      if (typeof endDrag === "function") {
-        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 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);
-export default MemoizedDraggable;
+const MemoizedDraggable = /*#__PURE__*/ react.memo(Draggable);
+const components_Draggable = MemoizedDraggable;
+export default components_Draggable;
 
 //# sourceMappingURL=Draggable.js.map

package/admin/components/Draggable.js.map

@@ -1 +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":[]}
+{"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.js

@@ -1,58 +1,47 @@
-import React from "react";
-import { Droppable } from "./../Droppable.js";
+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"
+    variants: {
+        isOver: {
+            true: "border-accent-default text-accent-primary",
+            false: "border-success-default text-success-primary"
+        },
+        isDroppable: {
+            false: "border-success-default text-accent-primary"
+        }
     },
-    isDroppable: {
-      false: "border-success-default text-accent-primary"
+    defaultVariants: {
+        isOver: false,
+        isDroppable: true
     }
-  },
-  defaultVariants: {
-    isOver: false,
-    isDroppable: true
-  }
 });
-const getInert = isDroppable => {
-  return isDroppable ? {} : {
-    inert: true
-  };
-};
-const Center = ({
-  onDrop,
-  children,
-  style,
-  isDroppable
-}) => {
-  return /*#__PURE__*/React.createElement(Droppable, {
-    onDrop: onDrop,
-    isDroppable: isDroppable
-  }, ({
-    isOver,
-    drop,
-    isDroppable
-  }) => /*#__PURE__*/React.createElement("div", Object.assign({
-    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))));
-};
-export default Center;
+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":["React","Droppable","cn","cva","droppableContainerVariants","variants","isOver","true","false","isDroppable","defaultVariants","getInert","inert","Center","onDrop","children","style","createElement","drop","Object","assign","ref","element","width","height","className"],"sources":["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"],"mappings":"AACA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,SAAS;AAClB,SAASC,EAAE,EAAEC,GAAG,QAAQ,kBAAkB;AAE1C,MAAMC,0BAA0B,GAAGD,GAAG,CAClC,yGAAyG,EACzG;EACIE,QAAQ,EAAE;IACNC,MAAM,EAAE;MACJC,IAAI,EAAE,2CAA2C;MACjDC,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;EAAK,CAAC;AAC7C,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,EAAEC,OAAO,IAAI;MACZJ,IAAI,CAACI,OAAO,CAAC;IACjB,CAAE;IACFN,KAAK,EAAE;MAAEO,KAAK,EAAE,MAAM;MAAEC,MAAM,EAAE,MAAM;MAAE,GAAGR;IAAM,CAAE;IACnD,eAAa;EAA8B,GACvCL,QAAQ,CAACF,WAAW,CAAC,gBAEzBT,KAAA,CAAAiB,aAAA;IAAKQ,SAAS,EAAEvB,EAAE,CAACE,0BAA0B,CAAC;MAAEE,MAAM;MAAEG;IAAY,CAAC,CAAC;EAAE,gBACpET,KAAA,CAAAiB,aAAA;IAAKQ,SAAS,EAAC;EAA2E,GACrFV,QACA,CACJ,CACJ,CAEF,CAAC;AAEpB,CAAC;AAED,eAAeF,MAAM","ignoreList":[]}
+{"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.js

@@ -1,50 +1,35 @@
-import React from "react";
+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
-}) => {
-  return /*#__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: {
-      /* 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;
+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":["React","Droppable","cn","OuterDiv","isOver","isDragging","last","createElement","className","Horizontal","onDrop","isVisible","rest","drop","ref","element","style","height","width","position","left","zIndex"],"sources":["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"],"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,yDAAyD,EACzDI,IAAI,GAAG,YAAY,GAAG,SAC1B;AAAE,gBAEFN,KAAA,CAAAO,aAAA;EACIC,SAAS,EAAEN,EAAE,CACT,gDAAgD,EAChDE,MAAM,GAAG,uBAAuB,GAAG,wBAAwB,EAC3DC,UAAU,IAAI,OAClB;AAAE,gBAEFL,KAAA,CAAAO,aAAA;EACIC,SAAS,EAAEN,EAAE,CACT,0BAA0B,EAC1BE,MAAM,GAAG,kBAAkB,GAAG,kBAClC;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,EAAEC,OAAO,IAAI;MACZF,IAAI,CAACE,OAAO,CAAC;IACjB,CAAE;IACF,eAAaH,IAAI,CAAC,aAAa,CAAE;IACjCI,KAAK,EAAE;MACH;MACAC,MAAM,EAAE,MAAM;MACdC,KAAK,EAAE,MAAM;MACbC,QAAQ,EAAE,UAAU;MACpB,CAACb,IAAI,GAAG,QAAQ,GAAG,KAAK,GAAG,CAAC;MAC5Bc,IAAI,EAAE,CAAC;MACPC,MAAM,EAAEhB,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":[]}
+{"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.js

@@ -1,50 +1,35 @@
-import React from "react";
+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
-}) => {
-  return /*#__PURE__*/React.createElement(Droppable, {
-    onDrop: onDrop,
-    isVisible: isVisible
-  }, ({
-    isOver,
-    isDragging,
-    drop
-  }) => /*#__PURE__*/React.createElement("div", {
-    ref: element => {
-      drop(element);
-    },
-    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;
+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":["React","Droppable","cn","OuterDivVertical","isOver","last","isDragging","createElement","className","Vertical","depth","onDrop","isVisible","drop","ref","element","style","width","maxWidth","height","position","top","zIndex"],"sources":["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"],"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,mDAAmD,EACnDG,IAAI,GAAG,sBAAsB,GAAG,oBACpC;AAAE,gBAEFL,KAAA,CAAAO,aAAA;EACIC,SAAS,EAAEN,EAAE,CACT,yDAAyD,EACzDE,MAAM,GAAG,uBAAuB,GAAG,wBAAwB,EAC3DC,IAAI,GAAG,WAAW,GAAG,UAAU,EAC/BC,UAAU,IAAI,OAClB;AAAE,gBAEFN,KAAA,CAAAO,aAAA;EACIC,SAAS,EAAEN,EAAE,CACT,0BAA0B,EAC1BE,MAAM,GAAG,kBAAkB,GAAG,kBAClC;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,EAAEC,OAAO,IAAI;MACZF,IAAI,CAACE,OAAO,CAAC;IACjB,CAAE;IACFC,KAAK,EAAE;MACH;MACAC,KAAK,EAAE,KAAK;MACZC,QAAQ,EAAE,OAAO;MACjBC,MAAM,EAAE,MAAM;MACdC,QAAQ,EAAE,UAAU;MACpBC,GAAG,EAAE,CAAC;MACN,CAAChB,IAAI,GAAG,OAAO,GAAG,MAAM,GAAG,CAAC;MAC5BiB,MAAM,EAAEhB,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":[]}
+{"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.js

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