@webiny/app-admin 5.27.0 → 5.28.0-beta.0

package/ui/views/OverlayView/HeaderElement.js

@@ -1,41 +1,59 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _createSuper from "@babel/runtime/helpers/createSuper";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from "react";
-import { css } from "emotion";
-import { UIElement } from "../../UIElement";
-import { TopAppBarSecondary, TopAppBarSection } from "@webiny/ui/TopAppBar";
-import { IconButton } from "@webiny/ui/Button";
-import { ReactComponent as CloseIcon } from "../../../components/OverlayLayout/icons/close.svg";
-import { PlaceholderElement } from "../../elements/PlaceholderElement";
-import { HeaderTitleElement } from "./HeaderTitleElement";
-var width = /*#__PURE__*/css({
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HeaderElement = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _emotion = require("emotion");
+
+var _UIElement2 = require("../../UIElement");
+
+var _TopAppBar = require("@webiny/ui/TopAppBar");
+
+var _Button = require("@webiny/ui/Button");
+
+var _close = require("../../../components/OverlayLayout/icons/close.svg");
+
+var _PlaceholderElement = require("../../elements/PlaceholderElement");
+
+var _HeaderTitleElement = require("./HeaderTitleElement");
+
+var width = /*#__PURE__*/(0, _emotion.css)({
   width: "33%"
 }, "label:width;"); // !GOOD FIRST ISSUE!
 // Extract rendering and styling into a HeaderElementRenderer class.
 
-export var HeaderElement = /*#__PURE__*/function (_UIElement) {
-  _inherits(HeaderElement, _UIElement);
+var HeaderElement = /*#__PURE__*/function (_UIElement) {
+  (0, _inherits2.default)(HeaderElement, _UIElement);
 
-  var _super = _createSuper(HeaderElement);
+  var _super = (0, _createSuper2.default)(HeaderElement);
 
   function HeaderElement(id, config) {
     var _this;
 
-    _classCallCheck(this, HeaderElement);
-
+    (0, _classCallCheck2.default)(this, HeaderElement);
     _this = _super.call(this, id, config);
-
-    _defineProperty(_assertThisInitialized(_this), "_leftSection", new PlaceholderElement("leftSection"));
-
-    _defineProperty(_assertThisInitialized(_this), "_centerSection", void 0);
-
-    _defineProperty(_assertThisInitialized(_this), "_rightSection", new PlaceholderElement("rightSection"));
-
-    _this._centerSection = new HeaderTitleElement("title", {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "_leftSection", new _PlaceholderElement.PlaceholderElement("leftSection"));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "_centerSection", void 0);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "_rightSection", new _PlaceholderElement.PlaceholderElement("rightSection"));
+    _this._centerSection = new _HeaderTitleElement.HeaderTitleElement("title", {
       title: function title() {
         return typeof _this.config.getTitle === "function" ? _this.config.getTitle() : null;
       }
@@ -46,7 +64,7 @@ export var HeaderElement = /*#__PURE__*/function (_UIElement) {
     return _this;
   }
 
-  _createClass(HeaderElement, [{
+  (0, _createClass2.default)(HeaderElement, [{
     key: "setTitle",
     value: function setTitle(title) {
       this.config.getTitle = title;
@@ -84,24 +102,24 @@ export var HeaderElement = /*#__PURE__*/function (_UIElement) {
   }, {
     key: "render",
     value: function render(props) {
-      return /*#__PURE__*/React.createElement(TopAppBarSecondary, {
+      return /*#__PURE__*/_react.default.createElement(_TopAppBar.TopAppBarSecondary, {
         fixed: true,
         style: {
           top: 0
         }
-      }, /*#__PURE__*/React.createElement(TopAppBarSection, {
+      }, /*#__PURE__*/_react.default.createElement(_TopAppBar.TopAppBarSection, {
         className: width,
         alignStart: true
-      }, this.getLeftSectionElement().render(props)), /*#__PURE__*/React.createElement(TopAppBarSection, {
+      }, this.getLeftSectionElement().render(props)), /*#__PURE__*/_react.default.createElement(_TopAppBar.TopAppBarSection, {
         className: width,
         alignEnd: true
-      }, this.getCenterSectionElement().render(props)), /*#__PURE__*/React.createElement(TopAppBarSection, {
+      }, this.getCenterSectionElement().render(props)), /*#__PURE__*/_react.default.createElement(_TopAppBar.TopAppBarSection, {
         className: width,
         alignEnd: true
-      }, this.getRightSectionElement().render(props), /*#__PURE__*/React.createElement(IconButton, {
+      }, this.getRightSectionElement().render(props), /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
         ripple: false,
         onClick: this.config.onClose,
-        icon: /*#__PURE__*/React.createElement(CloseIcon, {
+        icon: /*#__PURE__*/_react.default.createElement(_close.ReactComponent, {
           style: {
             width: 24,
             height: 24
@@ -110,6 +128,7 @@ export var HeaderElement = /*#__PURE__*/function (_UIElement) {
       })));
     }
   }]);
-
   return HeaderElement;
-}(UIElement);
+}(_UIElement2.UIElement);
+
+exports.HeaderElement = HeaderElement;

package/ui/views/OverlayView/HeaderElement.js.map

@@ -1 +1 @@
-{"version":3,"sources":["HeaderElement.tsx"],"names":["React","css","UIElement","TopAppBarSecondary","TopAppBarSection","IconButton","ReactComponent","CloseIcon","PlaceholderElement","HeaderTitleElement","width","HeaderElement","id","config","_centerSection","title","getTitle","useGrid","element","_leftSection","_rightSection","props","top","getLeftSectionElement","render","getCenterSectionElement","getRightSectionElement","onClose","height"],"mappings":";;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,GAAT,QAAoB,SAApB;AACA,SAASC,SAAT;AACA,SAASC,kBAAT,EAA6BC,gBAA7B,QAAqD,sBAArD;AACA,SAASC,UAAT,QAA2B,mBAA3B;AACA,SAASC,cAAc,IAAIC,SAA3B;AACA,SAASC,kBAAT;AACA,SAASC,kBAAT;AAOA,IAAMC,KAAK,gBAAGT,GAAG,CAAC;AACdS,EAAAA,KAAK,EAAE;AADO,CAAD,iBAAjB,C,CAIA;AACA;;AAMA,WAAaC,aAAb;AAAA;;AAAA;;AAKI,yBAAmBC,EAAnB,EAA+BC,MAA/B,EAA4D;AAAA;;AAAA;;AACxD,8BAAMD,EAAN,EAAUC,MAAV;;AADwD,mEAJ1B,IAAIL,kBAAJ,CAAuB,aAAvB,CAI0B;;AAAA;;AAAA,oEAFzB,IAAIA,kBAAJ,CAAuB,cAAvB,CAEyB;;AAGxD,UAAKM,cAAL,GAAsB,IAAIL,kBAAJ,CAAuB,OAAvB,EAAgC;AAClDM,MAAAA,KAAK,EAAE,iBAAM;AACT,eAAO,OAAO,MAAKF,MAAL,CAAYG,QAAnB,KAAgC,UAAhC,GAA6C,MAAKH,MAAL,CAAYG,QAAZ,EAA7C,GAAsE,IAA7E;AACH;AAHiD,KAAhC,CAAtB;;AAMA,UAAKC,OAAL,CAAa,KAAb;;AATwD;AAU3D;;AAfL;AAAA;AAAA,WAiBI,kBAAgBF,KAAhB,EAAyD;AACrD,WAAKF,MAAL,CAAYG,QAAZ,GAAuBD,KAAvB;AACH;AAnBL;AAAA;AAAA,WAqBI,+BAA6BG,OAA7B,EAAuD;AACnD,WAAKC,YAAL,GAAoBD,OAApB;AACH;AAvBL;AAAA;AAAA,WAyBI,iCAA+BA,OAA/B,EAAyD;AACrD,WAAKJ,cAAL,GAAsBI,OAAtB;AACH;AA3BL;AAAA;AAAA,WA6BI,gCAA8BA,OAA9B,EAAwD;AACpD,WAAKE,aAAL,GAAqBF,OAArB;AACH;AA/BL;AAAA;AAAA,WAiCI,iCAA0C;AACtC,aAAO,KAAKC,YAAZ;AACH;AAnCL;AAAA;AAAA,WAqCI,mCAA4C;AACxC,aAAO,KAAKL,cAAZ;AACH;AAvCL;AAAA;AAAA,WAyCI,kCAA2C;AACvC,aAAO,KAAKM,aAAZ;AACH;AA3CL;AAAA;AAAA,WA6CI,gBAAuBC,KAAvB,EAAqE;AACjE,0BACI,oBAAC,kBAAD;AAAoB,QAAA,KAAK,MAAzB;AAA0B,QAAA,KAAK,EAAE;AAAEC,UAAAA,GAAG,EAAE;AAAP;AAAjC,sBACI,oBAAC,gBAAD;AAAkB,QAAA,SAAS,EAAEZ,KAA7B;AAAoC,QAAA,UAAU;AAA9C,SACK,KAAKa,qBAAL,GAA6BC,MAA7B,CAAoCH,KAApC,CADL,CADJ,eAII,oBAAC,gBAAD;AAAkB,QAAA,SAAS,EAAEX,KAA7B;AAAoC,QAAA,QAAQ;AAA5C,SACK,KAAKe,uBAAL,GAA+BD,MAA/B,CAAsCH,KAAtC,CADL,CAJJ,eAOI,oBAAC,gBAAD;AAAkB,QAAA,SAAS,EAAEX,KAA7B;AAAoC,QAAA,QAAQ;AAA5C,SACK,KAAKgB,sBAAL,GAA8BF,MAA9B,CAAqCH,KAArC,CADL,eAEI,oBAAC,UAAD;AACI,QAAA,MAAM,EAAE,KADZ;AAEI,QAAA,OAAO,EAAE,KAAKR,MAAL,CAAYc,OAFzB;AAGI,QAAA,IAAI,eAAE,oBAAC,SAAD;AAAW,UAAA,KAAK,EAAE;AAAEjB,YAAAA,KAAK,EAAE,EAAT;AAAakB,YAAAA,MAAM,EAAE;AAArB;AAAlB;AAHV,QAFJ,CAPJ,CADJ;AAkBH;AAhEL;;AAAA;AAAA,EAAmC1B,SAAnC","sourcesContent":["import React from \"react\";\nimport { css } from \"emotion\";\nimport { UIElement, UIElementConfig, UiElementRenderProps } from \"~/ui/UIElement\";\nimport { TopAppBarSecondary, TopAppBarSection } from \"@webiny/ui/TopAppBar\";\nimport { IconButton } from \"@webiny/ui/Button\";\nimport { ReactComponent as CloseIcon } from \"~/components/OverlayLayout/icons/close.svg\";\nimport { PlaceholderElement } from \"~/ui/elements/PlaceholderElement\";\nimport { HeaderTitleElement } from \"./HeaderTitleElement\";\n\ninterface HeaderElementConfig extends UIElementConfig {\n    onClose: (event: React.MouseEvent) => void;\n    getTitle?: GetterWithoutProps<string>;\n}\n\nconst width = css({\n    width: \"33%\"\n});\n\n// !GOOD FIRST ISSUE!\n// Extract rendering and styling into a HeaderElementRenderer class.\n\ninterface GetterWithoutProps<T> {\n    (): T;\n}\n\nexport class HeaderElement extends UIElement<HeaderElementConfig> {\n    private _leftSection: UIElement = new PlaceholderElement(\"leftSection\");\n    private _centerSection: UIElement;\n    private _rightSection: UIElement = new PlaceholderElement(\"rightSection\");\n\n    public constructor(id: string, config: HeaderElementConfig) {\n        super(id, config);\n\n        this._centerSection = new HeaderTitleElement(\"title\", {\n            title: () => {\n                return typeof this.config.getTitle === \"function\" ? this.config.getTitle() : null;\n            }\n        });\n\n        this.useGrid(false);\n    }\n\n    public setTitle(title: GetterWithoutProps<string>): void {\n        this.config.getTitle = title;\n    }\n\n    public setLeftSectionElement(element: UIElement): void {\n        this._leftSection = element;\n    }\n\n    public setCenterSectionElement(element: UIElement): void {\n        this._centerSection = element;\n    }\n\n    public setRightSectionElement(element: UIElement): void {\n        this._rightSection = element;\n    }\n\n    public getLeftSectionElement(): UIElement {\n        return this._leftSection;\n    }\n\n    public getCenterSectionElement(): UIElement {\n        return this._centerSection;\n    }\n\n    public getRightSectionElement(): UIElement {\n        return this._rightSection;\n    }\n\n    public override render(props: UiElementRenderProps): React.ReactNode {\n        return (\n            <TopAppBarSecondary fixed style={{ top: 0 }}>\n                <TopAppBarSection className={width} alignStart>\n                    {this.getLeftSectionElement().render(props)}\n                </TopAppBarSection>\n                <TopAppBarSection className={width} alignEnd>\n                    {this.getCenterSectionElement().render(props)}\n                </TopAppBarSection>\n                <TopAppBarSection className={width} alignEnd>\n                    {this.getRightSectionElement().render(props)}\n                    <IconButton\n                        ripple={false}\n                        onClick={this.config.onClose}\n                        icon={<CloseIcon style={{ width: 24, height: 24 }} />}\n                    />\n                </TopAppBarSection>\n            </TopAppBarSecondary>\n        );\n    }\n}\n"]}
+{"version":3,"names":["width","css","HeaderElement","id","config","PlaceholderElement","_centerSection","HeaderTitleElement","title","getTitle","useGrid","element","_leftSection","_rightSection","props","top","getLeftSectionElement","render","getCenterSectionElement","getRightSectionElement","onClose","height","UIElement"],"sources":["HeaderElement.tsx"],"sourcesContent":["import React from \"react\";\nimport { css } from \"emotion\";\nimport { UIElement, UIElementConfig, UiElementRenderProps } from \"~/ui/UIElement\";\nimport { TopAppBarSecondary, TopAppBarSection } from \"@webiny/ui/TopAppBar\";\nimport { IconButton } from \"@webiny/ui/Button\";\nimport { ReactComponent as CloseIcon } from \"~/components/OverlayLayout/icons/close.svg\";\nimport { PlaceholderElement } from \"~/ui/elements/PlaceholderElement\";\nimport { HeaderTitleElement } from \"./HeaderTitleElement\";\n\ninterface HeaderElementConfig extends UIElementConfig {\n    onClose: (event: React.MouseEvent) => void;\n    getTitle?: GetterWithoutProps<string>;\n}\n\nconst width = css({\n    width: \"33%\"\n});\n\n// !GOOD FIRST ISSUE!\n// Extract rendering and styling into a HeaderElementRenderer class.\n\ninterface GetterWithoutProps<T> {\n    (): T;\n}\n\nexport class HeaderElement extends UIElement<HeaderElementConfig> {\n    private _leftSection: UIElement = new PlaceholderElement(\"leftSection\");\n    private _centerSection: UIElement;\n    private _rightSection: UIElement = new PlaceholderElement(\"rightSection\");\n\n    public constructor(id: string, config: HeaderElementConfig) {\n        super(id, config);\n\n        this._centerSection = new HeaderTitleElement(\"title\", {\n            title: () => {\n                return typeof this.config.getTitle === \"function\" ? this.config.getTitle() : null;\n            }\n        });\n\n        this.useGrid(false);\n    }\n\n    public setTitle(title: GetterWithoutProps<string>): void {\n        this.config.getTitle = title;\n    }\n\n    public setLeftSectionElement(element: UIElement): void {\n        this._leftSection = element;\n    }\n\n    public setCenterSectionElement(element: UIElement): void {\n        this._centerSection = element;\n    }\n\n    public setRightSectionElement(element: UIElement): void {\n        this._rightSection = element;\n    }\n\n    public getLeftSectionElement(): UIElement {\n        return this._leftSection;\n    }\n\n    public getCenterSectionElement(): UIElement {\n        return this._centerSection;\n    }\n\n    public getRightSectionElement(): UIElement {\n        return this._rightSection;\n    }\n\n    public override render(props: UiElementRenderProps): React.ReactNode {\n        return (\n            <TopAppBarSecondary fixed style={{ top: 0 }}>\n                <TopAppBarSection className={width} alignStart>\n                    {this.getLeftSectionElement().render(props)}\n                </TopAppBarSection>\n                <TopAppBarSection className={width} alignEnd>\n                    {this.getCenterSectionElement().render(props)}\n                </TopAppBarSection>\n                <TopAppBarSection className={width} alignEnd>\n                    {this.getRightSectionElement().render(props)}\n                    <IconButton\n                        ripple={false}\n                        onClick={this.config.onClose}\n                        icon={<CloseIcon style={{ width: 24, height: 24 }} />}\n                    />\n                </TopAppBarSection>\n            </TopAppBarSecondary>\n        );\n    }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAOA,IAAMA,KAAK,gBAAG,IAAAC,YAAA,EAAI;EACdD,KAAK,EAAE;AADO,CAAJ,iBAAd,C,CAIA;AACA;;IAMaE,a;;;;;EAKT,uBAAmBC,EAAnB,EAA+BC,MAA/B,EAA4D;IAAA;;IAAA;IACxD,0BAAMD,EAAN,EAAUC,MAAV;IADwD,2FAJ1B,IAAIC,sCAAJ,CAAuB,aAAvB,CAI0B;IAAA;IAAA,4FAFzB,IAAIA,sCAAJ,CAAuB,cAAvB,CAEyB;IAGxD,MAAKC,cAAL,GAAsB,IAAIC,sCAAJ,CAAuB,OAAvB,EAAgC;MAClDC,KAAK,EAAE,iBAAM;QACT,OAAO,OAAO,MAAKJ,MAAL,CAAYK,QAAnB,KAAgC,UAAhC,GAA6C,MAAKL,MAAL,CAAYK,QAAZ,EAA7C,GAAsE,IAA7E;MACH;IAHiD,CAAhC,CAAtB;;IAMA,MAAKC,OAAL,CAAa,KAAb;;IATwD;EAU3D;;;;WAED,kBAAgBF,KAAhB,EAAyD;MACrD,KAAKJ,MAAL,CAAYK,QAAZ,GAAuBD,KAAvB;IACH;;;WAED,+BAA6BG,OAA7B,EAAuD;MACnD,KAAKC,YAAL,GAAoBD,OAApB;IACH;;;WAED,iCAA+BA,OAA/B,EAAyD;MACrD,KAAKL,cAAL,GAAsBK,OAAtB;IACH;;;WAED,gCAA8BA,OAA9B,EAAwD;MACpD,KAAKE,aAAL,GAAqBF,OAArB;IACH;;;WAED,iCAA0C;MACtC,OAAO,KAAKC,YAAZ;IACH;;;WAED,mCAA4C;MACxC,OAAO,KAAKN,cAAZ;IACH;;;WAED,kCAA2C;MACvC,OAAO,KAAKO,aAAZ;IACH;;;WAED,gBAAuBC,KAAvB,EAAqE;MACjE,oBACI,6BAAC,6BAAD;QAAoB,KAAK,MAAzB;QAA0B,KAAK,EAAE;UAAEC,GAAG,EAAE;QAAP;MAAjC,gBACI,6BAAC,2BAAD;QAAkB,SAAS,EAAEf,KAA7B;QAAoC,UAAU;MAA9C,GACK,KAAKgB,qBAAL,GAA6BC,MAA7B,CAAoCH,KAApC,CADL,CADJ,eAII,6BAAC,2BAAD;QAAkB,SAAS,EAAEd,KAA7B;QAAoC,QAAQ;MAA5C,GACK,KAAKkB,uBAAL,GAA+BD,MAA/B,CAAsCH,KAAtC,CADL,CAJJ,eAOI,6BAAC,2BAAD;QAAkB,SAAS,EAAEd,KAA7B;QAAoC,QAAQ;MAA5C,GACK,KAAKmB,sBAAL,GAA8BF,MAA9B,CAAqCH,KAArC,CADL,eAEI,6BAAC,kBAAD;QACI,MAAM,EAAE,KADZ;QAEI,OAAO,EAAE,KAAKV,MAAL,CAAYgB,OAFzB;QAGI,IAAI,eAAE,6BAAC,qBAAD;UAAW,KAAK,EAAE;YAAEpB,KAAK,EAAE,EAAT;YAAaqB,MAAM,EAAE;UAArB;QAAlB;MAHV,EAFJ,CAPJ,CADJ;IAkBH;;;EAhE8BC,qB"}

package/ui/views/OverlayView/HeaderTitleElement.js

@@ -1,27 +1,43 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _createSuper from "@babel/runtime/helpers/createSuper";
-import React from "react";
-import { UIElement } from "../../UIElement";
-import { Typography } from "@webiny/ui/Typography";
-import { UIRenderer } from "../../UIRenderer";
-export var HeaderTitleElementRenderer = /*#__PURE__*/function (_UIRenderer) {
-  _inherits(HeaderTitleElementRenderer, _UIRenderer);
-
-  var _super = _createSuper(HeaderTitleElementRenderer);
+"use strict";
 
-  function HeaderTitleElementRenderer() {
-    _classCallCheck(this, HeaderTitleElementRenderer);
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HeaderTitleElementRenderer = exports.HeaderTitleElement = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _UIElement2 = require("../../UIElement");
+
+var _Typography = require("@webiny/ui/Typography");
 
+var _UIRenderer2 = require("../../UIRenderer");
+
+var HeaderTitleElementRenderer = /*#__PURE__*/function (_UIRenderer) {
+  (0, _inherits2.default)(HeaderTitleElementRenderer, _UIRenderer);
+
+  var _super = (0, _createSuper2.default)(HeaderTitleElementRenderer);
+
+  function HeaderTitleElementRenderer() {
+    (0, _classCallCheck2.default)(this, HeaderTitleElementRenderer);
     return _super.apply(this, arguments);
   }
 
-  _createClass(HeaderTitleElementRenderer, [{
+  (0, _createClass2.default)(HeaderTitleElementRenderer, [{
     key: "render",
     value: function render(_ref) {
       var element = _ref.element;
-      return /*#__PURE__*/React.createElement(Typography, {
+      return /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
         style: {
           margin: "0 auto",
           color: "var(--mdc-theme-on-surface)"
@@ -30,19 +46,20 @@ export var HeaderTitleElementRenderer = /*#__PURE__*/function (_UIRenderer) {
       }, element.config.title());
     }
   }]);
-
   return HeaderTitleElementRenderer;
-}(UIRenderer);
-export var HeaderTitleElement = /*#__PURE__*/function (_UIElement) {
-  _inherits(HeaderTitleElement, _UIElement);
+}(_UIRenderer2.UIRenderer);
 
-  var _super2 = _createSuper(HeaderTitleElement);
+exports.HeaderTitleElementRenderer = HeaderTitleElementRenderer;
+
+var HeaderTitleElement = /*#__PURE__*/function (_UIElement) {
+  (0, _inherits2.default)(HeaderTitleElement, _UIElement);
+
+  var _super2 = (0, _createSuper2.default)(HeaderTitleElement);
 
   function HeaderTitleElement(id, config) {
     var _this;
 
-    _classCallCheck(this, HeaderTitleElement);
-
+    (0, _classCallCheck2.default)(this, HeaderTitleElement);
     _this = _super2.call(this, id, config);
 
     _this.addRenderer(new HeaderTitleElementRenderer());
@@ -50,5 +67,7 @@ export var HeaderTitleElement = /*#__PURE__*/function (_UIElement) {
     return _this;
   }
 
-  return _createClass(HeaderTitleElement);
-}(UIElement);
+  return (0, _createClass2.default)(HeaderTitleElement);
+}(_UIElement2.UIElement);
+
+exports.HeaderTitleElement = HeaderTitleElement;

package/ui/views/OverlayView/HeaderTitleElement.js.map

@@ -1 +1 @@
-{"version":3,"sources":["HeaderTitleElement.tsx"],"names":["React","UIElement","Typography","UIRenderer","HeaderTitleElementRenderer","element","margin","color","config","title","HeaderTitleElement","id","addRenderer"],"mappings":";;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,SAAT;AACA,SAASC,UAAT,QAA2B,uBAA3B;AACA,SAASC,UAAT;AAMA,WAAaC,0BAAb;AAAA;;AAAA;;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA,WACI,sBAAyF;AAAA,UAAhEC,OAAgE,QAAhEA,OAAgE;AACrF,0BACI,oBAAC,UAAD;AACI,QAAA,KAAK,EAAE;AAAEC,UAAAA,MAAM,EAAE,QAAV;AAAoBC,UAAAA,KAAK,EAAE;AAA3B,SADX;AAEI,QAAA,GAAG,EAAE;AAFT,SAIKF,OAAO,CAACG,MAAR,CAAeC,KAAf,EAJL,CADJ;AAQH;AAVL;;AAAA;AAAA,EAAgDN,UAAhD;AAaA,WAAaO,kBAAb;AAAA;;AAAA;;AACI,8BAAmBC,EAAnB,EAA+BH,MAA/B,EAAiE;AAAA;;AAAA;;AAC7D,+BAAMG,EAAN,EAAUH,MAAV;;AAEA,UAAKI,WAAL,CAAiB,IAAIR,0BAAJ,EAAjB;;AAH6D;AAIhE;;AALL;AAAA,EAAwCH,SAAxC","sourcesContent":["import React from \"react\";\nimport { UIElement, UIElementConfig } from \"~/ui/UIElement\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { UIRenderer, UIRenderParams } from \"~/ui/UIRenderer\";\n\ninterface HeaderTitleElementConfig extends UIElementConfig {\n    title: () => string | null;\n}\n\nexport class HeaderTitleElementRenderer extends UIRenderer<HeaderTitleElement> {\n    public override render({ element }: UIRenderParams<HeaderTitleElement>): React.ReactNode {\n        return (\n            <Typography\n                style={{ margin: \"0 auto\", color: \"var(--mdc-theme-on-surface)\" }}\n                use={\"headline6\"}\n            >\n                {element.config.title()}\n            </Typography>\n        );\n    }\n}\n\nexport class HeaderTitleElement extends UIElement<HeaderTitleElementConfig> {\n    public constructor(id: string, config: HeaderTitleElementConfig) {\n        super(id, config);\n\n        this.addRenderer(new HeaderTitleElementRenderer());\n    }\n}\n"]}
+{"version":3,"names":["HeaderTitleElementRenderer","element","margin","color","config","title","UIRenderer","HeaderTitleElement","id","addRenderer","UIElement"],"sources":["HeaderTitleElement.tsx"],"sourcesContent":["import React from \"react\";\nimport { UIElement, UIElementConfig } from \"~/ui/UIElement\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { UIRenderer, UIRenderParams } from \"~/ui/UIRenderer\";\n\ninterface HeaderTitleElementConfig extends UIElementConfig {\n    title: () => string | null;\n}\n\nexport class HeaderTitleElementRenderer extends UIRenderer<HeaderTitleElement> {\n    public override render({ element }: UIRenderParams<HeaderTitleElement>): React.ReactNode {\n        return (\n            <Typography\n                style={{ margin: \"0 auto\", color: \"var(--mdc-theme-on-surface)\" }}\n                use={\"headline6\"}\n            >\n                {element.config.title()}\n            </Typography>\n        );\n    }\n}\n\nexport class HeaderTitleElement extends UIElement<HeaderTitleElementConfig> {\n    public constructor(id: string, config: HeaderTitleElementConfig) {\n        super(id, config);\n\n        this.addRenderer(new HeaderTitleElementRenderer());\n    }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;IAMaA,0B;;;;;;;;;;;;WACT,sBAAyF;MAAA,IAAhEC,OAAgE,QAAhEA,OAAgE;MACrF,oBACI,6BAAC,sBAAD;QACI,KAAK,EAAE;UAAEC,MAAM,EAAE,QAAV;UAAoBC,KAAK,EAAE;QAA3B,CADX;QAEI,GAAG,EAAE;MAFT,GAIKF,OAAO,CAACG,MAAR,CAAeC,KAAf,EAJL,CADJ;IAQH;;;EAV2CC,uB;;;;IAanCC,kB;;;;;EACT,4BAAmBC,EAAnB,EAA+BJ,MAA/B,EAAiE;IAAA;;IAAA;IAC7D,2BAAMI,EAAN,EAAUJ,MAAV;;IAEA,MAAKK,WAAL,CAAiB,IAAIT,0BAAJ,EAAjB;;IAH6D;EAIhE;;;EALmCU,qB"}

package/ui/views/OverlayView/useOverlayView.js

@@ -1,32 +1,46 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import { useEffect, useState } from "react";
-import { css } from "emotion";
-import { OverlayView } from "../OverlayView";
-var noScroll = /*#__PURE__*/css({
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useOverlayView = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+var _emotion = require("emotion");
+
+var _OverlayView = require("../OverlayView");
+
+var noScroll = /*#__PURE__*/(0, _emotion.css)({
   overflow: "hidden",
   height: "100vh"
 }, "label:noScroll;");
-export var useOverlayView = function useOverlayView() {
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
+
+var useOverlayView = function useOverlayView() {
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       isVisible = _useState2[0],
       setIsVisible = _useState2[1];
 
-  useEffect(function () {
+  (0, _react.useEffect)(function () {
     if (isVisible) {
-      OverlayView.openedViews++;
+      _OverlayView.OverlayView.openedViews++;
       document.body.classList.add(noScroll);
-    } else if (!OverlayView.openedViews) {
+    } else if (!_OverlayView.OverlayView.openedViews) {
       document.body.classList.remove(noScroll);
     }
   }, [isVisible]);
-  useEffect(function () {
+  (0, _react.useEffect)(function () {
     return function () {
-      if (OverlayView.openedViews > 0) {
-        OverlayView.openedViews--;
+      if (_OverlayView.OverlayView.openedViews > 0) {
+        _OverlayView.OverlayView.openedViews--;
       }
 
-      if (!OverlayView.openedViews) {
+      if (!_OverlayView.OverlayView.openedViews) {
         document.body.classList.remove(noScroll);
       }
     };
@@ -35,4 +49,6 @@ export var useOverlayView = function useOverlayView() {
     isVisible: isVisible,
     setIsVisible: setIsVisible
   };
-};
+};
+
+exports.useOverlayView = useOverlayView;

package/ui/views/OverlayView/useOverlayView.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useOverlayView.ts"],"names":["useEffect","useState","css","OverlayView","noScroll","overflow","height","useOverlayView","isVisible","setIsVisible","openedViews","document","body","classList","add","remove"],"mappings":";AAAA,SAASA,SAAT,EAAoBC,QAApB,QAAoC,OAApC;AACA,SAASC,GAAT,QAAoB,SAApB;AACA,SAASC,WAAT;AAEA,IAAMC,QAAQ,gBAAGF,GAAG,CAAC;AACjBG,EAAAA,QAAQ,EAAE,QADO;AAEjBC,EAAAA,MAAM,EAAE;AAFS,CAAD,oBAApB;AAUA,OAAO,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,GAAsB;AAChD,kBAAkCN,QAAQ,CAAU,KAAV,CAA1C;AAAA;AAAA,MAAOO,SAAP;AAAA,MAAkBC,YAAlB;;AAEAT,EAAAA,SAAS,CAAC,YAAM;AACZ,QAAIQ,SAAJ,EAAe;AACXL,MAAAA,WAAW,CAACO,WAAZ;AACAC,MAAAA,QAAQ,CAACC,IAAT,CAAcC,SAAd,CAAwBC,GAAxB,CAA4BV,QAA5B;AACH,KAHD,MAGO,IAAI,CAACD,WAAW,CAACO,WAAjB,EAA8B;AACjCC,MAAAA,QAAQ,CAACC,IAAT,CAAcC,SAAd,CAAwBE,MAAxB,CAA+BX,QAA/B;AACH;AACJ,GAPQ,EAON,CAACI,SAAD,CAPM,CAAT;AASAR,EAAAA,SAAS,CAAC,YAAM;AACZ,WAAO,YAAM;AACT,UAAIG,WAAW,CAACO,WAAZ,GAA0B,CAA9B,EAAiC;AAC7BP,QAAAA,WAAW,CAACO,WAAZ;AACH;;AACD,UAAI,CAACP,WAAW,CAACO,WAAjB,EAA8B;AAC1BC,QAAAA,QAAQ,CAACC,IAAT,CAAcC,SAAd,CAAwBE,MAAxB,CAA+BX,QAA/B;AACH;AACJ,KAPD;AAQH,GATQ,EASN,EATM,CAAT;AAWA,SAAO;AAAEI,IAAAA,SAAS,EAATA,SAAF;AAAaC,IAAAA,YAAY,EAAZA;AAAb,GAAP;AACH,CAxBM","sourcesContent":["import { useEffect, useState } from \"react\";\nimport { css } from \"emotion\";\nimport { OverlayView } from \"../OverlayView\";\n\nconst noScroll = css({\n    overflow: \"hidden\",\n    height: \"100vh\"\n});\n\nexport interface UseOverlayView {\n    isVisible: boolean;\n    setIsVisible: (value: boolean) => void;\n}\n\nexport const useOverlayView = (): UseOverlayView => {\n    const [isVisible, setIsVisible] = useState<boolean>(false);\n\n    useEffect(() => {\n        if (isVisible) {\n            OverlayView.openedViews++;\n            document.body.classList.add(noScroll);\n        } else if (!OverlayView.openedViews) {\n            document.body.classList.remove(noScroll);\n        }\n    }, [isVisible]);\n\n    useEffect(() => {\n        return () => {\n            if (OverlayView.openedViews > 0) {\n                OverlayView.openedViews--;\n            }\n            if (!OverlayView.openedViews) {\n                document.body.classList.remove(noScroll);\n            }\n        };\n    }, []);\n\n    return { isVisible, setIsVisible };\n};\n"]}
+{"version":3,"names":["noScroll","css","overflow","height","useOverlayView","useState","isVisible","setIsVisible","useEffect","OverlayView","openedViews","document","body","classList","add","remove"],"sources":["useOverlayView.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { css } from \"emotion\";\nimport { OverlayView } from \"../OverlayView\";\n\nconst noScroll = css({\n    overflow: \"hidden\",\n    height: \"100vh\"\n});\n\nexport interface UseOverlayView {\n    isVisible: boolean;\n    setIsVisible: (value: boolean) => void;\n}\n\nexport const useOverlayView = (): UseOverlayView => {\n    const [isVisible, setIsVisible] = useState<boolean>(false);\n\n    useEffect(() => {\n        if (isVisible) {\n            OverlayView.openedViews++;\n            document.body.classList.add(noScroll);\n        } else if (!OverlayView.openedViews) {\n            document.body.classList.remove(noScroll);\n        }\n    }, [isVisible]);\n\n    useEffect(() => {\n        return () => {\n            if (OverlayView.openedViews > 0) {\n                OverlayView.openedViews--;\n            }\n            if (!OverlayView.openedViews) {\n                document.body.classList.remove(noScroll);\n            }\n        };\n    }, []);\n\n    return { isVisible, setIsVisible };\n};\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA,IAAMA,QAAQ,gBAAG,IAAAC,YAAA,EAAI;EACjBC,QAAQ,EAAE,QADO;EAEjBC,MAAM,EAAE;AAFS,CAAJ,oBAAjB;;AAUO,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,GAAsB;EAChD,gBAAkC,IAAAC,eAAA,EAAkB,KAAlB,CAAlC;EAAA;EAAA,IAAOC,SAAP;EAAA,IAAkBC,YAAlB;;EAEA,IAAAC,gBAAA,EAAU,YAAM;IACZ,IAAIF,SAAJ,EAAe;MACXG,wBAAA,CAAYC,WAAZ;MACAC,QAAQ,CAACC,IAAT,CAAcC,SAAd,CAAwBC,GAAxB,CAA4Bd,QAA5B;IACH,CAHD,MAGO,IAAI,CAACS,wBAAA,CAAYC,WAAjB,EAA8B;MACjCC,QAAQ,CAACC,IAAT,CAAcC,SAAd,CAAwBE,MAAxB,CAA+Bf,QAA/B;IACH;EACJ,CAPD,EAOG,CAACM,SAAD,CAPH;EASA,IAAAE,gBAAA,EAAU,YAAM;IACZ,OAAO,YAAM;MACT,IAAIC,wBAAA,CAAYC,WAAZ,GAA0B,CAA9B,EAAiC;QAC7BD,wBAAA,CAAYC,WAAZ;MACH;;MACD,IAAI,CAACD,wBAAA,CAAYC,WAAjB,EAA8B;QAC1BC,QAAQ,CAACC,IAAT,CAAcC,SAAd,CAAwBE,MAAxB,CAA+Bf,QAA/B;MACH;IACJ,CAPD;EAQH,CATD,EASG,EATH;EAWA,OAAO;IAAEM,SAAS,EAATA,SAAF;IAAaC,YAAY,EAAZA;EAAb,CAAP;AACH,CAxBM"}

package/ui/views/OverlayView.js

@@ -1,23 +1,49 @@
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _get from "@babel/runtime/helpers/get";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _createSuper from "@babel/runtime/helpers/createSuper";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from "react";
-import { Transition } from "react-transition-group";
-import styled from "@emotion/styled";
-import { UIView } from "../UIView";
-import { useOverlayView } from "./OverlayView/useOverlayView";
-import { HeaderElement } from "./OverlayView/HeaderElement";
-import { ContentElement } from "./OverlayView/ContentElement"; // !GOOD FIRST ISSUE!
-// Extract rendering and styling into an OverlayViewRenderer class.
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.OverlayView = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var OverlayLayoutWrapper = /*#__PURE__*/styled("div", {
+var _react = _interopRequireDefault(require("react"));
+
+var _reactTransitionGroup = require("react-transition-group");
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _UIView2 = require("../UIView");
+
+var _useOverlayView = require("./OverlayView/useOverlayView");
+
+var _HeaderElement = require("./OverlayView/HeaderElement");
+
+var _ContentElement = require("./OverlayView/ContentElement");
+
+// !GOOD FIRST ISSUE!
+// Extract rendering and styling into an OverlayViewRenderer class.
+var OverlayLayoutWrapper = /*#__PURE__*/(0, _styled.default)("div", {
   target: "e1xrojct0",
   label: "OverlayLayoutWrapper"
 })({
@@ -52,10 +78,11 @@ var transitionStyles = {
     opacity: 1
   }
 };
-export var OverlayView = /*#__PURE__*/function (_UIView) {
-  _inherits(OverlayView, _UIView);
 
-  var _super = _createSuper(OverlayView);
+var OverlayView = /*#__PURE__*/function (_UIView) {
+  (0, _inherits2.default)(OverlayView, _UIView);
+
+  var _super = (0, _createSuper2.default)(OverlayView);
 
   /**
    * This property is used to track the amount of opened overlays. Since we're applying a CSS class to disable
@@ -65,33 +92,29 @@ export var OverlayView = /*#__PURE__*/function (_UIView) {
     var _this;
 
     var id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "OverlayView";
-
-    _classCallCheck(this, OverlayView);
-
+    (0, _classCallCheck2.default)(this, OverlayView);
     _this = _super.call(this, id);
-
-    _defineProperty(_assertThisInitialized(_this), "_onEntered", []);
-
-    _defineProperty(_assertThisInitialized(_this), "_onExited", []);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "_onEntered", []);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "_onExited", []);
 
     _this.useGrid(false);
 
-    _this.addHookDefinition("overlay", useOverlayView);
+    _this.addHookDefinition("overlay", _useOverlayView.useOverlayView);
 
-    _this.addElement(new HeaderElement("overlayHeader", {
+    _this.addElement(new _HeaderElement.HeaderElement("overlayHeader", {
       onClose: function onClose() {
         return _this.setIsVisible(false);
       }
     }));
 
-    _this.addElement(new ContentElement("overlayContent"));
+    _this.addElement(new _ContentElement.ContentElement("overlayContent"));
 
     _this.applyPlugins(OverlayView);
 
     return _this;
   }
 
-  _createClass(OverlayView, [{
+  (0, _createClass2.default)(OverlayView, [{
     key: "setTitle",
     value: function setTitle(title) {
       this.getHeaderElement().setTitle(title);
@@ -101,7 +124,7 @@ export var OverlayView = /*#__PURE__*/function (_UIView) {
     value: function onEntered() {
       var _this2 = this;
 
-      _toConsumableArray(this._onEntered).reverse().forEach(function (cb) {
+      (0, _toConsumableArray2.default)(this._onEntered).reverse().forEach(function (cb) {
         return cb(_this2);
       });
     }
@@ -110,7 +133,7 @@ export var OverlayView = /*#__PURE__*/function (_UIView) {
     value: function onExited() {
       var _this3 = this;
 
-      _toConsumableArray(this._onExited).reverse().forEach(function (cb) {
+      (0, _toConsumableArray2.default)(this._onExited).reverse().forEach(function (cb) {
         return cb(_this3);
       });
     }
@@ -152,7 +175,7 @@ export var OverlayView = /*#__PURE__*/function (_UIView) {
       var _this$getOverlayHook = this.getOverlayHook(),
           isVisible = _this$getOverlayHook.isVisible;
 
-      return /*#__PURE__*/React.createElement(Transition, {
+      return /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.Transition, {
         in: isVisible,
         timeout: 100,
         appear: true,
@@ -163,14 +186,14 @@ export var OverlayView = /*#__PURE__*/function (_UIView) {
           return _this4.onEntered();
         }
       }, function (state) {
-        return /*#__PURE__*/React.createElement(OverlayLayoutWrapper, {
-          style: _objectSpread(_objectSpread({}, defaultStyle), transitionStyles[state])
-        }, _get(_getPrototypeOf(OverlayView.prototype), "render", _this4).call(_this4, props));
+        return /*#__PURE__*/_react.default.createElement(OverlayLayoutWrapper, {
+          style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, defaultStyle), transitionStyles[state])
+        }, (0, _get2.default)((0, _getPrototypeOf2.default)(OverlayView.prototype), "render", _this4).call(_this4, props));
       });
     }
   }]);
-
   return OverlayView;
-}(UIView);
+}(_UIView2.UIView);
 
-_defineProperty(OverlayView, "openedViews", 0);
+exports.OverlayView = OverlayView;
+(0, _defineProperty2.default)(OverlayView, "openedViews", 0);

package/ui/views/OverlayView.js.map

@@ -1 +1 @@
-{"version":3,"sources":["OverlayView.tsx"],"names":["React","Transition","styled","UIView","useOverlayView","HeaderElement","ContentElement","OverlayLayoutWrapper","position","width","height","backgroundColor","zIndex","top","left","defaultStyle","transform","opacity","transitionProperty","transitionTimingFunction","transitionDuration","willChange","transitionStyles","entering","entered","OverlayView","id","useGrid","addHookDefinition","addElement","onClose","setIsVisible","applyPlugins","title","getHeaderElement","setTitle","_onEntered","reverse","forEach","cb","_onExited","push","getHook","visible","getOverlayHook","getElement","props","isVisible","onExited","onEntered","state"],"mappings":"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","sourcesContent":["import React from \"react\";\nimport { Transition } from \"react-transition-group\";\nimport styled from \"@emotion/styled\";\nimport { UIView, UIViewProps } from \"~/ui/UIView\";\nimport { UseOverlayView, useOverlayView } from \"./OverlayView/useOverlayView\";\nimport { HeaderElement } from \"./OverlayView/HeaderElement\";\nimport { ContentElement } from \"./OverlayView/ContentElement\";\n\n// !GOOD FIRST ISSUE!\n// Extract rendering and styling into an OverlayViewRenderer class.\n\nconst OverlayLayoutWrapper = styled(\"div\")({\n    position: \"fixed\",\n    width: \"100%\",\n    height: \"100vh\",\n    backgroundColor: \"var(--mdc-theme-background)\",\n    /**\n     * Has to be higher than 5 so it's above advanced settings dialog,\n     * and below 20, so the image editor & Dialogs can be displayed above.\n     */\n    zIndex: 18,\n    top: 0,\n    left: 0\n});\n\nconst defaultStyle: Record<string, string | number> = {\n    transform: \"translateY(75vh)\",\n    opacity: 0,\n    transitionProperty: \"transform, opacity\",\n    transitionTimingFunction: \"cubic-bezier(0, 0, .2, 1)\",\n    transitionDuration: \"225ms\",\n    willChange: \"opacity, transform\"\n};\n\nconst transitionStyles: Record<string, any> = {\n    entering: {\n        transform: \"translateY(75vh)\",\n        opacity: 0\n    },\n    entered: {\n        transform: \"translateY(0px)\",\n        opacity: 1\n    }\n};\n\ninterface OnExited {\n    (view: OverlayView): void;\n}\n\ninterface OnEntered {\n    (view: OverlayView): void;\n}\n\nexport class OverlayView extends UIView {\n    /**\n     * This property is used to track the amount of opened overlays. Since we're applying a CSS class to disable\n     * window scroll, we must make sure we don't remove that CSS class until all the overlays are closed.\n     */\n    static openedViews = 0;\n    private _onEntered: OnEntered[] = [];\n    private _onExited: OnExited[] = [];\n\n    public constructor(id = \"OverlayView\") {\n        super(id);\n        this.useGrid(false);\n\n        this.addHookDefinition(\"overlay\", useOverlayView);\n\n        this.addElement(\n            new HeaderElement(\"overlayHeader\", {\n                onClose: () => this.setIsVisible(false)\n            })\n        );\n\n        this.addElement(new ContentElement(\"overlayContent\"));\n\n        this.applyPlugins(OverlayView);\n    }\n\n    public setTitle(title: () => string): void {\n        this.getHeaderElement().setTitle(title);\n    }\n\n    public onEntered(): void {\n        [...this._onEntered].reverse().forEach(cb => cb(this));\n    }\n\n    public onExited(): void {\n        [...this._onExited].reverse().forEach(cb => cb(this));\n    }\n\n    public addOnEntered(cb: OnExited): void {\n        this._onEntered.push(cb);\n    }\n\n    public addOnExited(cb: OnExited): void {\n        this._onExited.push(cb);\n    }\n\n    public getOverlayHook(): UseOverlayView {\n        return this.getHook<UseOverlayView>(\"overlay\");\n    }\n\n    public setIsVisible(visible: boolean): void {\n        this.getOverlayHook().setIsVisible(visible);\n    }\n\n    public getHeaderElement(): HeaderElement {\n        return this.getElement(\"overlayHeader\") as HeaderElement;\n    }\n\n    public getContentElement(): ContentElement {\n        return this.getElement(\"overlayContent\") as HeaderElement;\n    }\n\n    public override render(props: UIViewProps): React.ReactNode {\n        const { isVisible } = this.getOverlayHook();\n        return (\n            <Transition\n                in={isVisible}\n                timeout={100}\n                appear\n                onExited={() => this.onExited()}\n                onEntered={() => this.onEntered()}\n            >\n                {state => (\n                    <OverlayLayoutWrapper style={{ ...defaultStyle, ...transitionStyles[state] }}>\n                        {super.render(props)}\n                    </OverlayLayoutWrapper>\n                )}\n            </Transition>\n        );\n    }\n}\n"]}
+{"version":3,"names":["OverlayLayoutWrapper","styled","position","width","height","backgroundColor","zIndex","top","left","defaultStyle","transform","opacity","transitionProperty","transitionTimingFunction","transitionDuration","willChange","transitionStyles","entering","entered","OverlayView","id","useGrid","addHookDefinition","useOverlayView","addElement","HeaderElement","onClose","setIsVisible","ContentElement","applyPlugins","title","getHeaderElement","setTitle","_onEntered","reverse","forEach","cb","_onExited","push","getHook","visible","getOverlayHook","getElement","props","isVisible","onExited","onEntered","state","UIView"],"sources":["OverlayView.tsx"],"sourcesContent":["import React from \"react\";\nimport { Transition } from \"react-transition-group\";\nimport styled from \"@emotion/styled\";\nimport { UIView, UIViewProps } from \"~/ui/UIView\";\nimport { UseOverlayView, useOverlayView } from \"./OverlayView/useOverlayView\";\nimport { HeaderElement } from \"./OverlayView/HeaderElement\";\nimport { ContentElement } from \"./OverlayView/ContentElement\";\n\n// !GOOD FIRST ISSUE!\n// Extract rendering and styling into an OverlayViewRenderer class.\n\nconst OverlayLayoutWrapper = styled(\"div\")({\n    position: \"fixed\",\n    width: \"100%\",\n    height: \"100vh\",\n    backgroundColor: \"var(--mdc-theme-background)\",\n    /**\n     * Has to be higher than 5 so it's above advanced settings dialog,\n     * and below 20, so the image editor & Dialogs can be displayed above.\n     */\n    zIndex: 18,\n    top: 0,\n    left: 0\n});\n\nconst defaultStyle: Record<string, string | number> = {\n    transform: \"translateY(75vh)\",\n    opacity: 0,\n    transitionProperty: \"transform, opacity\",\n    transitionTimingFunction: \"cubic-bezier(0, 0, .2, 1)\",\n    transitionDuration: \"225ms\",\n    willChange: \"opacity, transform\"\n};\n\nconst transitionStyles: Record<string, any> = {\n    entering: {\n        transform: \"translateY(75vh)\",\n        opacity: 0\n    },\n    entered: {\n        transform: \"translateY(0px)\",\n        opacity: 1\n    }\n};\n\ninterface OnExited {\n    (view: OverlayView): void;\n}\n\ninterface OnEntered {\n    (view: OverlayView): void;\n}\n\nexport class OverlayView extends UIView {\n    /**\n     * This property is used to track the amount of opened overlays. Since we're applying a CSS class to disable\n     * window scroll, we must make sure we don't remove that CSS class until all the overlays are closed.\n     */\n    static openedViews = 0;\n    private _onEntered: OnEntered[] = [];\n    private _onExited: OnExited[] = [];\n\n    public constructor(id = \"OverlayView\") {\n        super(id);\n        this.useGrid(false);\n\n        this.addHookDefinition(\"overlay\", useOverlayView);\n\n        this.addElement(\n            new HeaderElement(\"overlayHeader\", {\n                onClose: () => this.setIsVisible(false)\n            })\n        );\n\n        this.addElement(new ContentElement(\"overlayContent\"));\n\n        this.applyPlugins(OverlayView);\n    }\n\n    public setTitle(title: () => string): void {\n        this.getHeaderElement().setTitle(title);\n    }\n\n    public onEntered(): void {\n        [...this._onEntered].reverse().forEach(cb => cb(this));\n    }\n\n    public onExited(): void {\n        [...this._onExited].reverse().forEach(cb => cb(this));\n    }\n\n    public addOnEntered(cb: OnExited): void {\n        this._onEntered.push(cb);\n    }\n\n    public addOnExited(cb: OnExited): void {\n        this._onExited.push(cb);\n    }\n\n    public getOverlayHook(): UseOverlayView {\n        return this.getHook<UseOverlayView>(\"overlay\");\n    }\n\n    public setIsVisible(visible: boolean): void {\n        this.getOverlayHook().setIsVisible(visible);\n    }\n\n    public getHeaderElement(): HeaderElement {\n        return this.getElement(\"overlayHeader\") as HeaderElement;\n    }\n\n    public getContentElement(): ContentElement {\n        return this.getElement(\"overlayContent\") as HeaderElement;\n    }\n\n    public override render(props: UIViewProps): React.ReactNode {\n        const { isVisible } = this.getOverlayHook();\n        return (\n            <Transition\n                in={isVisible}\n                timeout={100}\n                appear\n                onExited={() => this.onExited()}\n                onEntered={() => this.onEntered()}\n            >\n                {state => (\n                    <OverlayLayoutWrapper style={{ ...defaultStyle, ...transitionStyles[state] }}>\n                        {super.render(props)}\n                    </OverlayLayoutWrapper>\n                )}\n            </Transition>\n        );\n    }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA;AACA;AAEA,IAAMA,oBAAoB,oBAAGC,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,GAAiB;EACvCC,QAAQ,EAAE,OAD6B;EAEvCC,KAAK,EAAE,MAFgC;EAGvCC,MAAM,EAAE,OAH+B;EAIvCC,eAAe,EAAE,6BAJsB;;EAKvC;AACJ;AACA;AACA;EACIC,MAAM,EAAE,EAT+B;EAUvCC,GAAG,EAAE,CAVkC;EAWvCC,IAAI,EAAE;AAXiC,CAAjB,CAA1B;AAcA,IAAMC,YAA6C,GAAG;EAClDC,SAAS,EAAE,kBADuC;EAElDC,OAAO,EAAE,CAFyC;EAGlDC,kBAAkB,EAAE,oBAH8B;EAIlDC,wBAAwB,EAAE,2BAJwB;EAKlDC,kBAAkB,EAAE,OAL8B;EAMlDC,UAAU,EAAE;AANsC,CAAtD;AASA,IAAMC,gBAAqC,GAAG;EAC1CC,QAAQ,EAAE;IACNP,SAAS,EAAE,kBADL;IAENC,OAAO,EAAE;EAFH,CADgC;EAK1CO,OAAO,EAAE;IACLR,SAAS,EAAE,iBADN;IAELC,OAAO,EAAE;EAFJ;AALiC,CAA9C;;IAmBaQ,W;;;;;EACT;AACJ;AACA;AACA;EAKI,uBAAuC;IAAA;;IAAA,IAApBC,EAAoB,uEAAf,aAAe;IAAA;IACnC,0BAAMA,EAAN;IADmC,yFAHL,EAGK;IAAA,wFAFP,EAEO;;IAEnC,MAAKC,OAAL,CAAa,KAAb;;IAEA,MAAKC,iBAAL,CAAuB,SAAvB,EAAkCC,8BAAlC;;IAEA,MAAKC,UAAL,CACI,IAAIC,4BAAJ,CAAkB,eAAlB,EAAmC;MAC/BC,OAAO,EAAE;QAAA,OAAM,MAAKC,YAAL,CAAkB,KAAlB,CAAN;MAAA;IADsB,CAAnC,CADJ;;IAMA,MAAKH,UAAL,CAAgB,IAAII,8BAAJ,CAAmB,gBAAnB,CAAhB;;IAEA,MAAKC,YAAL,CAAkBV,WAAlB;;IAdmC;EAetC;;;;WAED,kBAAgBW,KAAhB,EAA2C;MACvC,KAAKC,gBAAL,GAAwBC,QAAxB,CAAiCF,KAAjC;IACH;;;WAED,qBAAyB;MAAA;;MACrB,iCAAI,KAAKG,UAAT,EAAqBC,OAArB,GAA+BC,OAA/B,CAAuC,UAAAC,EAAE;QAAA,OAAIA,EAAE,CAAC,MAAD,CAAN;MAAA,CAAzC;IACH;;;WAED,oBAAwB;MAAA;;MACpB,iCAAI,KAAKC,SAAT,EAAoBH,OAApB,GAA8BC,OAA9B,CAAsC,UAAAC,EAAE;QAAA,OAAIA,EAAE,CAAC,MAAD,CAAN;MAAA,CAAxC;IACH;;;WAED,sBAAoBA,EAApB,EAAwC;MACpC,KAAKH,UAAL,CAAgBK,IAAhB,CAAqBF,EAArB;IACH;;;WAED,qBAAmBA,EAAnB,EAAuC;MACnC,KAAKC,SAAL,CAAeC,IAAf,CAAoBF,EAApB;IACH;;;WAED,0BAAwC;MACpC,OAAO,KAAKG,OAAL,CAA6B,SAA7B,CAAP;IACH;;;WAED,sBAAoBC,OAApB,EAA4C;MACxC,KAAKC,cAAL,GAAsBd,YAAtB,CAAmCa,OAAnC;IACH;;;WAED,4BAAyC;MACrC,OAAO,KAAKE,UAAL,CAAgB,eAAhB,CAAP;IACH;;;WAED,6BAA2C;MACvC,OAAO,KAAKA,UAAL,CAAgB,gBAAhB,CAAP;IACH;;;WAED,gBAAuBC,KAAvB,EAA4D;MAAA;;MACxD,2BAAsB,KAAKF,cAAL,EAAtB;MAAA,IAAQG,SAAR,wBAAQA,SAAR;;MACA,oBACI,6BAAC,gCAAD;QACI,EAAE,EAAEA,SADR;QAEI,OAAO,EAAE,GAFb;QAGI,MAAM,MAHV;QAII,QAAQ,EAAE;UAAA,OAAM,MAAI,CAACC,QAAL,EAAN;QAAA,CAJd;QAKI,SAAS,EAAE;UAAA,OAAM,MAAI,CAACC,SAAL,EAAN;QAAA;MALf,GAOK,UAAAC,KAAK;QAAA,oBACF,6BAAC,oBAAD;UAAsB,KAAK,8DAAOtC,YAAP,GAAwBO,gBAAgB,CAAC+B,KAAD,CAAxC;QAA3B,2GACkBJ,KADlB,EADE;MAAA,CAPV,CADJ;IAeH;;;EA/E4BK,e;;;8BAApB7B,W,iBAKY,C"}