@webiny/app-admin 5.43.2 → 6.0.0-alpha.0

package/ui/views/OverlayView/HeaderElement.js

@@ -1,109 +1,72 @@
-"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 _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/callSuper"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-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("@material-design-icons/svg/outlined/close.svg");
-var _PlaceholderElement = require("../../elements/PlaceholderElement");
-var _HeaderTitleElement = require("./HeaderTitleElement");
-var width = (0, _emotion.css)({
+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 "@webiny/icons/close.svg";
+import { PlaceholderElement } from "../../elements/PlaceholderElement";
+import { HeaderTitleElement } from "./HeaderTitleElement";
+const width = css({
   width: "33%"
 });
 
 // !GOOD FIRST ISSUE!
 // Extract rendering and styling into a HeaderElementRenderer class.
-var HeaderElement = exports.HeaderElement = /*#__PURE__*/function (_UIElement) {
-  function HeaderElement(id, config) {
-    var _this;
-    (0, _classCallCheck2.default)(this, HeaderElement);
-    _this = (0, _callSuper2.default)(this, HeaderElement, [id, config]);
-    (0, _defineProperty2.default)(_this, "_leftSection", new _PlaceholderElement.PlaceholderElement("leftSection"));
-    (0, _defineProperty2.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;
+
+export class HeaderElement extends UIElement {
+  _leftSection = new PlaceholderElement("leftSection");
+  _rightSection = new PlaceholderElement("rightSection");
+  constructor(id, config) {
+    super(id, config);
+    this._centerSection = new HeaderTitleElement("title", {
+      title: () => {
+        return typeof this.config.getTitle === "function" ? this.config.getTitle() : null;
       }
     });
-    _this.useGrid(false);
-    return _this;
+    this.useGrid(false);
+  }
+  setTitle(title) {
+    this.config.getTitle = title;
+  }
+  setLeftSectionElement(element) {
+    this._leftSection = element;
+  }
+  setCenterSectionElement(element) {
+    this._centerSection = element;
+  }
+  setRightSectionElement(element) {
+    this._rightSection = element;
+  }
+  getLeftSectionElement() {
+    return this._leftSection;
+  }
+  getCenterSectionElement() {
+    return this._centerSection;
+  }
+  getRightSectionElement() {
+    return this._rightSection;
+  }
+  render(props) {
+    return /*#__PURE__*/React.createElement(TopAppBarSecondary, {
+      fixed: true,
+      style: {
+        top: 0
+      }
+    }, /*#__PURE__*/React.createElement(TopAppBarSection, {
+      className: width,
+      alignStart: true
+    }, this.getLeftSectionElement().render(props)), /*#__PURE__*/React.createElement(TopAppBarSection, {
+      className: width,
+      alignEnd: true
+    }, this.getCenterSectionElement().render(props)), /*#__PURE__*/React.createElement(TopAppBarSection, {
+      className: width,
+      alignEnd: true
+    }, this.getRightSectionElement().render(props), /*#__PURE__*/React.createElement(IconButton, {
+      ripple: false,
+      onClick: this.config.onClose,
+      icon: /*#__PURE__*/React.createElement(CloseIcon, null)
+    })));
   }
-  (0, _inherits2.default)(HeaderElement, _UIElement);
-  return (0, _createClass2.default)(HeaderElement, [{
-    key: "setTitle",
-    value: function setTitle(title) {
-      this.config.getTitle = title;
-    }
-  }, {
-    key: "setLeftSectionElement",
-    value: function setLeftSectionElement(element) {
-      this._leftSection = element;
-    }
-  }, {
-    key: "setCenterSectionElement",
-    value: function setCenterSectionElement(element) {
-      this._centerSection = element;
-    }
-  }, {
-    key: "setRightSectionElement",
-    value: function setRightSectionElement(element) {
-      this._rightSection = element;
-    }
-  }, {
-    key: "getLeftSectionElement",
-    value: function getLeftSectionElement() {
-      return this._leftSection;
-    }
-  }, {
-    key: "getCenterSectionElement",
-    value: function getCenterSectionElement() {
-      return this._centerSection;
-    }
-  }, {
-    key: "getRightSectionElement",
-    value: function getRightSectionElement() {
-      return this._rightSection;
-    }
-  }, {
-    key: "render",
-    value: function render(props) {
-      return /*#__PURE__*/_react.default.createElement(_TopAppBar.TopAppBarSecondary, {
-        fixed: true,
-        style: {
-          top: 0
-        }
-      }, /*#__PURE__*/_react.default.createElement(_TopAppBar.TopAppBarSection, {
-        className: width,
-        alignStart: true
-      }, this.getLeftSectionElement().render(props)), /*#__PURE__*/_react.default.createElement(_TopAppBar.TopAppBarSection, {
-        className: width,
-        alignEnd: true
-      }, this.getCenterSectionElement().render(props)), /*#__PURE__*/_react.default.createElement(_TopAppBar.TopAppBarSection, {
-        className: width,
-        alignEnd: true
-      }, this.getRightSectionElement().render(props), /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
-        ripple: false,
-        onClick: this.config.onClose,
-        icon: /*#__PURE__*/_react.default.createElement(_close.ReactComponent, {
-          style: {
-            width: 24,
-            height: 24
-          }
-        })
-      })));
-    }
-  }]);
-}(_UIElement2.UIElement);
+}
 
 //# sourceMappingURL=HeaderElement.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_emotion","_UIElement2","_TopAppBar","_Button","_close","_PlaceholderElement","_HeaderTitleElement","width","css","HeaderElement","exports","_UIElement","id","config","_this","_classCallCheck2","default","_callSuper2","_defineProperty2","PlaceholderElement","_centerSection","HeaderTitleElement","title","getTitle","useGrid","_inherits2","_createClass2","key","value","setTitle","setLeftSectionElement","element","_leftSection","setCenterSectionElement","setRightSectionElement","_rightSection","getLeftSectionElement","getCenterSectionElement","getRightSectionElement","render","props","createElement","TopAppBarSecondary","fixed","style","top","TopAppBarSection","className","alignStart","alignEnd","IconButton","ripple","onClick","onClose","icon","ReactComponent","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 \"@material-design-icons/svg/outlined/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":"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","ignoreList":[]}
+{"version":3,"names":["React","css","UIElement","TopAppBarSecondary","TopAppBarSection","IconButton","ReactComponent","CloseIcon","PlaceholderElement","HeaderTitleElement","width","HeaderElement","_leftSection","_rightSection","constructor","id","config","_centerSection","title","getTitle","useGrid","setTitle","setLeftSectionElement","element","setCenterSectionElement","setRightSectionElement","getLeftSectionElement","getCenterSectionElement","getRightSectionElement","render","props","createElement","fixed","style","top","className","alignStart","alignEnd","ripple","onClick","onClose","icon"],"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 \"@webiny/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 ripple={false} onClick={this.config.onClose} icon={<CloseIcon />} />\n                </TopAppBarSection>\n            </TopAppBarSecondary>\n        );\n    }\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,GAAG,QAAQ,SAAS;AAC7B,SAASC,SAAS;AAClB,SAASC,kBAAkB,EAAEC,gBAAgB,QAAQ,sBAAsB;AAC3E,SAASC,UAAU,QAAQ,mBAAmB;AAC9C,SAASC,cAAc,IAAIC,SAAS,QAAQ,yBAAyB;AACrE,SAASC,kBAAkB;AAC3B,SAASC,kBAAkB;AAO3B,MAAMC,KAAK,GAAGT,GAAG,CAAC;EACdS,KAAK,EAAE;AACX,CAAC,CAAC;;AAEF;AACA;;AAMA,OAAO,MAAMC,aAAa,SAAST,SAAS,CAAsB;EACtDU,YAAY,GAAc,IAAIJ,kBAAkB,CAAC,aAAa,CAAC;EAE/DK,aAAa,GAAc,IAAIL,kBAAkB,CAAC,cAAc,CAAC;EAElEM,WAAWA,CAACC,EAAU,EAAEC,MAA2B,EAAE;IACxD,KAAK,CAACD,EAAE,EAAEC,MAAM,CAAC;IAEjB,IAAI,CAACC,cAAc,GAAG,IAAIR,kBAAkB,CAAC,OAAO,EAAE;MAClDS,KAAK,EAAEA,CAAA,KAAM;QACT,OAAO,OAAO,IAAI,CAACF,MAAM,CAACG,QAAQ,KAAK,UAAU,GAAG,IAAI,CAACH,MAAM,CAACG,QAAQ,CAAC,CAAC,GAAG,IAAI;MACrF;IACJ,CAAC,CAAC;IAEF,IAAI,CAACC,OAAO,CAAC,KAAK,CAAC;EACvB;EAEOC,QAAQA,CAACH,KAAiC,EAAQ;IACrD,IAAI,CAACF,MAAM,CAACG,QAAQ,GAAGD,KAAK;EAChC;EAEOI,qBAAqBA,CAACC,OAAkB,EAAQ;IACnD,IAAI,CAACX,YAAY,GAAGW,OAAO;EAC/B;EAEOC,uBAAuBA,CAACD,OAAkB,EAAQ;IACrD,IAAI,CAACN,cAAc,GAAGM,OAAO;EACjC;EAEOE,sBAAsBA,CAACF,OAAkB,EAAQ;IACpD,IAAI,CAACV,aAAa,GAAGU,OAAO;EAChC;EAEOG,qBAAqBA,CAAA,EAAc;IACtC,OAAO,IAAI,CAACd,YAAY;EAC5B;EAEOe,uBAAuBA,CAAA,EAAc;IACxC,OAAO,IAAI,CAACV,cAAc;EAC9B;EAEOW,sBAAsBA,CAAA,EAAc;IACvC,OAAO,IAAI,CAACf,aAAa;EAC7B;EAEgBgB,MAAMA,CAACC,KAA2B,EAAmB;IACjE,oBACI9B,KAAA,CAAA+B,aAAA,CAAC5B,kBAAkB;MAAC6B,KAAK;MAACC,KAAK,EAAE;QAAEC,GAAG,EAAE;MAAE;IAAE,gBACxClC,KAAA,CAAA+B,aAAA,CAAC3B,gBAAgB;MAAC+B,SAAS,EAAEzB,KAAM;MAAC0B,UAAU;IAAA,GACzC,IAAI,CAACV,qBAAqB,CAAC,CAAC,CAACG,MAAM,CAACC,KAAK,CAC5B,CAAC,eACnB9B,KAAA,CAAA+B,aAAA,CAAC3B,gBAAgB;MAAC+B,SAAS,EAAEzB,KAAM;MAAC2B,QAAQ;IAAA,GACvC,IAAI,CAACV,uBAAuB,CAAC,CAAC,CAACE,MAAM,CAACC,KAAK,CAC9B,CAAC,eACnB9B,KAAA,CAAA+B,aAAA,CAAC3B,gBAAgB;MAAC+B,SAAS,EAAEzB,KAAM;MAAC2B,QAAQ;IAAA,GACvC,IAAI,CAACT,sBAAsB,CAAC,CAAC,CAACC,MAAM,CAACC,KAAK,CAAC,eAC5C9B,KAAA,CAAA+B,aAAA,CAAC1B,UAAU;MAACiC,MAAM,EAAE,KAAM;MAACC,OAAO,EAAE,IAAI,CAACvB,MAAM,CAACwB,OAAQ;MAACC,IAAI,eAAEzC,KAAA,CAAA+B,aAAA,CAACxB,SAAS,MAAE;IAAE,CAAE,CACjE,CACF,CAAC;EAE7B;AACJ","ignoreList":[]}

package/ui/views/OverlayView/HeaderTitleElement.js

@@ -1,48 +1,25 @@
-"use strict";
-
-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 _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/callSuper"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _react = _interopRequireDefault(require("react"));
-var _UIElement2 = require("../../UIElement");
-var _Typography = require("@webiny/ui/Typography");
-var _UIRenderer2 = require("../../UIRenderer");
-var HeaderTitleElementRenderer = exports.HeaderTitleElementRenderer = /*#__PURE__*/function (_UIRenderer) {
-  function HeaderTitleElementRenderer() {
-    (0, _classCallCheck2.default)(this, HeaderTitleElementRenderer);
-    return (0, _callSuper2.default)(this, HeaderTitleElementRenderer, arguments);
+import React from "react";
+import { UIElement } from "../../UIElement";
+import { Typography } from "@webiny/ui/Typography";
+import { UIRenderer } from "../../UIRenderer";
+export class HeaderTitleElementRenderer extends UIRenderer {
+  render({
+    element
+  }) {
+    return /*#__PURE__*/React.createElement(Typography, {
+      style: {
+        margin: "0 auto",
+        color: "var(--mdc-theme-on-surface)"
+      },
+      use: "headline6"
+    }, element.config.title());
   }
-  (0, _inherits2.default)(HeaderTitleElementRenderer, _UIRenderer);
-  return (0, _createClass2.default)(HeaderTitleElementRenderer, [{
-    key: "render",
-    value: function render(_ref) {
-      var element = _ref.element;
-      return /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
-        style: {
-          margin: "0 auto",
-          color: "var(--mdc-theme-on-surface)"
-        },
-        use: "headline6"
-      }, element.config.title());
-    }
-  }]);
-}(_UIRenderer2.UIRenderer);
-var HeaderTitleElement = exports.HeaderTitleElement = /*#__PURE__*/function (_UIElement) {
-  function HeaderTitleElement(id, config) {
-    var _this;
-    (0, _classCallCheck2.default)(this, HeaderTitleElement);
-    _this = (0, _callSuper2.default)(this, HeaderTitleElement, [id, config]);
-    _this.addRenderer(new HeaderTitleElementRenderer());
-    return _this;
+}
+export class HeaderTitleElement extends UIElement {
+  constructor(id, config) {
+    super(id, config);
+    this.addRenderer(new HeaderTitleElementRenderer());
   }
-  (0, _inherits2.default)(HeaderTitleElement, _UIElement);
-  return (0, _createClass2.default)(HeaderTitleElement);
-}(_UIElement2.UIElement);
+}
 
 //# sourceMappingURL=HeaderTitleElement.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_UIElement2","_Typography","_UIRenderer2","HeaderTitleElementRenderer","exports","_UIRenderer","_classCallCheck2","default","_callSuper2","arguments","_inherits2","_createClass2","key","value","render","_ref","element","createElement","Typography","style","margin","color","use","config","title","UIRenderer","HeaderTitleElement","_UIElement","id","_this","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,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AACA,IAAAE,WAAA,GAAAF,OAAA;AACA,IAAAG,YAAA,GAAAH,OAAA;AAA6D,IAMhDI,0BAA0B,GAAAC,OAAA,CAAAD,0BAAA,0BAAAE,WAAA;EAAA,SAAAF,2BAAA;IAAA,IAAAG,gBAAA,CAAAC,OAAA,QAAAJ,0BAAA;IAAA,WAAAK,WAAA,CAAAD,OAAA,QAAAJ,0BAAA,EAAAM,SAAA;EAAA;EAAA,IAAAC,UAAA,CAAAH,OAAA,EAAAJ,0BAAA,EAAAE,WAAA;EAAA,WAAAM,aAAA,CAAAJ,OAAA,EAAAJ,0BAAA;IAAAS,GAAA;IAAAC,KAAA,EACnC,SAAgBC,MAAMA,CAAAC,IAAA,EAAmE;MAAA,IAAhEC,OAAO,GAAAD,IAAA,CAAPC,OAAO;MAC5B,oBACInB,MAAA,CAAAU,OAAA,CAAAU,aAAA,CAAChB,WAAA,CAAAiB,UAAU;QACPC,KAAK,EAAE;UAAEC,MAAM,EAAE,QAAQ;UAAEC,KAAK,EAAE;QAA8B,CAAE;QAClEC,GAAG,EAAE;MAAY,GAEhBN,OAAO,CAACO,MAAM,CAACC,KAAK,CAAC,CACd,CAAC;IAErB;EAAC;AAAA,EAV2CC,uBAAU;AAAA,IAa7CC,kBAAkB,GAAAtB,OAAA,CAAAsB,kBAAA,0BAAAC,UAAA;EAC3B,SAAAD,mBAAmBE,EAAU,EAAEL,MAAgC,EAAE;IAAA,IAAAM,KAAA;IAAA,IAAAvB,gBAAA,CAAAC,OAAA,QAAAmB,kBAAA;IAC7DG,KAAA,OAAArB,WAAA,CAAAD,OAAA,QAAAmB,kBAAA,GAAME,EAAE,EAAEL,MAAM;IAEhBM,KAAA,CAAKC,WAAW,CAAC,IAAI3B,0BAA0B,CAAC,CAAC,CAAC;IAAC,OAAA0B,KAAA;EACvD;EAAC,IAAAnB,UAAA,CAAAH,OAAA,EAAAmB,kBAAA,EAAAC,UAAA;EAAA,WAAAhB,aAAA,CAAAJ,OAAA,EAAAmB,kBAAA;AAAA,EALmCK,qBAAS","ignoreList":[]}
+{"version":3,"names":["React","UIElement","Typography","UIRenderer","HeaderTitleElementRenderer","render","element","createElement","style","margin","color","use","config","title","HeaderTitleElement","constructor","id","addRenderer"],"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,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS;AAClB,SAASC,UAAU,QAAQ,uBAAuB;AAClD,SAASC,UAAU;AAMnB,OAAO,MAAMC,0BAA0B,SAASD,UAAU,CAAqB;EAC3DE,MAAMA,CAAC;IAAEC;EAA4C,CAAC,EAAmB;IACrF,oBACIN,KAAA,CAAAO,aAAA,CAACL,UAAU;MACPM,KAAK,EAAE;QAAEC,MAAM,EAAE,QAAQ;QAAEC,KAAK,EAAE;MAA8B,CAAE;MAClEC,GAAG,EAAE;IAAY,GAEhBL,OAAO,CAACM,MAAM,CAACC,KAAK,CAAC,CACd,CAAC;EAErB;AACJ;AAEA,OAAO,MAAMC,kBAAkB,SAASb,SAAS,CAA2B;EACjEc,WAAWA,CAACC,EAAU,EAAEJ,MAAgC,EAAE;IAC7D,KAAK,CAACI,EAAE,EAAEJ,MAAM,CAAC;IAEjB,IAAI,CAACK,WAAW,CAAC,IAAIb,0BAA0B,CAAC,CAAC,CAAC;EACtD;AACJ","ignoreList":[]}

package/ui/views/OverlayView/useOverlayView.js

@@ -1,44 +1,33 @@
-"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 = (0, _emotion.css)({
+import { useEffect, useState } from "react";
+import { css } from "emotion";
+import { OverlayView } from "../OverlayView";
+const noScroll = css({
   overflow: "hidden",
   height: "100vh"
 });
-var useOverlayView = exports.useOverlayView = function useOverlayView() {
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    isVisible = _useState2[0],
-    setIsVisible = _useState2[1];
-  (0, _react.useEffect)(function () {
+export const useOverlayView = () => {
+  const [isVisible, setIsVisible] = useState(false);
+  useEffect(() => {
     if (isVisible) {
-      _OverlayView.OverlayView.openedViews++;
+      OverlayView.openedViews++;
       document.body.classList.add(noScroll);
-    } else if (!_OverlayView.OverlayView.openedViews) {
+    } else if (!OverlayView.openedViews) {
       document.body.classList.remove(noScroll);
     }
   }, [isVisible]);
-  (0, _react.useEffect)(function () {
-    return function () {
-      if (_OverlayView.OverlayView.openedViews > 0) {
-        _OverlayView.OverlayView.openedViews--;
+  useEffect(() => {
+    return () => {
+      if (OverlayView.openedViews > 0) {
+        OverlayView.openedViews--;
       }
-      if (!_OverlayView.OverlayView.openedViews) {
+      if (!OverlayView.openedViews) {
         document.body.classList.remove(noScroll);
       }
     };
   }, []);
   return {
-    isVisible: isVisible,
-    setIsVisible: setIsVisible
+    isVisible,
+    setIsVisible
   };
 };
 

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

@@ -1 +1 @@
-{"version":3,"names":["_react","require","_emotion","_OverlayView","noScroll","css","overflow","height","useOverlayView","exports","_useState","useState","_useState2","_slicedToArray2","default","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,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,YAAA,GAAAF,OAAA;AAEA,IAAMG,QAAQ,GAAG,IAAAC,YAAG,EAAC;EACjBC,QAAQ,EAAE,QAAQ;EAClBC,MAAM,EAAE;AACZ,CAAC,CAAC;AAOK,IAAMC,cAAc,GAAAC,OAAA,CAAAD,cAAA,GAAG,SAAjBA,cAAcA,CAAA,EAAyB;EAChD,IAAAE,SAAA,GAAkC,IAAAC,eAAQ,EAAU,KAAK,CAAC;IAAAC,UAAA,OAAAC,eAAA,CAAAC,OAAA,EAAAJ,SAAA;IAAnDK,SAAS,GAAAH,UAAA;IAAEI,YAAY,GAAAJ,UAAA;EAE9B,IAAAK,gBAAS,EAAC,YAAM;IACZ,IAAIF,SAAS,EAAE;MACXG,wBAAW,CAACC,WAAW,EAAE;MACzBC,QAAQ,CAACC,IAAI,CAACC,SAAS,CAACC,GAAG,CAACnB,QAAQ,CAAC;IACzC,CAAC,MAAM,IAAI,CAACc,wBAAW,CAACC,WAAW,EAAE;MACjCC,QAAQ,CAACC,IAAI,CAACC,SAAS,CAACE,MAAM,CAACpB,QAAQ,CAAC;IAC5C;EACJ,CAAC,EAAE,CAACW,SAAS,CAAC,CAAC;EAEf,IAAAE,gBAAS,EAAC,YAAM;IACZ,OAAO,YAAM;MACT,IAAIC,wBAAW,CAACC,WAAW,GAAG,CAAC,EAAE;QAC7BD,wBAAW,CAACC,WAAW,EAAE;MAC7B;MACA,IAAI,CAACD,wBAAW,CAACC,WAAW,EAAE;QAC1BC,QAAQ,CAACC,IAAI,CAACC,SAAS,CAACE,MAAM,CAACpB,QAAQ,CAAC;MAC5C;IACJ,CAAC;EACL,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO;IAAEW,SAAS,EAATA,SAAS;IAAEC,YAAY,EAAZA;EAAa,CAAC;AACtC,CAAC","ignoreList":[]}
+{"version":3,"names":["useEffect","useState","css","OverlayView","noScroll","overflow","height","useOverlayView","isVisible","setIsVisible","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,SAASA,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAC3C,SAASC,GAAG,QAAQ,SAAS;AAC7B,SAASC,WAAW;AAEpB,MAAMC,QAAQ,GAAGF,GAAG,CAAC;EACjBG,QAAQ,EAAE,QAAQ;EAClBC,MAAM,EAAE;AACZ,CAAC,CAAC;AAOF,OAAO,MAAMC,cAAc,GAAGA,CAAA,KAAsB;EAChD,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAGR,QAAQ,CAAU,KAAK,CAAC;EAE1DD,SAAS,CAAC,MAAM;IACZ,IAAIQ,SAAS,EAAE;MACXL,WAAW,CAACO,WAAW,EAAE;MACzBC,QAAQ,CAACC,IAAI,CAACC,SAAS,CAACC,GAAG,CAACV,QAAQ,CAAC;IACzC,CAAC,MAAM,IAAI,CAACD,WAAW,CAACO,WAAW,EAAE;MACjCC,QAAQ,CAACC,IAAI,CAACC,SAAS,CAACE,MAAM,CAACX,QAAQ,CAAC;IAC5C;EACJ,CAAC,EAAE,CAACI,SAAS,CAAC,CAAC;EAEfR,SAAS,CAAC,MAAM;IACZ,OAAO,MAAM;MACT,IAAIG,WAAW,CAACO,WAAW,GAAG,CAAC,EAAE;QAC7BP,WAAW,CAACO,WAAW,EAAE;MAC7B;MACA,IAAI,CAACP,WAAW,CAACO,WAAW,EAAE;QAC1BC,QAAQ,CAACC,IAAI,CAACC,SAAS,CAACE,MAAM,CAACX,QAAQ,CAAC;MAC5C;IACJ,CAAC;EACL,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO;IAAEI,SAAS;IAAEC;EAAa,CAAC;AACtC,CAAC","ignoreList":[]}

package/ui/views/OverlayView.js

@@ -1,30 +1,16 @@
-"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 _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/callSuper"));
-var _superPropGet2 = _interopRequireDefault(require("@babel/runtime/helpers/superPropGet"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _base = _interopRequireDefault(require("@emotion/styled/base"));
-var _react = _interopRequireDefault(require("react"));
-var _reactTransitionGroup = require("react-transition-group");
-var _UIView2 = require("../UIView");
-var _useOverlayView = require("./OverlayView/useOverlayView");
-var _HeaderElement = require("./OverlayView/HeaderElement");
-var _ContentElement = require("./OverlayView/ContentElement");
+import _styled from "@emotion/styled/base";
 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)."; }
+import React from "react";
+import { Transition } from "react-transition-group";
+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.
 
-var OverlayLayoutWrapper = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "production" ? {
+const OverlayLayoutWrapper = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
   target: "e1xrojct0"
 } : {
   target: "e1xrojct0",
@@ -38,7 +24,7 @@ var OverlayLayoutWrapper = /*#__PURE__*/(0, _base.default)("div", process.env.NO
   map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIk92ZXJsYXlWaWV3LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFXNkIiLCJmaWxlIjoiT3ZlcmxheVZpZXcudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHsgVHJhbnNpdGlvbiB9IGZyb20gXCJyZWFjdC10cmFuc2l0aW9uLWdyb3VwXCI7XG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IFVJVmlldywgVUlWaWV3UHJvcHMgfSBmcm9tIFwifi91aS9VSVZpZXdcIjtcbmltcG9ydCB7IFVzZU92ZXJsYXlWaWV3LCB1c2VPdmVybGF5VmlldyB9IGZyb20gXCIuL092ZXJsYXlWaWV3L3VzZU92ZXJsYXlWaWV3XCI7XG5pbXBvcnQgeyBIZWFkZXJFbGVtZW50IH0gZnJvbSBcIi4vT3ZlcmxheVZpZXcvSGVhZGVyRWxlbWVudFwiO1xuaW1wb3J0IHsgQ29udGVudEVsZW1lbnQgfSBmcm9tIFwiLi9PdmVybGF5Vmlldy9Db250ZW50RWxlbWVudFwiO1xuXG4vLyAhR09PRCBGSVJTVCBJU1NVRSFcbi8vIEV4dHJhY3QgcmVuZGVyaW5nIGFuZCBzdHlsaW5nIGludG8gYW4gT3ZlcmxheVZpZXdSZW5kZXJlciBjbGFzcy5cblxuY29uc3QgT3ZlcmxheUxheW91dFdyYXBwZXIgPSBzdHlsZWQoXCJkaXZcIikoe1xuICAgIHBvc2l0aW9uOiBcImZpeGVkXCIsXG4gICAgd2lkdGg6IFwiMTAwJVwiLFxuICAgIGhlaWdodDogXCIxMDB2aFwiLFxuICAgIGJhY2tncm91bmRDb2xvcjogXCJ2YXIoLS1tZGMtdGhlbWUtYmFja2dyb3VuZClcIixcbiAgICAvKipcbiAgICAgKiBIYXMgdG8gYmUgaGlnaGVyIHRoYW4gNSBzbyBpdCdzIGFib3ZlIGFkdmFuY2VkIHNldHRpbmdzIGRpYWxvZyxcbiAgICAgKiBhbmQgYmVsb3cgMjAsIHNvIHRoZSBpbWFnZSBlZGl0b3IgJiBEaWFsb2dzIGNhbiBiZSBkaXNwbGF5ZWQgYWJvdmUuXG4gICAgICovXG4gICAgekluZGV4OiAyMSxcbiAgICB0b3A6IDAsXG4gICAgbGVmdDogMFxufSk7XG5cbmNvbnN0IGRlZmF1bHRTdHlsZTogUmVjb3JkPHN0cmluZywgc3RyaW5nIHwgbnVtYmVyPiA9IHtcbiAgICB0cmFuc2Zvcm06IFwidHJhbnNsYXRlWSg3NXZoKVwiLFxuICAgIG9wYWNpdHk6IDAsXG4gICAgdHJhbnNpdGlvblByb3BlcnR5OiBcInRyYW5zZm9ybSwgb3BhY2l0eVwiLFxuICAgIHRyYW5zaXRpb25UaW1pbmdGdW5jdGlvbjogXCJjdWJpYy1iZXppZXIoMCwgMCwgLjIsIDEpXCIsXG4gICAgdHJhbnNpdGlvbkR1cmF0aW9uOiBcIjIyNW1zXCIsXG4gICAgd2lsbENoYW5nZTogXCJvcGFjaXR5LCB0cmFuc2Zvcm1cIlxufTtcblxuY29uc3QgdHJhbnNpdGlvblN0eWxlczogUmVjb3JkPHN0cmluZywgYW55PiA9IHtcbiAgICBlbnRlcmluZzoge1xuICAgICAgICB0cmFuc2Zvcm06IFwidHJhbnNsYXRlWSg3NXZoKVwiLFxuICAgICAgICBvcGFjaXR5OiAwXG4gICAgfSxcbiAgICBlbnRlcmVkOiB7XG4gICAgICAgIHRyYW5zZm9ybTogXCJ0cmFuc2xhdGVZKDBweClcIixcbiAgICAgICAgb3BhY2l0eTogMVxuICAgIH1cbn07XG5cbmludGVyZmFjZSBPbkV4aXRlZCB7XG4gICAgKHZpZXc6IE92ZXJsYXlWaWV3KTogdm9pZDtcbn1cblxuaW50ZXJmYWNlIE9uRW50ZXJlZCB7XG4gICAgKHZpZXc6IE92ZXJsYXlWaWV3KTogdm9pZDtcbn1cblxuZXhwb3J0IGNsYXNzIE92ZXJsYXlWaWV3IGV4dGVuZHMgVUlWaWV3IHtcbiAgICAvKipcbiAgICAgKiBUaGlzIHByb3BlcnR5IGlzIHVzZWQgdG8gdHJhY2sgdGhlIGFtb3VudCBvZiBvcGVuZWQgb3ZlcmxheXMuIFNpbmNlIHdlJ3JlIGFwcGx5aW5nIGEgQ1NTIGNsYXNzIHRvIGRpc2FibGVcbiAgICAgKiB3aW5kb3cgc2Nyb2xsLCB3ZSBtdXN0IG1ha2Ugc3VyZSB3ZSBkb24ndCByZW1vdmUgdGhhdCBDU1MgY2xhc3MgdW50aWwgYWxsIHRoZSBvdmVybGF5cyBhcmUgY2xvc2VkLlxuICAgICAqL1xuICAgIHN0YXRpYyBvcGVuZWRWaWV3cyA9IDA7XG4gICAgcHJpdmF0ZSBfb25FbnRlcmVkOiBPbkVudGVyZWRbXSA9IFtdO1xuICAgIHByaXZhdGUgX29uRXhpdGVkOiBPbkV4aXRlZFtdID0gW107XG5cbiAgICBwdWJsaWMgY29uc3RydWN0b3IoaWQgPSBcIk92ZXJsYXlWaWV3XCIpIHtcbiAgICAgICAgc3VwZXIoaWQpO1xuICAgICAgICB0aGlzLnVzZUdyaWQoZmFsc2UpO1xuXG4gICAgICAgIHRoaXMuYWRkSG9va0RlZmluaXRpb24oXCJvdmVybGF5XCIsIHVzZU92ZXJsYXlWaWV3KTtcblxuICAgICAgICB0aGlzLmFkZEVsZW1lbnQoXG4gICAgICAgICAgICBuZXcgSGVhZGVyRWxlbWVudChcIm92ZXJsYXlIZWFkZXJcIiwge1xuICAgICAgICAgICAgICAgIG9uQ2xvc2U6ICgpID0+IHRoaXMuc2V0SXNWaXNpYmxlKGZhbHNlKVxuICAgICAgICAgICAgfSlcbiAgICAgICAgKTtcblxuICAgICAgICB0aGlzLmFkZEVsZW1lbnQobmV3IENvbnRlbnRFbGVtZW50KFwib3ZlcmxheUNvbnRlbnRcIikpO1xuXG4gICAgICAgIHRoaXMuYXBwbHlQbHVnaW5zKE92ZXJsYXlWaWV3KTtcbiAgICB9XG5cbiAgICBwdWJsaWMgc2V0VGl0bGUodGl0bGU6ICgpID0+IHN0cmluZyk6IHZvaWQge1xuICAgICAgICB0aGlzLmdldEhlYWRlckVsZW1lbnQoKS5zZXRUaXRsZSh0aXRsZSk7XG4gICAgfVxuXG4gICAgcHVibGljIG9uRW50ZXJlZCgpOiB2b2lkIHtcbiAgICAgICAgWy4uLnRoaXMuX29uRW50ZXJlZF0ucmV2ZXJzZSgpLmZvckVhY2goY2IgPT4gY2IodGhpcykpO1xuICAgIH1cblxuICAgIHB1YmxpYyBvbkV4aXRlZCgpOiB2b2lkIHtcbiAgICAgICAgWy4uLnRoaXMuX29uRXhpdGVkXS5yZXZlcnNlKCkuZm9yRWFjaChjYiA9PiBjYih0aGlzKSk7XG4gICAgfVxuXG4gICAgcHVibGljIGFkZE9uRW50ZXJlZChjYjogT25FeGl0ZWQpOiB2b2lkIHtcbiAgICAgICAgdGhpcy5fb25FbnRlcmVkLnB1c2goY2IpO1xuICAgIH1cblxuICAgIHB1YmxpYyBhZGRPbkV4aXRlZChjYjogT25FeGl0ZWQpOiB2b2lkIHtcbiAgICAgICAgdGhpcy5fb25FeGl0ZWQucHVzaChjYik7XG4gICAgfVxuXG4gICAgcHVibGljIGdldE92ZXJsYXlIb29rKCk6IFVzZU92ZXJsYXlWaWV3IHtcbiAgICAgICAgcmV0dXJuIHRoaXMuZ2V0SG9vazxVc2VPdmVybGF5Vmlldz4oXCJvdmVybGF5XCIpO1xuICAgIH1cblxuICAgIHB1YmxpYyBzZXRJc1Zpc2libGUodmlzaWJsZTogYm9vbGVhbik6IHZvaWQge1xuICAgICAgICB0aGlzLmdldE92ZXJsYXlIb29rKCkuc2V0SXNWaXNpYmxlKHZpc2libGUpO1xuICAgIH1cblxuICAgIHB1YmxpYyBnZXRIZWFkZXJFbGVtZW50KCk6IEhlYWRlckVsZW1lbnQge1xuICAgICAgICByZXR1cm4gdGhpcy5nZXRFbGVtZW50KFwib3ZlcmxheUhlYWRlclwiKSBhcyBIZWFkZXJFbGVtZW50O1xuICAgIH1cblxuICAgIHB1YmxpYyBnZXRDb250ZW50RWxlbWVudCgpOiBDb250ZW50RWxlbWVudCB7XG4gICAgICAgIHJldHVybiB0aGlzLmdldEVsZW1lbnQoXCJvdmVybGF5Q29udGVudFwiKSBhcyBIZWFkZXJFbGVtZW50O1xuICAgIH1cblxuICAgIHB1YmxpYyBvdmVycmlkZSByZW5kZXIocHJvcHM6IFVJVmlld1Byb3BzKTogUmVhY3QuUmVhY3ROb2RlIHtcbiAgICAgICAgY29uc3QgeyBpc1Zpc2libGUgfSA9IHRoaXMuZ2V0T3ZlcmxheUhvb2soKTtcbiAgICAgICAgcmV0dXJuIChcbiAgICAgICAgICAgIDxUcmFuc2l0aW9uXG4gICAgICAgICAgICAgICAgaW49e2lzVmlzaWJsZX1cbiAgICAgICAgICAgICAgICB0aW1lb3V0PXsxMDB9XG4gICAgICAgICAgICAgICAgYXBwZWFyXG4gICAgICAgICAgICAgICAgb25FeGl0ZWQ9eygpID0+IHRoaXMub25FeGl0ZWQoKX1cbiAgICAgICAgICAgICAgICBvbkVudGVyZWQ9eygpID0+IHRoaXMub25FbnRlcmVkKCl9XG4gICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAge3N0YXRlID0+IChcbiAgICAgICAgICAgICAgICAgICAgPE92ZXJsYXlMYXlvdXRXcmFwcGVyIHN0eWxlPXt7IC4uLmRlZmF1bHRTdHlsZSwgLi4udHJhbnNpdGlvblN0eWxlc1tzdGF0ZV0gfX0+XG4gICAgICAgICAgICAgICAgICAgICAgICB7c3VwZXIucmVuZGVyKHByb3BzKX1cbiAgICAgICAgICAgICAgICAgICAgPC9PdmVybGF5TGF5b3V0V3JhcHBlcj5cbiAgICAgICAgICAgICAgICApfVxuICAgICAgICAgICAgPC9UcmFuc2l0aW9uPlxuICAgICAgICApO1xuICAgIH1cbn1cbiJdfQ== */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
-var defaultStyle = {
+const defaultStyle = {
   transform: "translateY(75vh)",
   opacity: 0,
   transitionProperty: "transform, opacity",
@@ -46,7 +32,7 @@ var defaultStyle = {
   transitionDuration: "225ms",
   willChange: "opacity, transform"
 };
-var transitionStyles = {
+const transitionStyles = {
   entering: {
     transform: "translateY(75vh)",
     opacity: 0
@@ -56,105 +42,68 @@ var transitionStyles = {
     opacity: 1
   }
 };
-var OverlayView = exports.OverlayView = /*#__PURE__*/function (_UIView) {
-  function OverlayView() {
-    var _this;
-    var id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "OverlayView";
-    (0, _classCallCheck2.default)(this, OverlayView);
-    _this = (0, _callSuper2.default)(this, OverlayView, [id]);
-    (0, _defineProperty2.default)(_this, "_onEntered", []);
-    (0, _defineProperty2.default)(_this, "_onExited", []);
-    _this.useGrid(false);
-    _this.addHookDefinition("overlay", _useOverlayView.useOverlayView);
-    _this.addElement(new _HeaderElement.HeaderElement("overlayHeader", {
-      onClose: function onClose() {
-        return _this.setIsVisible(false);
-      }
+export class OverlayView extends UIView {
+  /**
+   * This property is used to track the amount of opened overlays. Since we're applying a CSS class to disable
+   * window scroll, we must make sure we don't remove that CSS class until all the overlays are closed.
+   */
+  static openedViews = 0;
+  _onEntered = [];
+  _onExited = [];
+  constructor(id = "OverlayView") {
+    super(id);
+    this.useGrid(false);
+    this.addHookDefinition("overlay", useOverlayView);
+    this.addElement(new HeaderElement("overlayHeader", {
+      onClose: () => this.setIsVisible(false)
     }));
-    _this.addElement(new _ContentElement.ContentElement("overlayContent"));
-    _this.applyPlugins(OverlayView);
-    return _this;
+    this.addElement(new ContentElement("overlayContent"));
+    this.applyPlugins(OverlayView);
+  }
+  setTitle(title) {
+    this.getHeaderElement().setTitle(title);
+  }
+  onEntered() {
+    [...this._onEntered].reverse().forEach(cb => cb(this));
+  }
+  onExited() {
+    [...this._onExited].reverse().forEach(cb => cb(this));
+  }
+  addOnEntered(cb) {
+    this._onEntered.push(cb);
+  }
+  addOnExited(cb) {
+    this._onExited.push(cb);
+  }
+  getOverlayHook() {
+    return this.getHook("overlay");
+  }
+  setIsVisible(visible) {
+    this.getOverlayHook().setIsVisible(visible);
+  }
+  getHeaderElement() {
+    return this.getElement("overlayHeader");
+  }
+  getContentElement() {
+    return this.getElement("overlayContent");
+  }
+  render(props) {
+    const {
+      isVisible
+    } = this.getOverlayHook();
+    return /*#__PURE__*/React.createElement(Transition, {
+      in: isVisible,
+      timeout: 100,
+      appear: true,
+      onExited: () => this.onExited(),
+      onEntered: () => this.onEntered()
+    }, state => /*#__PURE__*/React.createElement(OverlayLayoutWrapper, {
+      style: {
+        ...defaultStyle,
+        ...transitionStyles[state]
+      }
+    }, super.render(props)));
   }
-  (0, _inherits2.default)(OverlayView, _UIView);
-  return (0, _createClass2.default)(OverlayView, [{
-    key: "setTitle",
-    value: function setTitle(title) {
-      this.getHeaderElement().setTitle(title);
-    }
-  }, {
-    key: "onEntered",
-    value: function onEntered() {
-      var _this2 = this;
-      (0, _toConsumableArray2.default)(this._onEntered).reverse().forEach(function (cb) {
-        return cb(_this2);
-      });
-    }
-  }, {
-    key: "onExited",
-    value: function onExited() {
-      var _this3 = this;
-      (0, _toConsumableArray2.default)(this._onExited).reverse().forEach(function (cb) {
-        return cb(_this3);
-      });
-    }
-  }, {
-    key: "addOnEntered",
-    value: function addOnEntered(cb) {
-      this._onEntered.push(cb);
-    }
-  }, {
-    key: "addOnExited",
-    value: function addOnExited(cb) {
-      this._onExited.push(cb);
-    }
-  }, {
-    key: "getOverlayHook",
-    value: function getOverlayHook() {
-      return this.getHook("overlay");
-    }
-  }, {
-    key: "setIsVisible",
-    value: function setIsVisible(visible) {
-      this.getOverlayHook().setIsVisible(visible);
-    }
-  }, {
-    key: "getHeaderElement",
-    value: function getHeaderElement() {
-      return this.getElement("overlayHeader");
-    }
-  }, {
-    key: "getContentElement",
-    value: function getContentElement() {
-      return this.getElement("overlayContent");
-    }
-  }, {
-    key: "render",
-    value: function render(props) {
-      var _this4 = this;
-      var _this$getOverlayHook = this.getOverlayHook(),
-        isVisible = _this$getOverlayHook.isVisible;
-      return /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.Transition, {
-        in: isVisible,
-        timeout: 100,
-        appear: true,
-        onExited: function onExited() {
-          return _this4.onExited();
-        },
-        onEntered: function onEntered() {
-          return _this4.onEntered();
-        }
-      }, function (state) {
-        return /*#__PURE__*/_react.default.createElement(OverlayLayoutWrapper, {
-          style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, defaultStyle), transitionStyles[state])
-        }, (0, _superPropGet2.default)(OverlayView, "render", _this4, 3)([props]));
-      });
-    }
-  }]);
-}(_UIView2.UIView);
-/**
- * This property is used to track the amount of opened overlays. Since we're applying a CSS class to disable
- * window scroll, we must make sure we don't remove that CSS class until all the overlays are closed.
- */
-(0, _defineProperty2.default)(OverlayView, "openedViews", 0);
+}
 
 //# sourceMappingURL=OverlayView.js.map