@webiny/app-admin 0.0.0-mt-3 → 0.0.0-unstable.085ff6572f

package/ui/views/OverlayView/HeaderTitleElement.js

@@ -1,27 +1,30 @@
-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";
+
+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() {
-    _classCallCheck(this, 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,25 +33,19 @@ export var HeaderTitleElementRenderer = /*#__PURE__*/function (_UIRenderer) {
       }, element.config.title());
     }
   }]);
-
   return HeaderTitleElementRenderer;
-}(UIRenderer);
-export var HeaderTitleElement = /*#__PURE__*/function (_UIElement) {
-  _inherits(HeaderTitleElement, _UIElement);
-
-  var _super2 = _createSuper(HeaderTitleElement);
-
+}(_UIRenderer2.UIRenderer);
+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());
-
     return _this;
   }
-
-  return HeaderTitleElement;
-}(UIElement);
+  return (0, _createClass2.default)(HeaderTitleElement);
+}(_UIElement2.UIElement);
+exports.HeaderTitleElement = HeaderTitleElement;

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

@@ -0,0 +1 @@
+{"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;AAA6D,IAMhDA,0BAA0B;EAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA,OACnC,sBAAyF;MAAA,IAAhEC,OAAO,QAAPA,OAAO;MAC5B,oBACI,6BAAC,sBAAU;QACP,KAAK,EAAE;UAAEC,MAAM,EAAE,QAAQ;UAAEC,KAAK,EAAE;QAA8B,CAAE;QAClE,GAAG,EAAE;MAAY,GAEhBF,OAAO,CAACG,MAAM,CAACC,KAAK,EAAE,CACd;IAErB;EAAC;EAAA;AAAA,EAV2CC,uBAAU;AAAA;AAAA,IAa7CC,kBAAkB;EAAA;EAAA;EAC3B,4BAAmBC,EAAU,EAAEJ,MAAgC,EAAE;IAAA;IAAA;IAC7D,2BAAMI,EAAE,EAAEJ,MAAM;IAEhB,MAAKK,WAAW,CAAC,IAAIT,0BAA0B,EAAE,CAAC;IAAC;EACvD;EAAC;AAAA,EALmCU,qBAAS;AAAA"}

package/ui/views/OverlayView/useOverlayView.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
-export declare type UseOverlayView = ReturnType<typeof useOverlayView>;
-export declare function useOverlayView(): {
+export interface UseOverlayView {
     isVisible: boolean;
-    setIsVisible: import("react").Dispatch<import("react").SetStateAction<boolean>>;
-};
+    setIsVisible: (value: boolean) => void;
+}
+export declare const useOverlayView: () => UseOverlayView;

package/ui/views/OverlayView/useOverlayView.js

@@ -1,32 +1,37 @@
-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 function useOverlayView() {
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isVisible = _useState2[0],
-      setIsVisible = _useState2[1];
-
-  useEffect(function () {
+var 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 () {
     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 +40,5 @@ export function useOverlayView() {
     isVisible: isVisible,
     setIsVisible: setIsVisible
   };
-}
+};
+exports.useOverlayView = useOverlayView;

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

@@ -0,0 +1 @@
+{"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,YAAG,EAAC;EACjBC,QAAQ,EAAE,QAAQ;EAClBC,MAAM,EAAE;AACZ,CAAC,oBAAC;AAOK,IAAMC,cAAc,GAAG,SAAjBA,cAAc,GAAyB;EAChD,gBAAkC,IAAAC,eAAQ,EAAU,KAAK,CAAC;IAAA;IAAnDC,SAAS;IAAEC,YAAY;EAE9B,IAAAC,gBAAS,EAAC,YAAM;IACZ,IAAIF,SAAS,EAAE;MACXG,wBAAW,CAACC,WAAW,EAAE;MACzBC,QAAQ,CAACC,IAAI,CAACC,SAAS,CAACC,GAAG,CAACd,QAAQ,CAAC;IACzC,CAAC,MAAM,IAAI,CAACS,wBAAW,CAACC,WAAW,EAAE;MACjCC,QAAQ,CAACC,IAAI,CAACC,SAAS,CAACE,MAAM,CAACf,QAAQ,CAAC;IAC5C;EACJ,CAAC,EAAE,CAACM,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,CAACf,QAAQ,CAAC;MAC5C;IACJ,CAAC;EACL,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO;IAAEM,SAAS,EAATA,SAAS;IAAEC,YAAY,EAAZA;EAAa,CAAC;AACtC,CAAC;AAAC"}

package/ui/views/OverlayView.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
-import { UIView } from "../UIView";
+import { UIView, UIViewProps } from "../UIView";
+import { UseOverlayView } from "./OverlayView/useOverlayView";
 import { HeaderElement } from "./OverlayView/HeaderElement";
 import { ContentElement } from "./OverlayView/ContentElement";
 interface OnExited {
@@ -19,13 +20,10 @@ export declare class OverlayView extends UIView {
     onExited(): void;
     addOnEntered(cb: OnExited): void;
     addOnExited(cb: OnExited): void;
-    getOverlayHook(): {
-        isVisible: boolean;
-        setIsVisible: React.Dispatch<React.SetStateAction<boolean>>;
-    };
+    getOverlayHook(): UseOverlayView;
     setIsVisible(visible: boolean): void;
     getHeaderElement(): HeaderElement;
     getContentElement(): ContentElement;
-    render(props: any): JSX.Element;
+    render(props: UIViewProps): React.ReactNode;
 }
 export {};

package/ui/views/OverlayView.js

@@ -1,23 +1,31 @@
-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!
+"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 _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__*/styled("div", {
+var OverlayLayoutWrapper = /*#__PURE__*/(0, _styled.default)("div", {
   target: "e1xrojct0",
   label: "OverlayLayoutWrapper"
 })({
@@ -25,12 +33,11 @@ var OverlayLayoutWrapper = /*#__PURE__*/styled("div", {
   width: "100%",
   height: "100vh",
   backgroundColor: "var(--mdc-theme-background)",
-
   /**
    * Has to be higher than 5 so it's above advanced settings dialog,
    * and below 20, so the image editor & Dialogs can be displayed above.
    */
-  zIndex: 18,
+  zIndex: 21,
   top: 0,
   left: 0
 });
@@ -52,46 +59,33 @@ 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
    * window scroll, we must make sure we don't remove that CSS class until all the overlays are closed.
    */
+
   function OverlayView() {
     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.addElement(new HeaderElement("overlayHeader", {
+    _this.addHookDefinition("overlay", _useOverlayView.useOverlayView);
+    _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);
@@ -100,8 +94,7 @@ export var OverlayView = /*#__PURE__*/function (_UIView) {
     key: "onEntered",
     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);
       });
     }
@@ -109,8 +102,7 @@ export var OverlayView = /*#__PURE__*/function (_UIView) {
     key: "onExited",
     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);
       });
     }
@@ -148,11 +140,9 @@ export var OverlayView = /*#__PURE__*/function (_UIView) {
     key: "render",
     value: function render(props) {
       var _this4 = this;
-
       var _this$getOverlayHook = this.getOverlayHook(),
-          isVisible = _this$getOverlayHook.isVisible;
-
-      return /*#__PURE__*/React.createElement(Transition, {
+        isVisible = _this$getOverlayHook.isVisible;
+      return /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.Transition, {
         in: isVisible,
         timeout: 100,
         appear: true,
@@ -163,14 +153,13 @@ 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);
-
-_defineProperty(OverlayView, "openedViews", 0);
+}(_UIView2.UIView);
+exports.OverlayView = OverlayView;
+(0, _defineProperty2.default)(OverlayView, "openedViews", 0);

package/ui/views/OverlayView.js.map

@@ -0,0 +1 @@
+{"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: 21,\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":"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"}

package/ui/views/SplitView/SplitViewPanelElement.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-import { UIElement } from "../../UIElement";
+import React from "react";
+import { UIElement, UiElementRenderProps } from "../../UIElement";
 export declare class SplitViewPanelElement extends UIElement<any> {
     private _width;
     private _classNames;
@@ -7,5 +7,5 @@ export declare class SplitViewPanelElement extends UIElement<any> {
     addClassName(className: string): void;
     removeClassName(className: string): void;
     setContentElement(element: UIElement): void;
-    render(props: any): JSX.Element;
+    render(props: UiElementRenderProps): React.ReactNode;
 }

package/ui/views/SplitView/SplitViewPanelElement.js

@@ -1,39 +1,37 @@
-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 classNames from "classnames";
-import { UIElement } from "../../UIElement";
-import { Cell } from "@webiny/ui/Grid";
-export var SplitViewPanelElement = /*#__PURE__*/function (_UIElement) {
-  _inherits(SplitViewPanelElement, _UIElement);
-
-  var _super = _createSuper(SplitViewPanelElement);
+"use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SplitViewPanelElement = 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 _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 _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _UIElement2 = require("../../UIElement");
+var _Grid = require("@webiny/ui/Grid");
+var SplitViewPanelElement = /*#__PURE__*/function (_UIElement) {
+  (0, _inherits2.default)(SplitViewPanelElement, _UIElement);
+  var _super = (0, _createSuper2.default)(SplitViewPanelElement);
   function SplitViewPanelElement() {
     var _this;
-
-    _classCallCheck(this, SplitViewPanelElement);
-
+    (0, _classCallCheck2.default)(this, SplitViewPanelElement);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     _this = _super.call.apply(_super, [this].concat(args));
-
-    _defineProperty(_assertThisInitialized(_this), "_width", 12);
-
-    _defineProperty(_assertThisInitialized(_this), "_classNames", new Set());
-
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "_width", 12);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "_classNames", new Set());
     return _this;
   }
-
-  _createClass(SplitViewPanelElement, [{
+  (0, _createClass2.default)(SplitViewPanelElement, [{
     key: "setWidth",
     value: function setWidth(width) {
       this._width = width;
@@ -54,19 +52,20 @@ export var SplitViewPanelElement = /*#__PURE__*/function (_UIElement) {
       // Remove previous content
       this.getChildren().forEach(function (el) {
         return el.remove();
-      }); // Add new content
+      });
 
+      // Add new content
       this.addElement(element);
     }
   }, {
     key: "render",
     value: function render(props) {
-      return /*#__PURE__*/React.createElement(Cell, {
+      return /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
         span: this._width,
-        className: classNames(Array.from(this._classNames.values()))
-      }, _get(_getPrototypeOf(SplitViewPanelElement.prototype), "render", this).call(this, props));
+        className: (0, _classnames.default)(Array.from(this._classNames.values()))
+      }, (0, _get2.default)((0, _getPrototypeOf2.default)(SplitViewPanelElement.prototype), "render", this).call(this, props));
     }
   }]);
-
   return SplitViewPanelElement;
-}(UIElement);
+}(_UIElement2.UIElement);
+exports.SplitViewPanelElement = SplitViewPanelElement;

package/ui/views/SplitView/SplitViewPanelElement.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["SplitViewPanelElement","Set","width","_width","className","_classNames","add","delete","element","getChildren","forEach","el","remove","addElement","props","classNames","Array","from","values","UIElement"],"sources":["SplitViewPanelElement.tsx"],"sourcesContent":["import React from \"react\";\nimport classNames from \"classnames\";\nimport { UIElement, UiElementRenderProps } from \"~/ui/UIElement\";\nimport { Cell } from \"@webiny/ui/Grid\";\n\nexport class SplitViewPanelElement extends UIElement<any> {\n    private _width = 12;\n    private _classNames: Set<string> = new Set();\n\n    public setWidth(width: number): void {\n        this._width = width;\n    }\n\n    public addClassName(className: string): void {\n        this._classNames.add(className);\n    }\n\n    public removeClassName(className: string): void {\n        this._classNames.delete(className);\n    }\n\n    public setContentElement(element: UIElement): void {\n        // Remove previous content\n        this.getChildren().forEach(el => el.remove());\n\n        // Add new content\n        this.addElement(element);\n    }\n\n    public override render(props: UiElementRenderProps): React.ReactNode {\n        return (\n            <Cell span={this._width} className={classNames(Array.from(this._classNames.values()))}>\n                {super.render(props)}\n            </Cell>\n        );\n    }\n}\n"],"mappings":";;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AAAuC,IAE1BA,qBAAqB;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;MAAA;IAAA;IAAA;IAAA,qFACb,EAAE;IAAA,0FACgB,IAAIC,GAAG,EAAE;IAAA;EAAA;EAAA;IAAA;IAAA,OAE5C,kBAAgBC,KAAa,EAAQ;MACjC,IAAI,CAACC,MAAM,GAAGD,KAAK;IACvB;EAAC;IAAA;IAAA,OAED,sBAAoBE,SAAiB,EAAQ;MACzC,IAAI,CAACC,WAAW,CAACC,GAAG,CAACF,SAAS,CAAC;IACnC;EAAC;IAAA;IAAA,OAED,yBAAuBA,SAAiB,EAAQ;MAC5C,IAAI,CAACC,WAAW,CAACE,MAAM,CAACH,SAAS,CAAC;IACtC;EAAC;IAAA;IAAA,OAED,2BAAyBI,OAAkB,EAAQ;MAC/C;MACA,IAAI,CAACC,WAAW,EAAE,CAACC,OAAO,CAAC,UAAAC,EAAE;QAAA,OAAIA,EAAE,CAACC,MAAM,EAAE;MAAA,EAAC;;MAE7C;MACA,IAAI,CAACC,UAAU,CAACL,OAAO,CAAC;IAC5B;EAAC;IAAA;IAAA,OAED,gBAAuBM,KAA2B,EAAmB;MACjE,oBACI,6BAAC,UAAI;QAAC,IAAI,EAAE,IAAI,CAACX,MAAO;QAAC,SAAS,EAAE,IAAAY,mBAAU,EAACC,KAAK,CAACC,IAAI,CAAC,IAAI,CAACZ,WAAW,CAACa,MAAM,EAAE,CAAC;MAAE,iHACpEJ,KAAK,EAChB;IAEf;EAAC;EAAA;AAAA,EA9BsCK,qBAAS;AAAA"}

package/ui/views/SplitView.d.ts

@@ -8,9 +8,9 @@ interface SplitViewConfig {
 }
 export declare class SplitView extends UIView {
     private _classNames;
-    private _leftPanel;
-    private _rightPanel;
-    constructor(id: any, config?: SplitViewConfig);
+    private _leftPanel?;
+    private _rightPanel?;
+    constructor(id: string, config?: SplitViewConfig);
     addClassName(className: string): void;
     removeClassName(className: string): void;
     getLeftPanel(): SplitViewPanelElement;