@webiny/app-admin 5.42.2-beta.0 → 5.42.2-beta.1

package/components/BulkActions/useDialogWithReport/DialogMessage.js

@@ -25,7 +25,11 @@ var ResultDialogMessage = exports.ResultDialogMessage = function ResultDialogMes
       status: result.status
     }, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
       icon: result.status === "success" ? /*#__PURE__*/_react.default.createElement(_check_circle.ReactComponent, null) : /*#__PURE__*/_react.default.createElement(_error.ReactComponent, null)
-    })), /*#__PURE__*/_react.default.createElement(_List.ListItemText, null, /*#__PURE__*/_react.default.createElement(_List.ListItemTextPrimary, null, result.title), /*#__PURE__*/_react.default.createElement(_List.ListItemTextSecondary, null, result.message)));
+    })), /*#__PURE__*/_react.default.createElement(_List.ListItemText, null, /*#__PURE__*/_react.default.createElement(_List.ListItemTextPrimary, null, result.title), /*#__PURE__*/_react.default.createElement(_List.ListItemTextSecondary, null, /*#__PURE__*/_react.default.createElement("span", {
+      dangerouslySetInnerHTML: {
+        __html: "".concat(result.message)
+      }
+    }))));
   })));
 };
 

package/components/BulkActions/useDialogWithReport/DialogMessage.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_error","_check_circle","_Icon","_List","_useDialogWithReport","ResultDialogMessage","exports","_ref","results","message","default","createElement","Fragment","MessageContainer","List","nonInteractive","twoLine","map","result","index","ListItem","key","concat","ripple","ListItemGraphic","status","Icon","icon","ReactComponent","ListItemText","ListItemTextPrimary","title","ListItemTextSecondary"],"sources":["DialogMessage.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as ErrorIcon } from \"@material-design-icons/svg/round/error.svg\";\nimport { ReactComponent as SuccessIcon } from \"@material-design-icons/svg/round/check_circle.svg\";\nimport { Icon } from \"@webiny/ui/Icon\";\nimport { List, ListItemText, ListItemTextPrimary, ListItemTextSecondary } from \"@webiny/ui/List\";\nimport { ShowResultsDialogParams } from \"./index\";\n\nimport { ListItem, ListItemGraphic, MessageContainer } from \"./useDialogWithReport.styled\";\n\ntype ResultDialogMessageProps = Pick<ShowResultsDialogParams, \"results\" | \"message\">;\n\nexport const ResultDialogMessage = ({ results, message }: ResultDialogMessageProps) => {\n    return (\n        <>\n            {message && <MessageContainer>{message}</MessageContainer>}\n            <List nonInteractive={true} twoLine={true}>\n                {results.map((result, index) => (\n                    <ListItem key={`item-${index}`} ripple={false}>\n                        <ListItemGraphic status={result.status}>\n                            <Icon\n                                icon={result.status === \"success\" ? <SuccessIcon /> : <ErrorIcon />}\n                            />\n                        </ListItemGraphic>\n                        <ListItemText>\n                            <ListItemTextPrimary>{result.title}</ListItemTextPrimary>\n                            <ListItemTextSecondary>{result.message}</ListItemTextSecondary>\n                        </ListItemText>\n                    </ListItem>\n                ))}\n            </List>\n        </>\n    );\n};\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,aAAA,GAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AACA,IAAAI,KAAA,GAAAJ,OAAA;AAGA,IAAAK,oBAAA,GAAAL,OAAA;AAIO,IAAMM,mBAAmB,GAAAC,OAAA,CAAAD,mBAAA,GAAG,SAAtBA,mBAAmBA,CAAAE,IAAA,EAAuD;EAAA,IAAjDC,OAAO,GAAAD,IAAA,CAAPC,OAAO;IAAEC,OAAO,GAAAF,IAAA,CAAPE,OAAO;EAClD,oBACIZ,MAAA,CAAAa,OAAA,CAAAC,aAAA,CAAAd,MAAA,CAAAa,OAAA,CAAAE,QAAA,QACKH,OAAO,iBAAIZ,MAAA,CAAAa,OAAA,CAAAC,aAAA,CAACP,oBAAA,CAAAS,gBAAgB,QAAEJ,OAA0B,CAAC,eAC1DZ,MAAA,CAAAa,OAAA,CAAAC,aAAA,CAACR,KAAA,CAAAW,IAAI;IAACC,cAAc,EAAE,IAAK;IAACC,OAAO,EAAE;EAAK,GACrCR,OAAO,CAACS,GAAG,CAAC,UAACC,MAAM,EAAEC,KAAK;IAAA,oBACvBtB,MAAA,CAAAa,OAAA,CAAAC,aAAA,CAACP,oBAAA,CAAAgB,QAAQ;MAACC,GAAG,UAAAC,MAAA,CAAUH,KAAK,CAAG;MAACI,MAAM,EAAE;IAAM,gBAC1C1B,MAAA,CAAAa,OAAA,CAAAC,aAAA,CAACP,oBAAA,CAAAoB,eAAe;MAACC,MAAM,EAAEP,MAAM,CAACO;IAAO,gBACnC5B,MAAA,CAAAa,OAAA,CAAAC,aAAA,CAACT,KAAA,CAAAwB,IAAI;MACDC,IAAI,EAAET,MAAM,CAACO,MAAM,KAAK,SAAS,gBAAG5B,MAAA,CAAAa,OAAA,CAAAC,aAAA,CAACV,aAAA,CAAA2B,cAAW,MAAE,CAAC,gBAAG/B,MAAA,CAAAa,OAAA,CAAAC,aAAA,CAACX,MAAA,CAAA4B,cAAS,MAAE;IAAE,CACvE,CACY,CAAC,eAClB/B,MAAA,CAAAa,OAAA,CAAAC,aAAA,CAACR,KAAA,CAAA0B,YAAY,qBACThC,MAAA,CAAAa,OAAA,CAAAC,aAAA,CAACR,KAAA,CAAA2B,mBAAmB,QAAEZ,MAAM,CAACa,KAA2B,CAAC,eACzDlC,MAAA,CAAAa,OAAA,CAAAC,aAAA,CAACR,KAAA,CAAA6B,qBAAqB,QAAEd,MAAM,CAACT,OAA+B,CACpD,CACR,CAAC;EAAA,CACd,CACC,CACR,CAAC;AAEX,CAAC","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_error","_check_circle","_Icon","_List","_useDialogWithReport","ResultDialogMessage","exports","_ref","results","message","default","createElement","Fragment","MessageContainer","List","nonInteractive","twoLine","map","result","index","ListItem","key","concat","ripple","ListItemGraphic","status","Icon","icon","ReactComponent","ListItemText","ListItemTextPrimary","title","ListItemTextSecondary","dangerouslySetInnerHTML","__html"],"sources":["DialogMessage.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as ErrorIcon } from \"@material-design-icons/svg/round/error.svg\";\nimport { ReactComponent as SuccessIcon } from \"@material-design-icons/svg/round/check_circle.svg\";\nimport { Icon } from \"@webiny/ui/Icon\";\nimport { List, ListItemText, ListItemTextPrimary, ListItemTextSecondary } from \"@webiny/ui/List\";\nimport { ShowResultsDialogParams } from \"./index\";\n\nimport { ListItem, ListItemGraphic, MessageContainer } from \"./useDialogWithReport.styled\";\n\ntype ResultDialogMessageProps = Pick<ShowResultsDialogParams, \"results\" | \"message\">;\n\nexport const ResultDialogMessage = ({ results, message }: ResultDialogMessageProps) => {\n    return (\n        <>\n            {message && <MessageContainer>{message}</MessageContainer>}\n            <List nonInteractive={true} twoLine={true}>\n                {results.map((result, index) => (\n                    <ListItem key={`item-${index}`} ripple={false}>\n                        <ListItemGraphic status={result.status}>\n                            <Icon\n                                icon={result.status === \"success\" ? <SuccessIcon /> : <ErrorIcon />}\n                            />\n                        </ListItemGraphic>\n                        <ListItemText>\n                            <ListItemTextPrimary>{result.title}</ListItemTextPrimary>\n                            <ListItemTextSecondary>\n                                <span\n                                    dangerouslySetInnerHTML={{\n                                        __html: `${result.message}`\n                                    }}\n                                ></span>\n                            </ListItemTextSecondary>\n                        </ListItemText>\n                    </ListItem>\n                ))}\n            </List>\n        </>\n    );\n};\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,aAAA,GAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AACA,IAAAI,KAAA,GAAAJ,OAAA;AAGA,IAAAK,oBAAA,GAAAL,OAAA;AAIO,IAAMM,mBAAmB,GAAAC,OAAA,CAAAD,mBAAA,GAAG,SAAtBA,mBAAmBA,CAAAE,IAAA,EAAuD;EAAA,IAAjDC,OAAO,GAAAD,IAAA,CAAPC,OAAO;IAAEC,OAAO,GAAAF,IAAA,CAAPE,OAAO;EAClD,oBACIZ,MAAA,CAAAa,OAAA,CAAAC,aAAA,CAAAd,MAAA,CAAAa,OAAA,CAAAE,QAAA,QACKH,OAAO,iBAAIZ,MAAA,CAAAa,OAAA,CAAAC,aAAA,CAACP,oBAAA,CAAAS,gBAAgB,QAAEJ,OAA0B,CAAC,eAC1DZ,MAAA,CAAAa,OAAA,CAAAC,aAAA,CAACR,KAAA,CAAAW,IAAI;IAACC,cAAc,EAAE,IAAK;IAACC,OAAO,EAAE;EAAK,GACrCR,OAAO,CAACS,GAAG,CAAC,UAACC,MAAM,EAAEC,KAAK;IAAA,oBACvBtB,MAAA,CAAAa,OAAA,CAAAC,aAAA,CAACP,oBAAA,CAAAgB,QAAQ;MAACC,GAAG,UAAAC,MAAA,CAAUH,KAAK,CAAG;MAACI,MAAM,EAAE;IAAM,gBAC1C1B,MAAA,CAAAa,OAAA,CAAAC,aAAA,CAACP,oBAAA,CAAAoB,eAAe;MAACC,MAAM,EAAEP,MAAM,CAACO;IAAO,gBACnC5B,MAAA,CAAAa,OAAA,CAAAC,aAAA,CAACT,KAAA,CAAAwB,IAAI;MACDC,IAAI,EAAET,MAAM,CAACO,MAAM,KAAK,SAAS,gBAAG5B,MAAA,CAAAa,OAAA,CAAAC,aAAA,CAACV,aAAA,CAAA2B,cAAW,MAAE,CAAC,gBAAG/B,MAAA,CAAAa,OAAA,CAAAC,aAAA,CAACX,MAAA,CAAA4B,cAAS,MAAE;IAAE,CACvE,CACY,CAAC,eAClB/B,MAAA,CAAAa,OAAA,CAAAC,aAAA,CAACR,KAAA,CAAA0B,YAAY,qBACThC,MAAA,CAAAa,OAAA,CAAAC,aAAA,CAACR,KAAA,CAAA2B,mBAAmB,QAAEZ,MAAM,CAACa,KAA2B,CAAC,eACzDlC,MAAA,CAAAa,OAAA,CAAAC,aAAA,CAACR,KAAA,CAAA6B,qBAAqB,qBAClBnC,MAAA,CAAAa,OAAA,CAAAC,aAAA;MACIsB,uBAAuB,EAAE;QACrBC,MAAM,KAAAZ,MAAA,CAAKJ,MAAM,CAACT,OAAO;MAC7B;IAAE,CACC,CACY,CACb,CACR,CAAC;EAAA,CACd,CACC,CACR,CAAC;AAEX,CAAC","ignoreList":[]}

package/components/FloatingPanel.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+export interface FloatingPanelRenderProp {
+    (params: {
+        height: number;
+        width: number;
+    }): React.ReactNode;
+}
+export interface FloatingPanelProps {
+    shortcut: string;
+    dragHandle: string;
+    children: FloatingPanelRenderProp;
+}
+export declare const FloatingPanel: ({ dragHandle, shortcut, children }: FloatingPanelProps) => React.ReactPortal;

package/components/FloatingPanel.js

@@ -0,0 +1,120 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FloatingPanel = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _base = _interopRequireDefault(require("@emotion/styled/base"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactDom = require("react-dom");
+var _reactDraggable = _interopRequireDefault(require("react-draggable"));
+var _reactResizable = require("react-resizable");
+var _Elevation = require("@webiny/ui/Elevation");
+var _hooks = require("../hooks");
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+var PanelRoot = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "production" ? {
+  target: "e4wugyk1"
+} : {
+  target: "e4wugyk1",
+  label: "PanelRoot"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1a2cm7e",
+  styles: "position:fixed;top:0;left:0;z-index:100000;width:0;height:0"
+} : {
+  name: "1a2cm7e",
+  styles: "position:fixed;top:0;left:0;z-index:100000;width:0;height:0",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkZsb2F0aW5nUGFuZWwudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVE0QiIsImZpbGUiOiJGbG9hdGluZ1BhbmVsLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyB1c2VFZmZlY3QsIHVzZVN0YXRlIH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgeyBjcmVhdGVQb3J0YWwgfSBmcm9tIFwicmVhY3QtZG9tXCI7XG5pbXBvcnQgRHJhZ2dhYmxlLCB7IHR5cGUgRHJhZ2dhYmxlRXZlbnRIYW5kbGVyIH0gZnJvbSBcInJlYWN0LWRyYWdnYWJsZVwiO1xuaW1wb3J0IHsgUmVzaXphYmxlLCBSZXNpemFibGVQcm9wcyB9IGZyb20gXCJyZWFjdC1yZXNpemFibGVcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgRWxldmF0aW9uIH0gZnJvbSBcIkB3ZWJpbnkvdWkvRWxldmF0aW9uXCI7XG5pbXBvcnQgeyB1c2VLZXlIYW5kbGVyIH0gZnJvbSBcIn4vaG9va3NcIjtcblxuY29uc3QgUGFuZWxSb290ID0gc3R5bGVkLmRpdmBcbiAgICBwb3NpdGlvbjogZml4ZWQ7XG4gICAgdG9wOiAwO1xuICAgIGxlZnQ6IDA7XG4gICAgei1pbmRleDogMTAwMDAwO1xuICAgIHdpZHRoOiAwO1xuICAgIGhlaWdodDogMDtcbmA7XG5cbmNvbnN0IFJlc2l6ZUhhbmRsZSA9IHN0eWxlZC5kaXZgXG4gICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgIHdpZHRoOiAyMHB4O1xuICAgIGhlaWdodDogMjBweDtcbiAgICBib3R0b206IDA7XG4gICAgcmlnaHQ6IDA7XG4gICAgcGFkZGluZzogMCAzcHggM3B4IDA7XG4gICAgYmFja2dyb3VuZDogdXJsKFwiZGF0YTppbWFnZS9zdmcreG1sO2Jhc2U2NCxQRDk0Yld3Z2RtVnljMmx2YmowaU1TNHdJaUJ6ZEdGdVpHRnNiMjVsUFNKdWJ5SS9QZzA4SVMwdElFZGxibVZ5WVhSdmNqb2dRV1J2WW1VZ1JtbHlaWGR2Y210eklFTlROaXdnUlhod2IzSjBJRk5XUnlCRmVIUmxibk5wYjI0Z1lua2dRV0Z5YjI0Z1FtVmhiR3dnS0doMGRIQTZMeTltYVhKbGQyOXlhM011WVdKbFlXeHNMbU52YlNrZ0xpQldaWEp6YVc5dU9pQXdMall1TVNBZ0xTMCtEVHdoUkU5RFZGbFFSU0J6ZG1jZ1VGVkNURWxESUNJdEx5OVhNME12TDBSVVJDQlRWa2NnTVM0eEx5OUZUaUlnSW1oMGRIQTZMeTkzZDNjdWR6TXViM0puTDBkeVlYQm9hV056TDFOV1J5OHhMakV2UkZSRUwzTjJaekV4TG1SMFpDSStEVHh6ZG1jZ2FXUTlJbFZ1ZEdsMGJHVmtMVkJoWjJVbE1qQXhJaUIyYVdWM1FtOTRQU0l3SURBZ05pQTJJaUJ6ZEhsc1pUMGlZbUZqYTJkeWIzVnVaQzFqYjJ4dmNqb2pabVptWm1abU1EQWlJSFpsY25OcGIyNDlJakV1TVNJTkNYaHRiRzV6UFNKb2RIUndPaTh2ZDNkM0xuY3pMbTl5Wnk4eU1EQXdMM04yWnlJZ2VHMXNibk02ZUd4cGJtczlJbWgwZEhBNkx5OTNkM2N1ZHpNdWIzSm5MekU1T1RrdmVHeHBibXNpSUhodGJEcHpjR0ZqWlQwaWNISmxjMlZ5ZG1VaURRbDRQU0l3Y0hnaUlIazlJakJ3ZUNJZ2QybGtkR2c5SWpad2VDSWdhR1ZwWjJoMFBTSTJjSGdpRFQ0TkNUeG5JRzl3WVdOcGRIazlJakF1TXpBeUlqNE5DUWs4Y0dGMGFDQmtQU0pOSURZZ05pQk1JREFnTmlCTUlEQWdOQzR5SUV3Z05DQTBMaklnVENBMExqSWdOQzR5SUV3Z05DNHlJREFnVENBMklEQWdUQ0EySURZZ1RDQTJJRFlnV2lJZ1ptbHNiRDBpSXpBd01EQXdNQ0l2UGcwSlBDOW5QZzA4TDNOMlp6ND1cIilcbiAgICAgICAgbm8tcmVwZWF0IGJvdHRvbSByaWdodDtcbiAgICBiYWNrZ3JvdW5kLW9yaWdpbjogY29udGVudC1ib3g7XG4gICAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgICBjdXJzb3I6IHNlLXJlc2l6ZTtcbmA7XG5cbmV4cG9ydCBpbnRlcmZhY2UgRmxvYXRpbmdQYW5lbFJlbmRlclByb3Age1xuICAgIChwYXJhbXM6IHsgaGVpZ2h0OiBudW1iZXI7IHdpZHRoOiBudW1iZXIgfSk6IFJlYWN0LlJlYWN0Tm9kZTtcbn1cblxuZXhwb3J0IGludGVyZmFjZSBGbG9hdGluZ1BhbmVsUHJvcHMge1xuICAgIHNob3J0Y3V0OiBzdHJpbmc7XG4gICAgZHJhZ0hhbmRsZTogc3RyaW5nO1xuICAgIGNoaWxkcmVuOiBGbG9hdGluZ1BhbmVsUmVuZGVyUHJvcDtcbn1cblxuZXhwb3J0IGNvbnN0IEZsb2F0aW5nUGFuZWwgPSAoeyBkcmFnSGFuZGxlLCBzaG9ydGN1dCwgY2hpbGRyZW4gfTogRmxvYXRpbmdQYW5lbFByb3BzKSA9PiB7XG4gICAgY29uc3QgW2lzVmlzaWJsZSwgc2V0SXNWaXNpYmxlXSA9IHVzZVN0YXRlKGZhbHNlKTtcbiAgICBjb25zdCBbc2l6ZSwgc2V0U2l6ZV0gPSB1c2VTdGF0ZSh7IHdpZHRoOiA3MDAsIGhlaWdodDogNjAwIH0pO1xuICAgIGNvbnN0IFtwb3NpdGlvbiwgc2V0UG9zaXRpb25dID0gdXNlU3RhdGUoeyB4OiAxMDAsIHk6IDEwMCB9KTtcbiAgICBjb25zdCB7IGFkZEtleUhhbmRsZXIsIHJlbW92ZUtleUhhbmRsZXIgfSA9IHVzZUtleUhhbmRsZXIoKTtcblxuICAgIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgICAgIGFkZEtleUhhbmRsZXIoc2hvcnRjdXQsIGUgPT4ge1xuICAgICAgICAgICAgZS5wcmV2ZW50RGVmYXVsdCgpO1xuICAgICAgICAgICAgc2V0SXNWaXNpYmxlKGlzVmlzaWJsZSA9PiAhaXNWaXNpYmxlKTtcbiAgICAgICAgfSk7XG5cbiAgICAgICAgcmV0dXJuICgpID0+IHJlbW92ZUtleUhhbmRsZXIoc2hvcnRjdXQpO1xuICAgIH0sIFtzZXRJc1Zpc2libGVdKTtcblxuICAgIGNvbnN0IG9uRHJhZ1N0b3A6IERyYWdnYWJsZUV2ZW50SGFuZGxlciA9IChfLCBkYXRhKSA9PiB7XG4gICAgICAgIHNldFBvc2l0aW9uKHsgeDogZGF0YS54LCB5OiBkYXRhLnkgfSk7XG4gICAgfTtcblxuICAgIGNvbnN0IG9uUmVzaXplOiBSZXNpemFibGVQcm9wc1tcIm9uUmVzaXplXCJdID0gKF8sIHsgc2l6ZSB9KSA9PiB7XG4gICAgICAgIHNldFNpemUoeyB3aWR0aDogc2l6ZS53aWR0aCwgaGVpZ2h0OiBzaXplLmhlaWdodCB9KTtcbiAgICB9O1xuXG4gICAgcmV0dXJuIGNyZWF0ZVBvcnRhbChcbiAgICAgICAgPFBhbmVsUm9vdD5cbiAgICAgICAgICAgIDxEcmFnZ2FibGUgaGFuZGxlPXtkcmFnSGFuZGxlfSBvblN0b3A9e29uRHJhZ1N0b3B9IHBvc2l0aW9uPXtwb3NpdGlvbn0+XG4gICAgICAgICAgICAgICAgPFJlc2l6YWJsZVxuICAgICAgICAgICAgICAgICAgICB3aWR0aD17c2l6ZS53aWR0aH1cbiAgICAgICAgICAgICAgICAgICAgaGVpZ2h0PXtzaXplLmhlaWdodH1cbiAgICAgICAgICAgICAgICAgICAgb25SZXNpemU9e29uUmVzaXplfVxuICAgICAgICAgICAgICAgICAgICBoYW5kbGU9ezxSZXNpemVIYW5kbGUgLz59XG4gICAgICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgICAgICA8ZGl2XG4gICAgICAgICAgICAgICAgICAgICAgICBzdHlsZT17e1xuICAgICAgICAgICAgICAgICAgICAgICAgICAgIGJvcmRlcjogXCIycHggc29saWQgdmFyKC0tbWRjLXRoZW1lLXByaW1hcnkpXCIsXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgZGlzcGxheTogaXNWaXNpYmxlID8gXCJibG9ja1wiIDogXCJub25lXCIsXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgcG9zaXRpb246IFwicmVsYXRpdmVcIixcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICB3aWR0aDogc2l6ZS53aWR0aCArIFwicHhcIixcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICBoZWlnaHQ6IHNpemUuaGVpZ2h0ICsgXCJweFwiXG4gICAgICAgICAgICAgICAgICAgICAgICB9fVxuICAgICAgICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgICAgICAgICA8RWxldmF0aW9uIHo9ezV9IHN0eWxlPXt7IGhlaWdodDogXCJpbmhlcml0XCIgfX0+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAge2NoaWxkcmVuKHNpemUpfVxuICAgICAgICAgICAgICAgICAgICAgICAgPC9FbGV2YXRpb24+XG4gICAgICAgICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgICAgIDwvUmVzaXphYmxlPlxuICAgICAgICAgICAgPC9EcmFnZ2FibGU+XG4gICAgICAgIDwvUGFuZWxSb290PixcbiAgICAgICAgZG9jdW1lbnQuYm9keVxuICAgICk7XG59O1xuIl19 */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var ResizeHandle = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "production" ? {
+  target: "e4wugyk0"
+} : {
+  target: "e4wugyk0",
+  label: "ResizeHandle"
+})(process.env.NODE_ENV === "production" ? {
+  name: "oq4jmq",
+  styles: "position:absolute;width:20px;height:20px;bottom:0;right:0;padding:0 3px 3px 0;background:url(\"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pg08IS0tIEdlbmVyYXRvcjogQWRvYmUgRmlyZXdvcmtzIENTNiwgRXhwb3J0IFNWRyBFeHRlbnNpb24gYnkgQWFyb24gQmVhbGwgKGh0dHA6Ly9maXJld29ya3MuYWJlYWxsLmNvbSkgLiBWZXJzaW9uOiAwLjYuMSAgLS0+DTwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DTxzdmcgaWQ9IlVudGl0bGVkLVBhZ2UlMjAxIiB2aWV3Qm94PSIwIDAgNiA2IiBzdHlsZT0iYmFja2dyb3VuZC1jb2xvcjojZmZmZmZmMDAiIHZlcnNpb249IjEuMSINCXhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiDQl4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjZweCIgaGVpZ2h0PSI2cHgiDT4NCTxnIG9wYWNpdHk9IjAuMzAyIj4NCQk8cGF0aCBkPSJNIDYgNiBMIDAgNiBMIDAgNC4yIEwgNCA0LjIgTCA0LjIgNC4yIEwgNC4yIDAgTCA2IDAgTCA2IDYgTCA2IDYgWiIgZmlsbD0iIzAwMDAwMCIvPg0JPC9nPg08L3N2Zz4=\") no-repeat bottom right;background-origin:content-box;box-sizing:border-box;cursor:se-resize"
+} : {
+  name: "oq4jmq",
+  styles: "position:absolute;width:20px;height:20px;bottom:0;right:0;padding:0 3px 3px 0;background:url(\"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pg08IS0tIEdlbmVyYXRvcjogQWRvYmUgRmlyZXdvcmtzIENTNiwgRXhwb3J0IFNWRyBFeHRlbnNpb24gYnkgQWFyb24gQmVhbGwgKGh0dHA6Ly9maXJld29ya3MuYWJlYWxsLmNvbSkgLiBWZXJzaW9uOiAwLjYuMSAgLS0+DTwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DTxzdmcgaWQ9IlVudGl0bGVkLVBhZ2UlMjAxIiB2aWV3Qm94PSIwIDAgNiA2IiBzdHlsZT0iYmFja2dyb3VuZC1jb2xvcjojZmZmZmZmMDAiIHZlcnNpb249IjEuMSINCXhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiDQl4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjZweCIgaGVpZ2h0PSI2cHgiDT4NCTxnIG9wYWNpdHk9IjAuMzAyIj4NCQk8cGF0aCBkPSJNIDYgNiBMIDAgNiBMIDAgNC4yIEwgNCA0LjIgTCA0LjIgNC4yIEwgNC4yIDAgTCA2IDAgTCA2IDYgTCA2IDYgWiIgZmlsbD0iIzAwMDAwMCIvPg0JPC9nPg08L3N2Zz4=\") no-repeat bottom right;background-origin:content-box;box-sizing:border-box;cursor:se-resize",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkZsb2F0aW5nUGFuZWwudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWlCK0IiLCJmaWxlIjoiRmxvYXRpbmdQYW5lbC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHsgdXNlRWZmZWN0LCB1c2VTdGF0ZSB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHsgY3JlYXRlUG9ydGFsIH0gZnJvbSBcInJlYWN0LWRvbVwiO1xuaW1wb3J0IERyYWdnYWJsZSwgeyB0eXBlIERyYWdnYWJsZUV2ZW50SGFuZGxlciB9IGZyb20gXCJyZWFjdC1kcmFnZ2FibGVcIjtcbmltcG9ydCB7IFJlc2l6YWJsZSwgUmVzaXphYmxlUHJvcHMgfSBmcm9tIFwicmVhY3QtcmVzaXphYmxlXCI7XG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IEVsZXZhdGlvbiB9IGZyb20gXCJAd2ViaW55L3VpL0VsZXZhdGlvblwiO1xuaW1wb3J0IHsgdXNlS2V5SGFuZGxlciB9IGZyb20gXCJ+L2hvb2tzXCI7XG5cbmNvbnN0IFBhbmVsUm9vdCA9IHN0eWxlZC5kaXZgXG4gICAgcG9zaXRpb246IGZpeGVkO1xuICAgIHRvcDogMDtcbiAgICBsZWZ0OiAwO1xuICAgIHotaW5kZXg6IDEwMDAwMDtcbiAgICB3aWR0aDogMDtcbiAgICBoZWlnaHQ6IDA7XG5gO1xuXG5jb25zdCBSZXNpemVIYW5kbGUgPSBzdHlsZWQuZGl2YFxuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICB3aWR0aDogMjBweDtcbiAgICBoZWlnaHQ6IDIwcHg7XG4gICAgYm90dG9tOiAwO1xuICAgIHJpZ2h0OiAwO1xuICAgIHBhZGRpbmc6IDAgM3B4IDNweCAwO1xuICAgIGJhY2tncm91bmQ6IHVybChcImRhdGE6aW1hZ2Uvc3ZnK3htbDtiYXNlNjQsUEQ5NGJXd2dkbVZ5YzJsdmJqMGlNUzR3SWlCemRHRnVaR0ZzYjI1bFBTSnVieUkvUGcwOElTMHRJRWRsYm1WeVlYUnZjam9nUVdSdlltVWdSbWx5WlhkdmNtdHpJRU5UTml3Z1JYaHdiM0owSUZOV1J5QkZlSFJsYm5OcGIyNGdZbmtnUVdGeWIyNGdRbVZoYkd3Z0tHaDBkSEE2THk5bWFYSmxkMjl5YTNNdVlXSmxZV3hzTG1OdmJTa2dMaUJXWlhKemFXOXVPaUF3TGpZdU1TQWdMUzArRFR3aFJFOURWRmxRUlNCemRtY2dVRlZDVEVsRElDSXRMeTlYTTBNdkwwUlVSQ0JUVmtjZ01TNHhMeTlGVGlJZ0ltaDBkSEE2THk5M2QzY3Vkek11YjNKbkwwZHlZWEJvYVdOekwxTldSeTh4TGpFdlJGUkVMM04yWnpFeExtUjBaQ0krRFR4emRtY2dhV1E5SWxWdWRHbDBiR1ZrTFZCaFoyVWxNakF4SWlCMmFXVjNRbTk0UFNJd0lEQWdOaUEySWlCemRIbHNaVDBpWW1GamEyZHliM1Z1WkMxamIyeHZjam9qWm1abVptWm1NREFpSUhabGNuTnBiMjQ5SWpFdU1TSU5DWGh0Ykc1elBTSm9kSFJ3T2k4dmQzZDNMbmN6TG05eVp5OHlNREF3TDNOMlp5SWdlRzFzYm5NNmVHeHBibXM5SW1oMGRIQTZMeTkzZDNjdWR6TXViM0puTHpFNU9Ua3ZlR3hwYm1zaUlIaHRiRHB6Y0dGalpUMGljSEpsYzJWeWRtVWlEUWw0UFNJd2NIZ2lJSGs5SWpCd2VDSWdkMmxrZEdnOUlqWndlQ0lnYUdWcFoyaDBQU0kyY0hnaURUNE5DVHhuSUc5d1lXTnBkSGs5SWpBdU16QXlJajROQ1FrOGNHRjBhQ0JrUFNKTklEWWdOaUJNSURBZ05pQk1JREFnTkM0eUlFd2dOQ0EwTGpJZ1RDQTBMaklnTkM0eUlFd2dOQzR5SURBZ1RDQTJJREFnVENBMklEWWdUQ0EySURZZ1dpSWdabWxzYkQwaUl6QXdNREF3TUNJdlBnMEpQQzluUGcwOEwzTjJaejQ9XCIpXG4gICAgICAgIG5vLXJlcGVhdCBib3R0b20gcmlnaHQ7XG4gICAgYmFja2dyb3VuZC1vcmlnaW46IGNvbnRlbnQtYm94O1xuICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gICAgY3Vyc29yOiBzZS1yZXNpemU7XG5gO1xuXG5leHBvcnQgaW50ZXJmYWNlIEZsb2F0aW5nUGFuZWxSZW5kZXJQcm9wIHtcbiAgICAocGFyYW1zOiB7IGhlaWdodDogbnVtYmVyOyB3aWR0aDogbnVtYmVyIH0pOiBSZWFjdC5SZWFjdE5vZGU7XG59XG5cbmV4cG9ydCBpbnRlcmZhY2UgRmxvYXRpbmdQYW5lbFByb3BzIHtcbiAgICBzaG9ydGN1dDogc3RyaW5nO1xuICAgIGRyYWdIYW5kbGU6IHN0cmluZztcbiAgICBjaGlsZHJlbjogRmxvYXRpbmdQYW5lbFJlbmRlclByb3A7XG59XG5cbmV4cG9ydCBjb25zdCBGbG9hdGluZ1BhbmVsID0gKHsgZHJhZ0hhbmRsZSwgc2hvcnRjdXQsIGNoaWxkcmVuIH06IEZsb2F0aW5nUGFuZWxQcm9wcykgPT4ge1xuICAgIGNvbnN0IFtpc1Zpc2libGUsIHNldElzVmlzaWJsZV0gPSB1c2VTdGF0ZShmYWxzZSk7XG4gICAgY29uc3QgW3NpemUsIHNldFNpemVdID0gdXNlU3RhdGUoeyB3aWR0aDogNzAwLCBoZWlnaHQ6IDYwMCB9KTtcbiAgICBjb25zdCBbcG9zaXRpb24sIHNldFBvc2l0aW9uXSA9IHVzZVN0YXRlKHsgeDogMTAwLCB5OiAxMDAgfSk7XG4gICAgY29uc3QgeyBhZGRLZXlIYW5kbGVyLCByZW1vdmVLZXlIYW5kbGVyIH0gPSB1c2VLZXlIYW5kbGVyKCk7XG5cbiAgICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgICAgICBhZGRLZXlIYW5kbGVyKHNob3J0Y3V0LCBlID0+IHtcbiAgICAgICAgICAgIGUucHJldmVudERlZmF1bHQoKTtcbiAgICAgICAgICAgIHNldElzVmlzaWJsZShpc1Zpc2libGUgPT4gIWlzVmlzaWJsZSk7XG4gICAgICAgIH0pO1xuXG4gICAgICAgIHJldHVybiAoKSA9PiByZW1vdmVLZXlIYW5kbGVyKHNob3J0Y3V0KTtcbiAgICB9LCBbc2V0SXNWaXNpYmxlXSk7XG5cbiAgICBjb25zdCBvbkRyYWdTdG9wOiBEcmFnZ2FibGVFdmVudEhhbmRsZXIgPSAoXywgZGF0YSkgPT4ge1xuICAgICAgICBzZXRQb3NpdGlvbih7IHg6IGRhdGEueCwgeTogZGF0YS55IH0pO1xuICAgIH07XG5cbiAgICBjb25zdCBvblJlc2l6ZTogUmVzaXphYmxlUHJvcHNbXCJvblJlc2l6ZVwiXSA9IChfLCB7IHNpemUgfSkgPT4ge1xuICAgICAgICBzZXRTaXplKHsgd2lkdGg6IHNpemUud2lkdGgsIGhlaWdodDogc2l6ZS5oZWlnaHQgfSk7XG4gICAgfTtcblxuICAgIHJldHVybiBjcmVhdGVQb3J0YWwoXG4gICAgICAgIDxQYW5lbFJvb3Q+XG4gICAgICAgICAgICA8RHJhZ2dhYmxlIGhhbmRsZT17ZHJhZ0hhbmRsZX0gb25TdG9wPXtvbkRyYWdTdG9wfSBwb3NpdGlvbj17cG9zaXRpb259PlxuICAgICAgICAgICAgICAgIDxSZXNpemFibGVcbiAgICAgICAgICAgICAgICAgICAgd2lkdGg9e3NpemUud2lkdGh9XG4gICAgICAgICAgICAgICAgICAgIGhlaWdodD17c2l6ZS5oZWlnaHR9XG4gICAgICAgICAgICAgICAgICAgIG9uUmVzaXplPXtvblJlc2l6ZX1cbiAgICAgICAgICAgICAgICAgICAgaGFuZGxlPXs8UmVzaXplSGFuZGxlIC8+fVxuICAgICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICAgICAgPGRpdlxuICAgICAgICAgICAgICAgICAgICAgICAgc3R5bGU9e3tcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICBib3JkZXI6IFwiMnB4IHNvbGlkIHZhcigtLW1kYy10aGVtZS1wcmltYXJ5KVwiLFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIGRpc3BsYXk6IGlzVmlzaWJsZSA/IFwiYmxvY2tcIiA6IFwibm9uZVwiLFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIHBvc2l0aW9uOiBcInJlbGF0aXZlXCIsXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgd2lkdGg6IHNpemUud2lkdGggKyBcInB4XCIsXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgaGVpZ2h0OiBzaXplLmhlaWdodCArIFwicHhcIlxuICAgICAgICAgICAgICAgICAgICAgICAgfX1cbiAgICAgICAgICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgICAgICAgICAgPEVsZXZhdGlvbiB6PXs1fSBzdHlsZT17eyBoZWlnaHQ6IFwiaW5oZXJpdFwiIH19PlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIHtjaGlsZHJlbihzaXplKX1cbiAgICAgICAgICAgICAgICAgICAgICAgIDwvRWxldmF0aW9uPlxuICAgICAgICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgICAgICA8L1Jlc2l6YWJsZT5cbiAgICAgICAgICAgIDwvRHJhZ2dhYmxlPlxuICAgICAgICA8L1BhbmVsUm9vdD4sXG4gICAgICAgIGRvY3VtZW50LmJvZHlcbiAgICApO1xufTtcbiJdfQ== */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var FloatingPanel = exports.FloatingPanel = function FloatingPanel(_ref) {
+  var dragHandle = _ref.dragHandle,
+    shortcut = _ref.shortcut,
+    children = _ref.children;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isVisible = _useState2[0],
+    setIsVisible = _useState2[1];
+  var _useState3 = (0, _react.useState)({
+      width: 700,
+      height: 600
+    }),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    size = _useState4[0],
+    setSize = _useState4[1];
+  var _useState5 = (0, _react.useState)({
+      x: 100,
+      y: 100
+    }),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    position = _useState6[0],
+    setPosition = _useState6[1];
+  var _useKeyHandler = (0, _hooks.useKeyHandler)(),
+    addKeyHandler = _useKeyHandler.addKeyHandler,
+    removeKeyHandler = _useKeyHandler.removeKeyHandler;
+  (0, _react.useEffect)(function () {
+    addKeyHandler(shortcut, function (e) {
+      e.preventDefault();
+      setIsVisible(function (isVisible) {
+        return !isVisible;
+      });
+    });
+    return function () {
+      return removeKeyHandler(shortcut);
+    };
+  }, [setIsVisible]);
+  var onDragStop = function onDragStop(_, data) {
+    setPosition({
+      x: data.x,
+      y: data.y
+    });
+  };
+  var onResize = function onResize(_, _ref2) {
+    var size = _ref2.size;
+    setSize({
+      width: size.width,
+      height: size.height
+    });
+  };
+  return /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/_react.default.createElement(PanelRoot, null, /*#__PURE__*/_react.default.createElement(_reactDraggable.default, {
+    handle: dragHandle,
+    onStop: onDragStop,
+    position: position
+  }, /*#__PURE__*/_react.default.createElement(_reactResizable.Resizable, {
+    width: size.width,
+    height: size.height,
+    onResize: onResize,
+    handle: /*#__PURE__*/_react.default.createElement(ResizeHandle, null)
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      border: "2px solid var(--mdc-theme-primary)",
+      display: isVisible ? "block" : "none",
+      position: "relative",
+      width: size.width + "px",
+      height: size.height + "px"
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Elevation.Elevation, {
+    z: 5,
+    style: {
+      height: "inherit"
+    }
+  }, children(size)))))), document.body);
+};
+
+//# sourceMappingURL=FloatingPanel.js.map

package/components/FloatingPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactDom","_reactDraggable","_interopRequireDefault","_reactResizable","_Elevation","_hooks","_EMOTION_STRINGIFIED_CSS_ERROR__","PanelRoot","_base","default","process","env","NODE_ENV","target","label","name","styles","map","toString","ResizeHandle","FloatingPanel","exports","_ref","dragHandle","shortcut","children","_useState","useState","_useState2","_slicedToArray2","isVisible","setIsVisible","_useState3","width","height","_useState4","size","setSize","_useState5","x","y","_useState6","position","setPosition","_useKeyHandler","useKeyHandler","addKeyHandler","removeKeyHandler","useEffect","e","preventDefault","onDragStop","_","data","onResize","_ref2","createPortal","createElement","handle","onStop","Resizable","style","border","display","Elevation","z","document","body"],"sources":["FloatingPanel.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport Draggable, { type DraggableEventHandler } from \"react-draggable\";\nimport { Resizable, ResizableProps } from \"react-resizable\";\nimport styled from \"@emotion/styled\";\nimport { Elevation } from \"@webiny/ui/Elevation\";\nimport { useKeyHandler } from \"~/hooks\";\n\nconst PanelRoot = styled.div`\n    position: fixed;\n    top: 0;\n    left: 0;\n    z-index: 100000;\n    width: 0;\n    height: 0;\n`;\n\nconst ResizeHandle = styled.div`\n    position: absolute;\n    width: 20px;\n    height: 20px;\n    bottom: 0;\n    right: 0;\n    padding: 0 3px 3px 0;\n    background: url(\"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pg08IS0tIEdlbmVyYXRvcjogQWRvYmUgRmlyZXdvcmtzIENTNiwgRXhwb3J0IFNWRyBFeHRlbnNpb24gYnkgQWFyb24gQmVhbGwgKGh0dHA6Ly9maXJld29ya3MuYWJlYWxsLmNvbSkgLiBWZXJzaW9uOiAwLjYuMSAgLS0+DTwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DTxzdmcgaWQ9IlVudGl0bGVkLVBhZ2UlMjAxIiB2aWV3Qm94PSIwIDAgNiA2IiBzdHlsZT0iYmFja2dyb3VuZC1jb2xvcjojZmZmZmZmMDAiIHZlcnNpb249IjEuMSINCXhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiDQl4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjZweCIgaGVpZ2h0PSI2cHgiDT4NCTxnIG9wYWNpdHk9IjAuMzAyIj4NCQk8cGF0aCBkPSJNIDYgNiBMIDAgNiBMIDAgNC4yIEwgNCA0LjIgTCA0LjIgNC4yIEwgNC4yIDAgTCA2IDAgTCA2IDYgTCA2IDYgWiIgZmlsbD0iIzAwMDAwMCIvPg0JPC9nPg08L3N2Zz4=\")\n        no-repeat bottom right;\n    background-origin: content-box;\n    box-sizing: border-box;\n    cursor: se-resize;\n`;\n\nexport interface FloatingPanelRenderProp {\n    (params: { height: number; width: number }): React.ReactNode;\n}\n\nexport interface FloatingPanelProps {\n    shortcut: string;\n    dragHandle: string;\n    children: FloatingPanelRenderProp;\n}\n\nexport const FloatingPanel = ({ dragHandle, shortcut, children }: FloatingPanelProps) => {\n    const [isVisible, setIsVisible] = useState(false);\n    const [size, setSize] = useState({ width: 700, height: 600 });\n    const [position, setPosition] = useState({ x: 100, y: 100 });\n    const { addKeyHandler, removeKeyHandler } = useKeyHandler();\n\n    useEffect(() => {\n        addKeyHandler(shortcut, e => {\n            e.preventDefault();\n            setIsVisible(isVisible => !isVisible);\n        });\n\n        return () => removeKeyHandler(shortcut);\n    }, [setIsVisible]);\n\n    const onDragStop: DraggableEventHandler = (_, data) => {\n        setPosition({ x: data.x, y: data.y });\n    };\n\n    const onResize: ResizableProps[\"onResize\"] = (_, { size }) => {\n        setSize({ width: size.width, height: size.height });\n    };\n\n    return createPortal(\n        <PanelRoot>\n            <Draggable handle={dragHandle} onStop={onDragStop} position={position}>\n                <Resizable\n                    width={size.width}\n                    height={size.height}\n                    onResize={onResize}\n                    handle={<ResizeHandle />}\n                >\n                    <div\n                        style={{\n                            border: \"2px solid var(--mdc-theme-primary)\",\n                            display: isVisible ? \"block\" : \"none\",\n                            position: \"relative\",\n                            width: size.width + \"px\",\n                            height: size.height + \"px\"\n                        }}\n                    >\n                        <Elevation z={5} style={{ height: \"inherit\" }}>\n                            {children(size)}\n                        </Elevation>\n                    </div>\n                </Resizable>\n            </Draggable>\n        </PanelRoot>,\n        document.body\n    );\n};\n"],"mappings":"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","ignoreList":[]}

package/components/StateInspector.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+interface StateInspectorProps {
+    title: string;
+    shortcut: string;
+    state: Record<string, any>;
+}
+export declare const StateInspector: (props: StateInspectorProps) => React.JSX.Element;
+export {};

package/components/StateInspector.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StateInspector = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = _interopRequireDefault(require("@monaco-editor/react"));
+var _Tabs = require("@webiny/ui/Tabs");
+var _ = require("./");
+var monacoTheme = "vs-light";
+var monacoOptions = {
+  minimap: {
+    enabled: false
+  }
+};
+var StateInspector = exports.StateInspector = function StateInspector(props) {
+  return /*#__PURE__*/_react.default.createElement(_.FloatingPanel, {
+    shortcut: props.shortcut,
+    dragHandle: ".mdc-tab-scroller"
+  }, function (_ref) {
+    var height = _ref.height;
+    return /*#__PURE__*/_react.default.createElement(_Tabs.Tabs, null, /*#__PURE__*/_react.default.createElement(_Tabs.Tab, {
+      label: props.title
+    }, /*#__PURE__*/_react.default.createElement(_react2.default, {
+      theme: monacoTheme,
+      height: height - 48,
+      defaultLanguage: "json",
+      value: JSON.stringify(props.state, null, 2),
+      options: monacoOptions
+    })));
+  });
+};
+
+//# sourceMappingURL=StateInspector.js.map

package/components/StateInspector.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_react2","_Tabs","_","monacoTheme","monacoOptions","minimap","enabled","StateInspector","exports","props","default","createElement","FloatingPanel","shortcut","dragHandle","_ref","height","Tabs","Tab","label","title","theme","defaultLanguage","value","JSON","stringify","state","options"],"sources":["StateInspector.tsx"],"sourcesContent":["import React from \"react\";\nimport Editor from \"@monaco-editor/react\";\nimport { Tab, Tabs } from \"@webiny/ui/Tabs\";\nimport { FloatingPanel } from \"~/components\";\n\nconst monacoTheme = \"vs-light\";\nconst monacoOptions = { minimap: { enabled: false } };\n\ninterface StateInspectorProps {\n    title: string;\n    shortcut: string;\n    state: Record<string, any>;\n}\n\nexport const StateInspector = (props: StateInspectorProps) => {\n    return (\n        <FloatingPanel shortcut={props.shortcut} dragHandle={\".mdc-tab-scroller\"}>\n            {({ height }) => (\n                <Tabs>\n                    <Tab label={props.title}>\n                        <Editor\n                            theme={monacoTheme}\n                            height={height - 48}\n                            defaultLanguage={\"json\"}\n                            value={JSON.stringify(props.state, null, 2)}\n                            options={monacoOptions}\n                        />\n                    </Tab>\n                </Tabs>\n            )}\n        </FloatingPanel>\n    );\n};\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AACA,IAAAG,CAAA,GAAAH,OAAA;AAEA,IAAMI,WAAW,GAAG,UAAU;AAC9B,IAAMC,aAAa,GAAG;EAAEC,OAAO,EAAE;IAAEC,OAAO,EAAE;EAAM;AAAE,CAAC;AAQ9C,IAAMC,cAAc,GAAAC,OAAA,CAAAD,cAAA,GAAG,SAAjBA,cAAcA,CAAIE,KAA0B,EAAK;EAC1D,oBACIZ,MAAA,CAAAa,OAAA,CAAAC,aAAA,CAACT,CAAA,CAAAU,aAAa;IAACC,QAAQ,EAAEJ,KAAK,CAACI,QAAS;IAACC,UAAU,EAAE;EAAoB,GACpE,UAAAC,IAAA;IAAA,IAAGC,MAAM,GAAAD,IAAA,CAANC,MAAM;IAAA,oBACNnB,MAAA,CAAAa,OAAA,CAAAC,aAAA,CAACV,KAAA,CAAAgB,IAAI,qBACDpB,MAAA,CAAAa,OAAA,CAAAC,aAAA,CAACV,KAAA,CAAAiB,GAAG;MAACC,KAAK,EAAEV,KAAK,CAACW;IAAM,gBACpBvB,MAAA,CAAAa,OAAA,CAAAC,aAAA,CAACX,OAAA,CAAAU,OAAM;MACHW,KAAK,EAAElB,WAAY;MACnBa,MAAM,EAAEA,MAAM,GAAG,EAAG;MACpBM,eAAe,EAAE,MAAO;MACxBC,KAAK,EAAEC,IAAI,CAACC,SAAS,CAAChB,KAAK,CAACiB,KAAK,EAAE,IAAI,EAAE,CAAC,CAAE;MAC5CC,OAAO,EAAEvB;IAAc,CAC1B,CACA,CACH,CAAC;EAAA,CAEA,CAAC;AAExB,CAAC","ignoreList":[]}

package/components/index.d.ts

@@ -1 +1,3 @@
 export { FileManager } from "../base/ui/FileManager";
+export { FloatingPanel } from "./FloatingPanel";
+export { StateInspector } from "./StateInspector";

package/components/index.js

@@ -9,6 +9,20 @@ Object.defineProperty(exports, "FileManager", {
     return _FileManager.FileManager;
   }
 });
+Object.defineProperty(exports, "FloatingPanel", {
+  enumerable: true,
+  get: function get() {
+    return _FloatingPanel.FloatingPanel;
+  }
+});
+Object.defineProperty(exports, "StateInspector", {
+  enumerable: true,
+  get: function get() {
+    return _StateInspector.StateInspector;
+  }
+});
 var _FileManager = require("../base/ui/FileManager");
+var _FloatingPanel = require("./FloatingPanel");
+var _StateInspector = require("./StateInspector");
 
 //# sourceMappingURL=index.js.map

package/components/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_FileManager","require"],"sources":["index.ts"],"sourcesContent":["export { FileManager } from \"~/base/ui/FileManager\";\n"],"mappings":";;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA","ignoreList":[]}
+{"version":3,"names":["_FileManager","require","_FloatingPanel","_StateInspector"],"sources":["index.ts"],"sourcesContent":["export { FileManager } from \"~/base/ui/FileManager\";\nexport { FloatingPanel } from \"~/components/FloatingPanel\";\nexport { StateInspector } from \"~/components/StateInspector\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AACA,IAAAC,cAAA,GAAAD,OAAA;AACA,IAAAE,eAAA,GAAAF,OAAA","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webiny/app-admin",
-	"version": "5.42.2-beta.0",
+	"version": "5.42.2-beta.1",
 	"main": "index.js",
 	"description": "A collection of plugins that together form a complete admin interface, customizable and extensible with Webiny apps and plugins.",
 	"repository": {
@@ -17,25 +17,26 @@
 		"@emotion/styled": "11.10.6",
 		"@iconify/json": "2.2.271",
 		"@material-design-icons/svg": "0.14.13",
+		"@monaco-editor/react": "4.7.0",
 		"@svgr/webpack": "6.5.1",
 		"@types/mime": "2.0.3",
 		"@types/react": "18.2.79",
-		"@webiny/app": "5.42.2-beta.0",
-		"@webiny/app-security": "5.42.2-beta.0",
-		"@webiny/app-theme": "5.42.2-beta.0",
-		"@webiny/app-wcp": "5.42.2-beta.0",
-		"@webiny/form": "5.42.2-beta.0",
-		"@webiny/lexical-editor": "5.42.2-beta.0",
-		"@webiny/lexical-theme": "5.42.2-beta.0",
-		"@webiny/plugins": "5.42.2-beta.0",
-		"@webiny/react-composition": "5.42.2-beta.0",
-		"@webiny/react-properties": "5.42.2-beta.0",
-		"@webiny/react-router": "5.42.2-beta.0",
-		"@webiny/telemetry": "5.42.2-beta.0",
-		"@webiny/ui": "5.42.2-beta.0",
-		"@webiny/ui-composer": "5.42.2-beta.0",
-		"@webiny/utils": "5.42.2-beta.0",
-		"@webiny/validation": "5.42.2-beta.0",
+		"@webiny/app": "5.42.2-beta.1",
+		"@webiny/app-security": "5.42.2-beta.1",
+		"@webiny/app-theme": "5.42.2-beta.1",
+		"@webiny/app-wcp": "5.42.2-beta.1",
+		"@webiny/form": "5.42.2-beta.1",
+		"@webiny/lexical-editor": "5.42.2-beta.1",
+		"@webiny/lexical-theme": "5.42.2-beta.1",
+		"@webiny/plugins": "5.42.2-beta.1",
+		"@webiny/react-composition": "5.42.2-beta.1",
+		"@webiny/react-properties": "5.42.2-beta.1",
+		"@webiny/react-router": "5.42.2-beta.1",
+		"@webiny/telemetry": "5.42.2-beta.1",
+		"@webiny/ui": "5.42.2-beta.1",
+		"@webiny/ui-composer": "5.42.2-beta.1",
+		"@webiny/utils": "5.42.2-beta.1",
+		"@webiny/validation": "5.42.2-beta.1",
 		"apollo-cache": "1.3.5",
 		"apollo-client": "2.6.10",
 		"apollo-link": "1.2.14",
@@ -54,7 +55,9 @@
 		"prop-types": "15.8.1",
 		"react": "18.2.0",
 		"react-dom": "18.2.0",
+		"react-draggable": "4.4.6",
 		"react-hotkeyz": "1.0.4",
+		"react-resizable": "3.0.5",
 		"react-resizable-panels": "2.0.19",
 		"react-transition-group": "4.4.5",
 		"react-virtualized": "9.22.5",
@@ -67,9 +70,11 @@
 		"@types/bytes": "3.1.5",
 		"@types/graphlib": "2.1.12",
 		"@types/is-hotkey": "0.1.10",
+		"@types/react-resizable": "3.0.8",
 		"@types/store": "2.0.2",
-		"@webiny/cli": "5.42.2-beta.0",
-		"@webiny/project-utils": "5.42.2-beta.0",
+		"@webiny/cli": "5.42.2-beta.1",
+		"@webiny/project-utils": "5.42.2-beta.1",
+		"monaco-editor": "0.52.2",
 		"rimraf": "6.0.1",
 		"ttypescript": "1.5.15",
 		"typescript": "4.9.5"
@@ -87,15 +92,18 @@
 			"dependencies": [
 				"@svgr/webpack",
 				"@iconify/json",
-				"unicode-emoji-json",
 				"@emotion/react",
 				"@types/mime",
-				"reset-css"
+				"reset-css",
+				"unicode-emoji-json"
+			],
+			"devDependencies": [
+				"monaco-editor"
 			],
 			"peerDependencies": [
 				"react-dom"
 			]
 		}
 	},
-	"gitHead": "e44791ee3279f9c24aef1a6500b5c6eb5357b30d"
+	"gitHead": "128fd99b1f7671825a398761f5709ff9e87638c7"
 }