@webiny/app-admin 5.40.0-beta.1 → 5.40.0-beta.3

package/ui/views/FormView/FormContentElement.js

@@ -7,18 +7,16 @@ Object.defineProperty(exports, "__esModule", {
 exports.FormContentElement = void 0;
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/callSuper"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
 var _UIElement2 = require("../../UIElement");
-var FormContentElement = /*#__PURE__*/function (_UIElement) {
-  (0, _inherits2.default)(FormContentElement, _UIElement);
-  var _super = (0, _createSuper2.default)(FormContentElement);
+var FormContentElement = exports.FormContentElement = /*#__PURE__*/function (_UIElement) {
   function FormContentElement() {
     (0, _classCallCheck2.default)(this, FormContentElement);
-    return _super.apply(this, arguments);
+    return (0, _callSuper2.default)(this, FormContentElement, arguments);
   }
+  (0, _inherits2.default)(FormContentElement, _UIElement);
   return (0, _createClass2.default)(FormContentElement);
 }(_UIElement2.UIElement);
-exports.FormContentElement = FormContentElement;
 
 //# sourceMappingURL=FormContentElement.js.map

package/ui/views/FormView/FormContentElement.js.map

@@ -1 +1 @@
-{"version":3,"names":["_UIElement2","require","FormContentElement","_UIElement","_inherits2","default","_super","_createSuper2","_classCallCheck2","apply","arguments","_createClass2","UIElement","exports"],"sources":["FormContentElement.tsx"],"sourcesContent":["import { UIElement } from \"~/ui/UIElement\";\n\nexport class FormContentElement extends UIElement {}\n"],"mappings":";;;;;;;;;;;AAAA,IAAAA,WAAA,GAAAC,OAAA;AAA2C,IAE9BC,kBAAkB,0BAAAC,UAAA;EAAA,IAAAC,UAAA,CAAAC,OAAA,EAAAH,kBAAA,EAAAC,UAAA;EAAA,IAAAG,MAAA,OAAAC,aAAA,CAAAF,OAAA,EAAAH,kBAAA;EAAA,SAAAA,mBAAA;IAAA,IAAAM,gBAAA,CAAAH,OAAA,QAAAH,kBAAA;IAAA,OAAAI,MAAA,CAAAG,KAAA,OAAAC,SAAA;EAAA;EAAA,WAAAC,aAAA,CAAAN,OAAA,EAAAH,kBAAA;AAAA,EAASU,qBAAS;AAAAC,OAAA,CAAAX,kBAAA,GAAAA,kBAAA"}
+{"version":3,"names":["_UIElement2","require","FormContentElement","exports","_UIElement","_classCallCheck2","default","_callSuper2","arguments","_inherits2","_createClass2","UIElement"],"sources":["FormContentElement.tsx"],"sourcesContent":["import { UIElement } from \"~/ui/UIElement\";\n\nexport class FormContentElement extends UIElement {}\n"],"mappings":";;;;;;;;;;;AAAA,IAAAA,WAAA,GAAAC,OAAA;AAA2C,IAE9BC,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,0BAAAE,UAAA;EAAA,SAAAF,mBAAA;IAAA,IAAAG,gBAAA,CAAAC,OAAA,QAAAJ,kBAAA;IAAA,WAAAK,WAAA,CAAAD,OAAA,QAAAJ,kBAAA,EAAAM,SAAA;EAAA;EAAA,IAAAC,UAAA,CAAAH,OAAA,EAAAJ,kBAAA,EAAAE,UAAA;EAAA,WAAAM,aAAA,CAAAJ,OAAA,EAAAJ,kBAAA;AAAA,EAASS,qBAAS","ignoreList":[]}

package/ui/views/FormView/FormFooterElement.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import React from "react";
 import { UIElement, UiElementRenderProps } from "../../UIElement";
 export declare class FormFooterElement extends UIElement {
     constructor(id: string);
-    render(props: UiElementRenderProps): JSX.Element;
+    render(props: UiElementRenderProps): React.JSX.Element;
 }

package/ui/views/FormView/FormFooterElement.js

@@ -7,45 +7,43 @@ Object.defineProperty(exports, "__esModule", {
 exports.FormFooterElement = 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 _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 _base = _interopRequireDefault(require("@emotion/styled/base"));
 var _react = _interopRequireDefault(require("react"));
-var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _UIElement2 = require("../../UIElement");
-var ButtonWrapper = /*#__PURE__*/(0, _styled.default)("div", {
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+var ButtonWrapper = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "production" ? {
+  target: "es96np90"
+} : {
   target: "es96np90",
   label: "ButtonWrapper"
-})({
-  display: "flex",
-  justifyContent: "space-between",
-  borderTop: "1px solid var(--mdc-theme-on-background)",
-  color: "var(--mdc-theme-text-primary-on-background)",
-  textAlign: "right",
-  padding: 25,
-  ">:last-child": {
-    marginLeft: "auto"
-  }
+})(process.env.NODE_ENV === "production" ? {
+  name: "130d1po",
+  styles: "display:flex;justify-content:space-between;border-top:1px solid var(--mdc-theme-on-background);color:var(--mdc-theme-text-primary-on-background);text-align:right;padding:25px;>:last-child{margin-left:auto;}"
+} : {
+  name: "130d1po",
+  styles: "display:flex;justify-content:space-between;border-top:1px solid var(--mdc-theme-on-background);color:var(--mdc-theme-text-primary-on-background);text-align:right;padding:25px;>:last-child{margin-left:auto;}",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkZvcm1Gb290ZXJFbGVtZW50LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFJc0IiLCJmaWxlIjoiRm9ybUZvb3RlckVsZW1lbnQudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBVSUVsZW1lbnQsIFVpRWxlbWVudFJlbmRlclByb3BzIH0gZnJvbSBcIn4vdWkvVUlFbGVtZW50XCI7XG5cbmNvbnN0IEJ1dHRvbldyYXBwZXIgPSBzdHlsZWQoXCJkaXZcIikoe1xuICAgIGRpc3BsYXk6IFwiZmxleFwiLFxuICAgIGp1c3RpZnlDb250ZW50OiBcInNwYWNlLWJldHdlZW5cIixcbiAgICBib3JkZXJUb3A6IFwiMXB4IHNvbGlkIHZhcigtLW1kYy10aGVtZS1vbi1iYWNrZ3JvdW5kKVwiLFxuICAgIGNvbG9yOiBcInZhcigtLW1kYy10aGVtZS10ZXh0LXByaW1hcnktb24tYmFja2dyb3VuZClcIixcbiAgICB0ZXh0QWxpZ246IFwicmlnaHRcIixcbiAgICBwYWRkaW5nOiAyNSxcbiAgICBcIj46bGFzdC1jaGlsZFwiOiB7XG4gICAgICAgIG1hcmdpbkxlZnQ6IFwiYXV0b1wiXG4gICAgfVxufSk7XG5cbmV4cG9ydCBjbGFzcyBGb3JtRm9vdGVyRWxlbWVudCBleHRlbmRzIFVJRWxlbWVudCB7XG4gICAgcHVibGljIGNvbnN0cnVjdG9yKGlkOiBzdHJpbmcpIHtcbiAgICAgICAgc3VwZXIoaWQpO1xuXG4gICAgICAgIHRoaXMudXNlR3JpZChmYWxzZSk7XG4gICAgfVxuXG4gICAgcHVibGljIG92ZXJyaWRlIHJlbmRlcihwcm9wczogVWlFbGVtZW50UmVuZGVyUHJvcHMpIHtcbiAgICAgICAgcmV0dXJuIDxCdXR0b25XcmFwcGVyPntzdXBlci5yZW5kZXIocHJvcHMpfTwvQnV0dG9uV3JhcHBlcj47XG4gICAgfVxufVxuIl19 */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
-var FormFooterElement = /*#__PURE__*/function (_UIElement) {
-  (0, _inherits2.default)(FormFooterElement, _UIElement);
-  var _super = (0, _createSuper2.default)(FormFooterElement);
+var FormFooterElement = exports.FormFooterElement = /*#__PURE__*/function (_UIElement) {
   function FormFooterElement(id) {
     var _this;
     (0, _classCallCheck2.default)(this, FormFooterElement);
-    _this = _super.call(this, id);
+    _this = (0, _callSuper2.default)(this, FormFooterElement, [id]);
     _this.useGrid(false);
     return _this;
   }
-  (0, _createClass2.default)(FormFooterElement, [{
+  (0, _inherits2.default)(FormFooterElement, _UIElement);
+  return (0, _createClass2.default)(FormFooterElement, [{
     key: "render",
     value: function render(props) {
       return /*#__PURE__*/_react.default.createElement(ButtonWrapper, null, (0, _get2.default)((0, _getPrototypeOf2.default)(FormFooterElement.prototype), "render", this).call(this, props));
     }
   }]);
-  return FormFooterElement;
 }(_UIElement2.UIElement);
-exports.FormFooterElement = FormFooterElement;
 
 //# sourceMappingURL=FormFooterElement.js.map

package/ui/views/FormView/FormFooterElement.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_styled","_UIElement2","ButtonWrapper","styled","target","label","display","justifyContent","borderTop","color","textAlign","padding","marginLeft","FormFooterElement","_UIElement","_inherits2","default","_super","_createSuper2","id","_this","_classCallCheck2","call","useGrid","_createClass2","key","value","render","props","createElement","_get2","_getPrototypeOf2","prototype","UIElement","exports"],"sources":["FormFooterElement.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { UIElement, UiElementRenderProps } from \"~/ui/UIElement\";\n\nconst ButtonWrapper = styled(\"div\")({\n    display: \"flex\",\n    justifyContent: \"space-between\",\n    borderTop: \"1px solid var(--mdc-theme-on-background)\",\n    color: \"var(--mdc-theme-text-primary-on-background)\",\n    textAlign: \"right\",\n    padding: 25,\n    \">:last-child\": {\n        marginLeft: \"auto\"\n    }\n});\n\nexport class FormFooterElement extends UIElement {\n    public constructor(id: string) {\n        super(id);\n\n        this.useGrid(false);\n    }\n\n    public override render(props: UiElementRenderProps) {\n        return <ButtonWrapper>{super.render(props)}</ButtonWrapper>;\n    }\n}\n"],"mappings":";;;;;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,WAAA,GAAAF,OAAA;AAEA,IAAMG,aAAa,oBAAGC,eAAM,EAAC,KAAK;EAAAC,MAAA;EAAAC,KAAA;AAAA,GAAE;EAChCC,OAAO,EAAE,MAAM;EACfC,cAAc,EAAE,eAAe;EAC/BC,SAAS,EAAE,0CAA0C;EACrDC,KAAK,EAAE,6CAA6C;EACpDC,SAAS,EAAE,OAAO;EAClBC,OAAO,EAAE,EAAE;EACX,cAAc,EAAE;IACZC,UAAU,EAAE;EAChB;AACJ,CAAC,CAAC;AAAC,IAEUC,iBAAiB,0BAAAC,UAAA;EAAA,IAAAC,UAAA,CAAAC,OAAA,EAAAH,iBAAA,EAAAC,UAAA;EAAA,IAAAG,MAAA,OAAAC,aAAA,CAAAF,OAAA,EAAAH,iBAAA;EAC1B,SAAAA,kBAAmBM,EAAU,EAAE;IAAA,IAAAC,KAAA;IAAA,IAAAC,gBAAA,CAAAL,OAAA,QAAAH,iBAAA;IAC3BO,KAAA,GAAAH,MAAA,CAAAK,IAAA,OAAMH,EAAE;IAERC,KAAA,CAAKG,OAAO,CAAC,KAAK,CAAC;IAAC,OAAAH,KAAA;EACxB;EAAC,IAAAI,aAAA,CAAAR,OAAA,EAAAH,iBAAA;IAAAY,GAAA;IAAAC,KAAA,EAED,SAAAC,OAAuBC,KAA2B,EAAE;MAChD,oBAAO/B,MAAA,CAAAmB,OAAA,CAAAa,aAAA,CAAC3B,aAAa,YAAA4B,KAAA,CAAAd,OAAA,MAAAe,gBAAA,CAAAf,OAAA,EAAAH,iBAAA,CAAAmB,SAAA,mBAAAV,IAAA,OAAeM,KAAK,CAAiB,CAAC;IAC/D;EAAC;EAAA,OAAAf,iBAAA;AAAA,EATkCoB,qBAAS;AAAAC,OAAA,CAAArB,iBAAA,GAAAA,iBAAA"}
+{"version":3,"names":["_react","_interopRequireDefault","require","_UIElement2","_EMOTION_STRINGIFIED_CSS_ERROR__","ButtonWrapper","_base","default","process","env","NODE_ENV","target","label","name","styles","map","toString","FormFooterElement","exports","_UIElement","id","_this","_classCallCheck2","_callSuper2","useGrid","_inherits2","_createClass2","key","value","render","props","createElement","_get2","_getPrototypeOf2","prototype","call","UIElement"],"sources":["FormFooterElement.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { UIElement, UiElementRenderProps } from \"~/ui/UIElement\";\n\nconst ButtonWrapper = styled(\"div\")({\n    display: \"flex\",\n    justifyContent: \"space-between\",\n    borderTop: \"1px solid var(--mdc-theme-on-background)\",\n    color: \"var(--mdc-theme-text-primary-on-background)\",\n    textAlign: \"right\",\n    padding: 25,\n    \">:last-child\": {\n        marginLeft: \"auto\"\n    }\n});\n\nexport class FormFooterElement extends UIElement {\n    public constructor(id: string) {\n        super(id);\n\n        this.useGrid(false);\n    }\n\n    public override render(props: UiElementRenderProps) {\n        return <ButtonWrapper>{super.render(props)}</ButtonWrapper>;\n    }\n}\n"],"mappings":";;;;;;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,WAAA,GAAAD,OAAA;AAAiE,SAAAE,iCAAA;AAEjE,IAAMC,aAAa,gBAAG,IAAAC,KAAA,CAAAC,OAAA,EAAO,KAAK,EAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,EAAC,CAAAJ,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAG,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,GAAA;EAAAC,QAAA,EAAAZ;AAAA,CAUlC,CAAC;AAAC,IAEUa,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,0BAAAE,UAAA;EAC1B,SAAAF,kBAAmBG,EAAU,EAAE;IAAA,IAAAC,KAAA;IAAA,IAAAC,gBAAA,CAAAf,OAAA,QAAAU,iBAAA;IAC3BI,KAAA,OAAAE,WAAA,CAAAhB,OAAA,QAAAU,iBAAA,GAAMG,EAAE;IAERC,KAAA,CAAKG,OAAO,CAAC,KAAK,CAAC;IAAC,OAAAH,KAAA;EACxB;EAAC,IAAAI,UAAA,CAAAlB,OAAA,EAAAU,iBAAA,EAAAE,UAAA;EAAA,WAAAO,aAAA,CAAAnB,OAAA,EAAAU,iBAAA;IAAAU,GAAA;IAAAC,KAAA,EAED,SAAAC,OAAuBC,KAA2B,EAAE;MAChD,oBAAO9B,MAAA,CAAAO,OAAA,CAAAwB,aAAA,CAAC1B,aAAa,YAAA2B,KAAA,CAAAzB,OAAA,MAAA0B,gBAAA,CAAA1B,OAAA,EAAAU,iBAAA,CAAAiB,SAAA,mBAAAC,IAAA,OAAeL,KAAK,CAAiB,CAAC;IAC/D;EAAC;AAAA,EATkCM,qBAAS","ignoreList":[]}

package/ui/views/FormView/FormHeaderElement.js

@@ -7,44 +7,43 @@ Object.defineProperty(exports, "__esModule", {
 exports.FormHeaderElement = 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 _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 _react = _interopRequireDefault(require("react"));
 var _emotion = require("emotion");
 var _Grid = require("@webiny/ui/Grid");
 var _Typography = require("@webiny/ui/Typography");
 var _UIElement2 = require("../../UIElement");
 var _Icon = require("@webiny/ui/Icon");
-var iconClass = /*#__PURE__*/(0, _emotion.css)({
+var iconClass = (0, _emotion.css)({
   marginRight: 15,
   color: "var(--mdc-theme-text-primary-on-background)"
-}, "label:iconClass;");
-var headerClass = /*#__PURE__*/(0, _emotion.css)({
+});
+var headerClass = (0, _emotion.css)({
   borderBottom: "1px solid var(--mdc-theme-on-background)",
   color: "var(--mdc-theme-text-primary-on-background)"
-}, "label:headerClass;");
-var titleClass = /*#__PURE__*/(0, _emotion.css)({
+});
+var titleClass = (0, _emotion.css)({
   display: "flex",
   alignItems: "center"
-}, "label:titleClass;");
-var actionsClass = /*#__PURE__*/(0, _emotion.css)({
+});
+var actionsClass = (0, _emotion.css)({
   display: "flex",
   justifyContent: "flex-end",
   alignItems: "center"
-}, "label:actionsClass;");
-var FormHeaderElement = /*#__PURE__*/function (_UIElement) {
-  (0, _inherits2.default)(FormHeaderElement, _UIElement);
-  var _super = (0, _createSuper2.default)(FormHeaderElement);
+});
+var FormHeaderElement = exports.FormHeaderElement = /*#__PURE__*/function (_UIElement) {
   function FormHeaderElement(id, config) {
     var _this;
     (0, _classCallCheck2.default)(this, FormHeaderElement);
-    _this = _super.call(this, id, config);
+    _this = (0, _callSuper2.default)(this, FormHeaderElement, [id, config]);
     _this.useGrid(false);
     return _this;
   }
-  (0, _createClass2.default)(FormHeaderElement, [{
+  (0, _inherits2.default)(FormHeaderElement, _UIElement);
+  return (0, _createClass2.default)(FormHeaderElement, [{
     key: "setIcon",
     value: function setIcon(icon) {
       this.config.icon = icon;
@@ -76,8 +75,6 @@ var FormHeaderElement = /*#__PURE__*/function (_UIElement) {
       }, (0, _get2.default)((0, _getPrototypeOf2.default)(FormHeaderElement.prototype), "render", this).call(this, props)));
     }
   }]);
-  return FormHeaderElement;
 }(_UIElement2.UIElement);
-exports.FormHeaderElement = FormHeaderElement;
 
 //# sourceMappingURL=FormHeaderElement.js.map

package/ui/views/FormView/FormHeaderElement.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_emotion","_Grid","_Typography","_UIElement2","_Icon","iconClass","css","marginRight","color","headerClass","borderBottom","titleClass","display","alignItems","actionsClass","justifyContent","FormHeaderElement","_UIElement","_inherits2","default","_super","_createSuper2","id","config","_this","_classCallCheck2","call","useGrid","_createClass2","key","value","setIcon","icon","addAction","element","addElement","render","props","_this$config","getTitle","createElement","Grid","className","Cell","span","Fragment","Icon","Typography","use","_get2","_getPrototypeOf2","prototype","UIElement","exports"],"sources":["FormHeaderElement.tsx"],"sourcesContent":["import React from \"react\";\nimport { css } from \"emotion\";\nimport { Cell, Grid } from \"@webiny/ui/Grid\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { UIElement, UIElementConfig } from \"~/ui/UIElement\";\nimport { Icon } from \"@webiny/ui/Icon\";\nimport { FormElementRenderProps } from \"~/ui/elements/form/FormElement\";\n\nconst iconClass = css({\n    marginRight: 15,\n    color: \"var(--mdc-theme-text-primary-on-background)\"\n});\n\nconst headerClass = css({\n    borderBottom: \"1px solid var(--mdc-theme-on-background)\",\n    color: \"var(--mdc-theme-text-primary-on-background)\"\n});\n\nconst titleClass = css({\n    display: \"flex\",\n    alignItems: \"center\"\n});\n\nconst actionsClass = css({\n    display: \"flex\",\n    justifyContent: \"flex-end\",\n    alignItems: \"center\"\n});\n\ninterface FormHeaderConfig extends UIElementConfig {\n    getTitle(props: FormElementRenderProps): string;\n    icon?: React.ReactElement;\n}\n\nexport class FormHeaderElement extends UIElement<FormHeaderConfig> {\n    public constructor(id: string, config: FormHeaderConfig) {\n        super(id, config);\n\n        this.useGrid(false);\n    }\n\n    public setIcon(icon: React.ReactElement) {\n        this.config.icon = icon;\n    }\n\n    public addAction(element: UIElement) {\n        this.addElement(element);\n    }\n\n    public override render(props: FormElementRenderProps): React.ReactNode {\n        const { icon, getTitle } = this.config;\n\n        return (\n            <Grid className={headerClass}>\n                <Cell span={6} className={titleClass}>\n                    <React.Fragment>\n                        {icon && <Icon className={iconClass} icon={icon} />}\n                        <Typography use=\"headline5\">{getTitle(props)}</Typography>\n                    </React.Fragment>\n                </Cell>\n                <Cell span={6} className={actionsClass}>\n                    {super.render(props)}\n                </Cell>\n            </Grid>\n        );\n    }\n}\n"],"mappings":"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"}
+{"version":3,"names":["_react","_interopRequireDefault","require","_emotion","_Grid","_Typography","_UIElement2","_Icon","iconClass","css","marginRight","color","headerClass","borderBottom","titleClass","display","alignItems","actionsClass","justifyContent","FormHeaderElement","exports","_UIElement","id","config","_this","_classCallCheck2","default","_callSuper2","useGrid","_inherits2","_createClass2","key","value","setIcon","icon","addAction","element","addElement","render","props","_this$config","getTitle","createElement","Grid","className","Cell","span","Fragment","Icon","Typography","use","_get2","_getPrototypeOf2","prototype","call","UIElement"],"sources":["FormHeaderElement.tsx"],"sourcesContent":["import React from \"react\";\nimport { css } from \"emotion\";\nimport { Cell, Grid } from \"@webiny/ui/Grid\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { UIElement, UIElementConfig } from \"~/ui/UIElement\";\nimport { Icon } from \"@webiny/ui/Icon\";\nimport { FormElementRenderProps } from \"~/ui/elements/form/FormElement\";\n\nconst iconClass = css({\n    marginRight: 15,\n    color: \"var(--mdc-theme-text-primary-on-background)\"\n});\n\nconst headerClass = css({\n    borderBottom: \"1px solid var(--mdc-theme-on-background)\",\n    color: \"var(--mdc-theme-text-primary-on-background)\"\n});\n\nconst titleClass = css({\n    display: \"flex\",\n    alignItems: \"center\"\n});\n\nconst actionsClass = css({\n    display: \"flex\",\n    justifyContent: \"flex-end\",\n    alignItems: \"center\"\n});\n\ninterface FormHeaderConfig extends UIElementConfig {\n    getTitle(props: FormElementRenderProps): string;\n    icon?: React.ReactElement;\n}\n\nexport class FormHeaderElement extends UIElement<FormHeaderConfig> {\n    public constructor(id: string, config: FormHeaderConfig) {\n        super(id, config);\n\n        this.useGrid(false);\n    }\n\n    public setIcon(icon: React.ReactElement) {\n        this.config.icon = icon;\n    }\n\n    public addAction(element: UIElement) {\n        this.addElement(element);\n    }\n\n    public override render(props: FormElementRenderProps): React.ReactNode {\n        const { icon, getTitle } = this.config;\n\n        return (\n            <Grid className={headerClass}>\n                <Cell span={6} className={titleClass}>\n                    <React.Fragment>\n                        {icon && <Icon className={iconClass} icon={icon} />}\n                        <Typography use=\"headline5\">{getTitle(props)}</Typography>\n                    </React.Fragment>\n                </Cell>\n                <Cell span={6} className={actionsClass}>\n                    {super.render(props)}\n                </Cell>\n            </Grid>\n        );\n    }\n}\n"],"mappings":";;;;;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AACA,IAAAG,WAAA,GAAAH,OAAA;AACA,IAAAI,WAAA,GAAAJ,OAAA;AACA,IAAAK,KAAA,GAAAL,OAAA;AAGA,IAAMM,SAAS,GAAG,IAAAC,YAAG,EAAC;EAClBC,WAAW,EAAE,EAAE;EACfC,KAAK,EAAE;AACX,CAAC,CAAC;AAEF,IAAMC,WAAW,GAAG,IAAAH,YAAG,EAAC;EACpBI,YAAY,EAAE,0CAA0C;EACxDF,KAAK,EAAE;AACX,CAAC,CAAC;AAEF,IAAMG,UAAU,GAAG,IAAAL,YAAG,EAAC;EACnBM,OAAO,EAAE,MAAM;EACfC,UAAU,EAAE;AAChB,CAAC,CAAC;AAEF,IAAMC,YAAY,GAAG,IAAAR,YAAG,EAAC;EACrBM,OAAO,EAAE,MAAM;EACfG,cAAc,EAAE,UAAU;EAC1BF,UAAU,EAAE;AAChB,CAAC,CAAC;AAAC,IAOUG,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,0BAAAE,UAAA;EAC1B,SAAAF,kBAAmBG,EAAU,EAAEC,MAAwB,EAAE;IAAA,IAAAC,KAAA;IAAA,IAAAC,gBAAA,CAAAC,OAAA,QAAAP,iBAAA;IACrDK,KAAA,OAAAG,WAAA,CAAAD,OAAA,QAAAP,iBAAA,GAAMG,EAAE,EAAEC,MAAM;IAEhBC,KAAA,CAAKI,OAAO,CAAC,KAAK,CAAC;IAAC,OAAAJ,KAAA;EACxB;EAAC,IAAAK,UAAA,CAAAH,OAAA,EAAAP,iBAAA,EAAAE,UAAA;EAAA,WAAAS,aAAA,CAAAJ,OAAA,EAAAP,iBAAA;IAAAY,GAAA;IAAAC,KAAA,EAED,SAAAC,QAAeC,IAAwB,EAAE;MACrC,IAAI,CAACX,MAAM,CAACW,IAAI,GAAGA,IAAI;IAC3B;EAAC;IAAAH,GAAA;IAAAC,KAAA,EAED,SAAAG,UAAiBC,OAAkB,EAAE;MACjC,IAAI,CAACC,UAAU,CAACD,OAAO,CAAC;IAC5B;EAAC;IAAAL,GAAA;IAAAC,KAAA,EAED,SAAAM,OAAuBC,KAA6B,EAAmB;MACnE,IAAAC,YAAA,GAA2B,IAAI,CAACjB,MAAM;QAA9BW,IAAI,GAAAM,YAAA,CAAJN,IAAI;QAAEO,QAAQ,GAAAD,YAAA,CAARC,QAAQ;MAEtB,oBACIzC,MAAA,CAAA0B,OAAA,CAAAgB,aAAA,CAACtC,KAAA,CAAAuC,IAAI;QAACC,SAAS,EAAEhC;MAAY,gBACzBZ,MAAA,CAAA0B,OAAA,CAAAgB,aAAA,CAACtC,KAAA,CAAAyC,IAAI;QAACC,IAAI,EAAE,CAAE;QAACF,SAAS,EAAE9B;MAAW,gBACjCd,MAAA,CAAA0B,OAAA,CAAAgB,aAAA,CAAC1C,MAAA,CAAA0B,OAAK,CAACqB,QAAQ,QACVb,IAAI,iBAAIlC,MAAA,CAAA0B,OAAA,CAAAgB,aAAA,CAACnC,KAAA,CAAAyC,IAAI;QAACJ,SAAS,EAAEpC,SAAU;QAAC0B,IAAI,EAAEA;MAAK,CAAE,CAAC,eACnDlC,MAAA,CAAA0B,OAAA,CAAAgB,aAAA,CAACrC,WAAA,CAAA4C,UAAU;QAACC,GAAG,EAAC;MAAW,GAAET,QAAQ,CAACF,KAAK,CAAc,CAC7C,CACd,CAAC,eACPvC,MAAA,CAAA0B,OAAA,CAAAgB,aAAA,CAACtC,KAAA,CAAAyC,IAAI;QAACC,IAAI,EAAE,CAAE;QAACF,SAAS,EAAE3B;MAAa,OAAAkC,KAAA,CAAAzB,OAAA,MAAA0B,gBAAA,CAAA1B,OAAA,EAAAP,iBAAA,CAAAkC,SAAA,mBAAAC,IAAA,OACrBf,KAAK,CACjB,CACJ,CAAC;IAEf;EAAC;AAAA,EA/BkCgB,qBAAS","ignoreList":[]}

package/ui/views/FormView.js

@@ -7,10 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.FormView = 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 _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 _react = _interopRequireDefault(require("react"));
 var _Progress = require("@webiny/ui/Progress");
 var _FormElement = require("../elements/form/FormElement");
@@ -21,9 +21,7 @@ var _FormHeaderElement = require("./FormView/FormHeaderElement");
 var _FormFooterElement = require("./FormView/FormFooterElement");
 var _FormContainerElement = require("./FormView/FormContainerElement");
 var _UIView2 = require("../UIView");
-var FormView = /*#__PURE__*/function (_UIView) {
-  (0, _inherits2.default)(FormView, _UIView);
-  var _super = (0, _createSuper2.default)(FormView);
+var FormView = exports.FormView = /*#__PURE__*/function (_UIView) {
   function FormView(id, config) {
     var _this;
     (0, _classCallCheck2.default)(this, FormView);
@@ -33,13 +31,14 @@ var FormView = /*#__PURE__*/function (_UIView) {
     if (!("setupForm" in config)) {
       config.setupForm = true;
     }
-    _this = _super.call(this, id, config);
+    _this = (0, _callSuper2.default)(this, FormView, [id, config]);
     _this.addElements();
     _this.useGrid(false);
     _this.applyPlugins(FormView);
     return _this;
   }
-  (0, _createClass2.default)(FormView, [{
+  (0, _inherits2.default)(FormView, _UIView);
+  return (0, _createClass2.default)(FormView, [{
     key: "addElement",
     value: function addElement(element) {
       if (element.id === "form" || element.id === "formContainer") {
@@ -162,8 +161,6 @@ var FormView = /*#__PURE__*/function (_UIView) {
       cancelButton.moveToTheBeginningOf(footer);
     }
   }]);
-  return FormView;
 }(_UIView2.UIView);
-exports.FormView = FormView;
 
 //# sourceMappingURL=FormView.js.map

package/ui/views/FormView.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_Progress","_FormElement","_ButtonElement","_GenericElement","_FormContentElement","_FormHeaderElement","_FormFooterElement","_FormContainerElement","_UIView2","FormView","_UIView","_inherits2","default","_super","_createSuper2","id","config","_this","_classCallCheck2","setupForm","call","addElements","useGrid","applyPlugins","_createClass2","key","value","addElement","element","_get2","_getPrototypeOf2","prototype","getFormContainer","setTitle","title","getTitle","setOnSubmit","onSubmit","setFormData","getter","getFormData","getElement","getFormContentElement","getFormHeaderElement","getFormFooterElement","getSubmitButtonElement","_this2","formContainer","FormContainerElement","testId","className","noElevation","form","FormElement","data","getData","GenericElement","isLoading","createElement","CircularProgress","FormHeaderElement","props","FormContentElement","footer","FormFooterElement","submitButton","ButtonElement","type","label","onClick","formProps","submit","moveToTheEndOf","cancelButton","onCancel","shouldRender","moveToTheBeginningOf","UIView","exports"],"sources":["FormView.tsx"],"sourcesContent":["import React from \"react\";\nimport { FormOnSubmit } from \"@webiny/form\";\nimport { CircularProgress } from \"@webiny/ui/Progress\";\nimport { UIElement, UIElementConfig } from \"~/ui/UIElement\";\nimport { FormElement, FormElementRenderProps } from \"~/ui/elements/form/FormElement\";\nimport { ButtonElement } from \"~/ui/elements/ButtonElement\";\nimport { GenericElement } from \"~/ui/elements/GenericElement\";\nimport { FormContentElement } from \"./FormView/FormContentElement\";\nimport { FormHeaderElement } from \"./FormView/FormHeaderElement\";\nimport { FormFooterElement } from \"./FormView/FormFooterElement\";\nimport { FormContainerElement } from \"./FormView/FormContainerElement\";\nimport { UIView } from \"~/ui/UIView\";\n\nexport interface FormViewConfig extends UIElementConfig {\n    setupForm?: boolean;\n    onSubmit?: FormOnSubmit;\n    getTitle?: (props: FormElementRenderProps) => string;\n    getFormData?: () => Record<string, any>;\n    isLoading?: () => boolean;\n    onCancel?: () => void;\n    testId?: string;\n    noElevation?: boolean;\n    className?: string;\n}\n\ninterface GetterWithProps<T> {\n    (props: FormElementRenderProps): T;\n}\n\ninterface GetterWithoutProps<T> {\n    (): T;\n}\n\nexport class FormView extends UIView<FormViewConfig> {\n    public constructor(id: string, config?: FormViewConfig) {\n        if (!config) {\n            config = {};\n        }\n        if (!(\"setupForm\" in config)) {\n            config.setupForm = true;\n        }\n\n        super(id, config);\n\n        this.addElements();\n        this.useGrid(false);\n\n        this.applyPlugins(FormView);\n    }\n\n    public override addElement<TElement extends UIElement = UIElement>(\n        element: TElement\n    ): TElement {\n        if (element.id === \"form\" || element.id === \"formContainer\") {\n            return super.addElement(element);\n        }\n\n        return this.getFormContainer().addElement(element);\n    }\n\n    public setTitle(title: string | GetterWithProps<string>): void {\n        if (typeof title === \"string\") {\n            this.config.getTitle = () => title;\n            return;\n        }\n        this.config.getTitle = title;\n    }\n\n    public setOnSubmit(onSubmit: FormOnSubmit): void {\n        this.config.onSubmit = onSubmit;\n    }\n\n    public setFormData(getter: GetterWithoutProps<Record<string, any>>): void {\n        this.config.getFormData = getter;\n    }\n\n    public getFormContainer(): FormContainerElement {\n        return this.getElement(\"formContainer\") as FormContainerElement;\n    }\n\n    public getFormContentElement(): FormContentElement {\n        return this.getElement(\"formContent\") as FormContentElement;\n    }\n\n    public getFormHeaderElement(): FormHeaderElement {\n        return this.getElement(\"formHeader\") as FormHeaderElement;\n    }\n\n    public getFormFooterElement(): FormFooterElement {\n        return this.getElement(\"formFooter\") as FormFooterElement;\n    }\n\n    public getSubmitButtonElement(): ButtonElement {\n        return this.getFormFooterElement().getElement(\"submit\") as ButtonElement;\n    }\n\n    private addElements(): void {\n        const formContainer = new FormContainerElement(\"formContainer\", {\n            testId: this.config.testId,\n            className: this.config.className,\n            noElevation: this.config.noElevation\n        });\n\n        if (this.config.setupForm) {\n            const form = this.addElement(\n                new FormElement(\"form\", {\n                    onSubmit: (data, form) => {\n                        if (!this.config.onSubmit) {\n                            return;\n                        }\n                        return this.config.onSubmit(data, form);\n                    },\n                    getData: () => {\n                        if (!this.config.getFormData) {\n                            return {};\n                        }\n                        return this.config.getFormData();\n                    }\n                })\n            ) as FormElement;\n\n            form.addElement(formContainer);\n        } else {\n            this.addElement(formContainer);\n        }\n\n        this.addElement(\n            new GenericElement(\"loading\", () => {\n                if (typeof this.config.isLoading !== \"function\") {\n                    return null;\n                }\n\n                return this.config.isLoading() ? <CircularProgress /> : null;\n            })\n        );\n\n        this.addElement(\n            new FormHeaderElement(\"formHeader\", {\n                getTitle: props => {\n                    if (!this.config.getTitle) {\n                        return \"\";\n                    }\n                    return this.config.getTitle(props);\n                }\n            })\n        );\n\n        this.addElement(new FormContentElement(\"formContent\"));\n\n        const footer = new FormFooterElement(\"formFooter\");\n        this.addElement(footer);\n\n        const submitButton = new ButtonElement<FormElementRenderProps>(\"submit\", {\n            type: \"primary\",\n            label: \"Save\",\n            onClick: props => props.formProps.submit()\n        });\n\n        submitButton.moveToTheEndOf(footer);\n\n        const cancelButton = footer.addElement(\n            new ButtonElement(\"cancel\", {\n                type: \"default\",\n                label: \"Cancel\",\n                onClick: () => {\n                    if (!this.config.onCancel) {\n                        return;\n                    }\n                    this.config.onCancel();\n                },\n                shouldRender: () => typeof this.config.onCancel === \"function\"\n            })\n        );\n\n        cancelButton.moveToTheBeginningOf(footer);\n    }\n}\n"],"mappings":"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"}
+{"version":3,"names":["_react","_interopRequireDefault","require","_Progress","_FormElement","_ButtonElement","_GenericElement","_FormContentElement","_FormHeaderElement","_FormFooterElement","_FormContainerElement","_UIView2","FormView","exports","_UIView","id","config","_this","_classCallCheck2","default","setupForm","_callSuper2","addElements","useGrid","applyPlugins","_inherits2","_createClass2","key","value","addElement","element","_get2","_getPrototypeOf2","prototype","call","getFormContainer","setTitle","title","getTitle","setOnSubmit","onSubmit","setFormData","getter","getFormData","getElement","getFormContentElement","getFormHeaderElement","getFormFooterElement","getSubmitButtonElement","_this2","formContainer","FormContainerElement","testId","className","noElevation","form","FormElement","data","getData","GenericElement","isLoading","createElement","CircularProgress","FormHeaderElement","props","FormContentElement","footer","FormFooterElement","submitButton","ButtonElement","type","label","onClick","formProps","submit","moveToTheEndOf","cancelButton","onCancel","shouldRender","moveToTheBeginningOf","UIView"],"sources":["FormView.tsx"],"sourcesContent":["import React from \"react\";\nimport { FormOnSubmit } from \"@webiny/form\";\nimport { CircularProgress } from \"@webiny/ui/Progress\";\nimport { UIElement, UIElementConfig } from \"~/ui/UIElement\";\nimport { FormElement, FormElementRenderProps } from \"~/ui/elements/form/FormElement\";\nimport { ButtonElement } from \"~/ui/elements/ButtonElement\";\nimport { GenericElement } from \"~/ui/elements/GenericElement\";\nimport { FormContentElement } from \"./FormView/FormContentElement\";\nimport { FormHeaderElement } from \"./FormView/FormHeaderElement\";\nimport { FormFooterElement } from \"./FormView/FormFooterElement\";\nimport { FormContainerElement } from \"./FormView/FormContainerElement\";\nimport { UIView } from \"~/ui/UIView\";\n\nexport interface FormViewConfig extends UIElementConfig {\n    setupForm?: boolean;\n    onSubmit?: FormOnSubmit;\n    getTitle?: (props: FormElementRenderProps) => string;\n    getFormData?: () => Record<string, any>;\n    isLoading?: () => boolean;\n    onCancel?: () => void;\n    testId?: string;\n    noElevation?: boolean;\n    className?: string;\n}\n\ninterface GetterWithProps<T> {\n    (props: FormElementRenderProps): T;\n}\n\ninterface GetterWithoutProps<T> {\n    (): T;\n}\n\nexport class FormView extends UIView<FormViewConfig> {\n    public constructor(id: string, config?: FormViewConfig) {\n        if (!config) {\n            config = {};\n        }\n        if (!(\"setupForm\" in config)) {\n            config.setupForm = true;\n        }\n\n        super(id, config);\n\n        this.addElements();\n        this.useGrid(false);\n\n        this.applyPlugins(FormView);\n    }\n\n    public override addElement<TElement extends UIElement = UIElement>(\n        element: TElement\n    ): TElement {\n        if (element.id === \"form\" || element.id === \"formContainer\") {\n            return super.addElement(element);\n        }\n\n        return this.getFormContainer().addElement(element);\n    }\n\n    public setTitle(title: string | GetterWithProps<string>): void {\n        if (typeof title === \"string\") {\n            this.config.getTitle = () => title;\n            return;\n        }\n        this.config.getTitle = title;\n    }\n\n    public setOnSubmit(onSubmit: FormOnSubmit): void {\n        this.config.onSubmit = onSubmit;\n    }\n\n    public setFormData(getter: GetterWithoutProps<Record<string, any>>): void {\n        this.config.getFormData = getter;\n    }\n\n    public getFormContainer(): FormContainerElement {\n        return this.getElement(\"formContainer\") as FormContainerElement;\n    }\n\n    public getFormContentElement(): FormContentElement {\n        return this.getElement(\"formContent\") as FormContentElement;\n    }\n\n    public getFormHeaderElement(): FormHeaderElement {\n        return this.getElement(\"formHeader\") as FormHeaderElement;\n    }\n\n    public getFormFooterElement(): FormFooterElement {\n        return this.getElement(\"formFooter\") as FormFooterElement;\n    }\n\n    public getSubmitButtonElement(): ButtonElement {\n        return this.getFormFooterElement().getElement(\"submit\") as ButtonElement;\n    }\n\n    private addElements(): void {\n        const formContainer = new FormContainerElement(\"formContainer\", {\n            testId: this.config.testId,\n            className: this.config.className,\n            noElevation: this.config.noElevation\n        });\n\n        if (this.config.setupForm) {\n            const form = this.addElement(\n                new FormElement(\"form\", {\n                    onSubmit: (data, form) => {\n                        if (!this.config.onSubmit) {\n                            return;\n                        }\n                        return this.config.onSubmit(data, form);\n                    },\n                    getData: () => {\n                        if (!this.config.getFormData) {\n                            return {};\n                        }\n                        return this.config.getFormData();\n                    }\n                })\n            ) as FormElement;\n\n            form.addElement(formContainer);\n        } else {\n            this.addElement(formContainer);\n        }\n\n        this.addElement(\n            new GenericElement(\"loading\", () => {\n                if (typeof this.config.isLoading !== \"function\") {\n                    return null;\n                }\n\n                return this.config.isLoading() ? <CircularProgress /> : null;\n            })\n        );\n\n        this.addElement(\n            new FormHeaderElement(\"formHeader\", {\n                getTitle: props => {\n                    if (!this.config.getTitle) {\n                        return \"\";\n                    }\n                    return this.config.getTitle(props);\n                }\n            })\n        );\n\n        this.addElement(new FormContentElement(\"formContent\"));\n\n        const footer = new FormFooterElement(\"formFooter\");\n        this.addElement(footer);\n\n        const submitButton = new ButtonElement<FormElementRenderProps>(\"submit\", {\n            type: \"primary\",\n            label: \"Save\",\n            onClick: props => props.formProps.submit()\n        });\n\n        submitButton.moveToTheEndOf(footer);\n\n        const cancelButton = footer.addElement(\n            new ButtonElement(\"cancel\", {\n                type: \"default\",\n                label: \"Cancel\",\n                onClick: () => {\n                    if (!this.config.onCancel) {\n                        return;\n                    }\n                    this.config.onCancel();\n                },\n                shouldRender: () => typeof this.config.onCancel === \"function\"\n            })\n        );\n\n        cancelButton.moveToTheBeginningOf(footer);\n    }\n}\n"],"mappings":"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","ignoreList":[]}

package/ui/views/OverlayView/ContentElement.js

@@ -7,38 +7,43 @@ Object.defineProperty(exports, "__esModule", {
 exports.ContentElement = 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 _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 _base = _interopRequireDefault(require("@emotion/styled/base"));
 var _react = _interopRequireDefault(require("react"));
-var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _UIElement2 = require("../../UIElement");
-var ContentWrapper = /*#__PURE__*/(0, _styled.default)("div", {
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+var ContentWrapper = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "production" ? {
+  target: "exqtwog0"
+} : {
   target: "exqtwog0",
   label: "ContentWrapper"
-})({
-  width: "100%",
-  paddingTop: 65
+})(process.env.NODE_ENV === "production" ? {
+  name: "1msblsr",
+  styles: "width:100%;padding-top:65px"
+} : {
+  name: "1msblsr",
+  styles: "width:100%;padding-top:65px",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbnRlbnRFbGVtZW50LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFJdUIiLCJmaWxlIjoiQ29udGVudEVsZW1lbnQudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBVSUVsZW1lbnQsIFVpRWxlbWVudFJlbmRlclByb3BzIH0gZnJvbSBcIn4vdWkvVUlFbGVtZW50XCI7XG5cbmNvbnN0IENvbnRlbnRXcmFwcGVyID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgICB3aWR0aDogXCIxMDAlXCIsXG4gICAgcGFkZGluZ1RvcDogNjVcbn0pO1xuXG5leHBvcnQgY2xhc3MgQ29udGVudEVsZW1lbnQgZXh0ZW5kcyBVSUVsZW1lbnQge1xuICAgIGNvbnN0cnVjdG9yKGlkOiBzdHJpbmcpIHtcbiAgICAgICAgc3VwZXIoaWQpO1xuICAgICAgICB0aGlzLnVzZUdyaWQoZmFsc2UpO1xuICAgIH1cblxuICAgIHB1YmxpYyBvdmVycmlkZSByZW5kZXIocHJvcHM6IFVpRWxlbWVudFJlbmRlclByb3BzKTogUmVhY3QuUmVhY3ROb2RlIHtcbiAgICAgICAgcmV0dXJuIDxDb250ZW50V3JhcHBlcj57c3VwZXIucmVuZGVyKHByb3BzKX08L0NvbnRlbnRXcmFwcGVyPjtcbiAgICB9XG59XG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
-var ContentElement = /*#__PURE__*/function (_UIElement) {
-  (0, _inherits2.default)(ContentElement, _UIElement);
-  var _super = (0, _createSuper2.default)(ContentElement);
+var ContentElement = exports.ContentElement = /*#__PURE__*/function (_UIElement) {
   function ContentElement(id) {
     var _this;
     (0, _classCallCheck2.default)(this, ContentElement);
-    _this = _super.call(this, id);
+    _this = (0, _callSuper2.default)(this, ContentElement, [id]);
     _this.useGrid(false);
     return _this;
   }
-  (0, _createClass2.default)(ContentElement, [{
+  (0, _inherits2.default)(ContentElement, _UIElement);
+  return (0, _createClass2.default)(ContentElement, [{
     key: "render",
     value: function render(props) {
       return /*#__PURE__*/_react.default.createElement(ContentWrapper, null, (0, _get2.default)((0, _getPrototypeOf2.default)(ContentElement.prototype), "render", this).call(this, props));
     }
   }]);
-  return ContentElement;
 }(_UIElement2.UIElement);
-exports.ContentElement = ContentElement;
 
 //# sourceMappingURL=ContentElement.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_styled","_UIElement2","ContentWrapper","styled","target","label","width","paddingTop","ContentElement","_UIElement","_inherits2","default","_super","_createSuper2","id","_this","_classCallCheck2","call","useGrid","_createClass2","key","value","render","props","createElement","_get2","_getPrototypeOf2","prototype","UIElement","exports"],"sources":["ContentElement.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { UIElement, UiElementRenderProps } from \"~/ui/UIElement\";\n\nconst ContentWrapper = styled(\"div\")({\n    width: \"100%\",\n    paddingTop: 65\n});\n\nexport class ContentElement extends UIElement {\n    constructor(id: string) {\n        super(id);\n        this.useGrid(false);\n    }\n\n    public override render(props: UiElementRenderProps): React.ReactNode {\n        return <ContentWrapper>{super.render(props)}</ContentWrapper>;\n    }\n}\n"],"mappings":";;;;;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,WAAA,GAAAF,OAAA;AAEA,IAAMG,cAAc,oBAAGC,eAAM,EAAC,KAAK;EAAAC,MAAA;EAAAC,KAAA;AAAA,GAAE;EACjCC,KAAK,EAAE,MAAM;EACbC,UAAU,EAAE;AAChB,CAAC,CAAC;AAAC,IAEUC,cAAc,0BAAAC,UAAA;EAAA,IAAAC,UAAA,CAAAC,OAAA,EAAAH,cAAA,EAAAC,UAAA;EAAA,IAAAG,MAAA,OAAAC,aAAA,CAAAF,OAAA,EAAAH,cAAA;EACvB,SAAAA,eAAYM,EAAU,EAAE;IAAA,IAAAC,KAAA;IAAA,IAAAC,gBAAA,CAAAL,OAAA,QAAAH,cAAA;IACpBO,KAAA,GAAAH,MAAA,CAAAK,IAAA,OAAMH,EAAE;IACRC,KAAA,CAAKG,OAAO,CAAC,KAAK,CAAC;IAAC,OAAAH,KAAA;EACxB;EAAC,IAAAI,aAAA,CAAAR,OAAA,EAAAH,cAAA;IAAAY,GAAA;IAAAC,KAAA,EAED,SAAAC,OAAuBC,KAA2B,EAAmB;MACjE,oBAAO1B,MAAA,CAAAc,OAAA,CAAAa,aAAA,CAACtB,cAAc,YAAAuB,KAAA,CAAAd,OAAA,MAAAe,gBAAA,CAAAf,OAAA,EAAAH,cAAA,CAAAmB,SAAA,mBAAAV,IAAA,OAAeM,KAAK,CAAkB,CAAC;IACjE;EAAC;EAAA,OAAAf,cAAA;AAAA,EAR+BoB,qBAAS;AAAAC,OAAA,CAAArB,cAAA,GAAAA,cAAA"}
+{"version":3,"names":["_react","_interopRequireDefault","require","_UIElement2","_EMOTION_STRINGIFIED_CSS_ERROR__","ContentWrapper","_base","default","process","env","NODE_ENV","target","label","name","styles","map","toString","ContentElement","exports","_UIElement","id","_this","_classCallCheck2","_callSuper2","useGrid","_inherits2","_createClass2","key","value","render","props","createElement","_get2","_getPrototypeOf2","prototype","call","UIElement"],"sources":["ContentElement.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { UIElement, UiElementRenderProps } from \"~/ui/UIElement\";\n\nconst ContentWrapper = styled(\"div\")({\n    width: \"100%\",\n    paddingTop: 65\n});\n\nexport class ContentElement extends UIElement {\n    constructor(id: string) {\n        super(id);\n        this.useGrid(false);\n    }\n\n    public override render(props: UiElementRenderProps): React.ReactNode {\n        return <ContentWrapper>{super.render(props)}</ContentWrapper>;\n    }\n}\n"],"mappings":";;;;;;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,WAAA,GAAAD,OAAA;AAAiE,SAAAE,iCAAA;AAEjE,IAAMC,cAAc,gBAAG,IAAAC,KAAA,CAAAC,OAAA,EAAO,KAAK,EAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,EAAC,CAAAJ,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAG,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,GAAA;EAAAC,QAAA,EAAAZ;AAAA,CAGnC,CAAC;AAAC,IAEUa,cAAc,GAAAC,OAAA,CAAAD,cAAA,0BAAAE,UAAA;EACvB,SAAAF,eAAYG,EAAU,EAAE;IAAA,IAAAC,KAAA;IAAA,IAAAC,gBAAA,CAAAf,OAAA,QAAAU,cAAA;IACpBI,KAAA,OAAAE,WAAA,CAAAhB,OAAA,QAAAU,cAAA,GAAMG,EAAE;IACRC,KAAA,CAAKG,OAAO,CAAC,KAAK,CAAC;IAAC,OAAAH,KAAA;EACxB;EAAC,IAAAI,UAAA,CAAAlB,OAAA,EAAAU,cAAA,EAAAE,UAAA;EAAA,WAAAO,aAAA,CAAAnB,OAAA,EAAAU,cAAA;IAAAU,GAAA;IAAAC,KAAA,EAED,SAAAC,OAAuBC,KAA2B,EAAmB;MACjE,oBAAO9B,MAAA,CAAAO,OAAA,CAAAwB,aAAA,CAAC1B,cAAc,YAAA2B,KAAA,CAAAzB,OAAA,MAAA0B,gBAAA,CAAA1B,OAAA,EAAAU,cAAA,CAAAiB,SAAA,mBAAAC,IAAA,OAAeL,KAAK,CAAkB,CAAC;IACjE;EAAC;AAAA,EAR+BM,qBAAS","ignoreList":[]}

package/ui/views/OverlayView/HeaderElement.js

@@ -7,9 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 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 _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/callSuper"));
 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");
@@ -19,21 +18,19 @@ 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 = /*#__PURE__*/(0, _emotion.css)({
+var width = (0, _emotion.css)({
   width: "33%"
-}, "label:width;");
+});
 
 // !GOOD FIRST ISSUE!
 // Extract rendering and styling into a HeaderElementRenderer class.
-var HeaderElement = /*#__PURE__*/function (_UIElement) {
-  (0, _inherits2.default)(HeaderElement, _UIElement);
-  var _super = (0, _createSuper2.default)(HeaderElement);
+var HeaderElement = exports.HeaderElement = /*#__PURE__*/function (_UIElement) {
   function HeaderElement(id, config) {
     var _this;
     (0, _classCallCheck2.default)(this, HeaderElement);
-    _this = _super.call(this, id, config);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "_leftSection", new _PlaceholderElement.PlaceholderElement("leftSection"));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "_rightSection", new _PlaceholderElement.PlaceholderElement("rightSection"));
+    _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;
@@ -42,7 +39,8 @@ var HeaderElement = /*#__PURE__*/function (_UIElement) {
     _this.useGrid(false);
     return _this;
   }
-  (0, _createClass2.default)(HeaderElement, [{
+  (0, _inherits2.default)(HeaderElement, _UIElement);
+  return (0, _createClass2.default)(HeaderElement, [{
     key: "setTitle",
     value: function setTitle(title) {
       this.config.getTitle = title;
@@ -106,8 +104,6 @@ var HeaderElement = /*#__PURE__*/function (_UIElement) {
       })));
     }
   }]);
-  return HeaderElement;
 }(_UIElement2.UIElement);
-exports.HeaderElement = HeaderElement;
 
 //# 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","_UIElement","_inherits2","default","_super","_createSuper2","id","config","_this","_classCallCheck2","call","_defineProperty2","_assertThisInitialized2","PlaceholderElement","_centerSection","HeaderTitleElement","title","getTitle","useGrid","_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","exports"],"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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"}
+{"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":[]}

package/ui/views/OverlayView/HeaderTitleElement.js

@@ -7,20 +7,19 @@ Object.defineProperty(exports, "__esModule", {
 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 _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);
+var HeaderTitleElementRenderer = exports.HeaderTitleElementRenderer = /*#__PURE__*/function (_UIRenderer) {
   function HeaderTitleElementRenderer() {
     (0, _classCallCheck2.default)(this, HeaderTitleElementRenderer);
-    return _super.apply(this, arguments);
+    return (0, _callSuper2.default)(this, HeaderTitleElementRenderer, arguments);
   }
-  (0, _createClass2.default)(HeaderTitleElementRenderer, [{
+  (0, _inherits2.default)(HeaderTitleElementRenderer, _UIRenderer);
+  return (0, _createClass2.default)(HeaderTitleElementRenderer, [{
     key: "render",
     value: function render(_ref) {
       var element = _ref.element;
@@ -33,21 +32,17 @@ var HeaderTitleElementRenderer = /*#__PURE__*/function (_UIRenderer) {
       }, element.config.title());
     }
   }]);
-  return HeaderTitleElementRenderer;
 }(_UIRenderer2.UIRenderer);
-exports.HeaderTitleElementRenderer = HeaderTitleElementRenderer;
-var HeaderTitleElement = /*#__PURE__*/function (_UIElement) {
-  (0, _inherits2.default)(HeaderTitleElement, _UIElement);
-  var _super2 = (0, _createSuper2.default)(HeaderTitleElement);
+var HeaderTitleElement = exports.HeaderTitleElement = /*#__PURE__*/function (_UIElement) {
   function HeaderTitleElement(id, config) {
     var _this;
     (0, _classCallCheck2.default)(this, HeaderTitleElement);
-    _this = _super2.call(this, id, config);
+    _this = (0, _callSuper2.default)(this, HeaderTitleElement, [id, config]);
     _this.addRenderer(new HeaderTitleElementRenderer());
     return _this;
   }
+  (0, _inherits2.default)(HeaderTitleElement, _UIElement);
   return (0, _createClass2.default)(HeaderTitleElement);
 }(_UIElement2.UIElement);
-exports.HeaderTitleElement = HeaderTitleElement;
 
 //# sourceMappingURL=HeaderTitleElement.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_UIElement2","_Typography","_UIRenderer2","HeaderTitleElementRenderer","_UIRenderer","_inherits2","default","_super","_createSuper2","_classCallCheck2","apply","arguments","_createClass2","key","value","render","_ref","element","createElement","Typography","style","margin","color","use","config","title","UIRenderer","exports","HeaderTitleElement","_UIElement","_super2","id","_this","call","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,0BAAAC,WAAA;EAAA,IAAAC,UAAA,CAAAC,OAAA,EAAAH,0BAAA,EAAAC,WAAA;EAAA,IAAAG,MAAA,OAAAC,aAAA,CAAAF,OAAA,EAAAH,0BAAA;EAAA,SAAAA,2BAAA;IAAA,IAAAM,gBAAA,CAAAH,OAAA,QAAAH,0BAAA;IAAA,OAAAI,MAAA,CAAAG,KAAA,OAAAC,SAAA;EAAA;EAAA,IAAAC,aAAA,CAAAN,OAAA,EAAAH,0BAAA;IAAAU,GAAA;IAAAC,KAAA,EACnC,SAAAC,OAAAC,IAAA,EAAyF;MAAA,IAAhEC,OAAO,GAAAD,IAAA,CAAPC,OAAO;MAC5B,oBACIpB,MAAA,CAAAS,OAAA,CAAAY,aAAA,CAACjB,WAAA,CAAAkB,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;EAAA,OAAAtB,0BAAA;AAAA,EAV2CuB,uBAAU;AAAAC,OAAA,CAAAxB,0BAAA,GAAAA,0BAAA;AAAA,IAa7CyB,kBAAkB,0BAAAC,UAAA;EAAA,IAAAxB,UAAA,CAAAC,OAAA,EAAAsB,kBAAA,EAAAC,UAAA;EAAA,IAAAC,OAAA,OAAAtB,aAAA,CAAAF,OAAA,EAAAsB,kBAAA;EAC3B,SAAAA,mBAAmBG,EAAU,EAAEP,MAAgC,EAAE;IAAA,IAAAQ,KAAA;IAAA,IAAAvB,gBAAA,CAAAH,OAAA,QAAAsB,kBAAA;IAC7DI,KAAA,GAAAF,OAAA,CAAAG,IAAA,OAAMF,EAAE,EAAEP,MAAM;IAEhBQ,KAAA,CAAKE,WAAW,CAAC,IAAI/B,0BAA0B,CAAC,CAAC,CAAC;IAAC,OAAA6B,KAAA;EACvD;EAAC,WAAApB,aAAA,CAAAN,OAAA,EAAAsB,kBAAA;AAAA,EALmCO,qBAAS;AAAAR,OAAA,CAAAC,kBAAA,GAAAA,kBAAA"}
+{"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,SAAAC,OAAAC,IAAA,EAAyF;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":[]}