@webiny/app-admin 5.24.0 → 5.25.0-beta.2

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

@@ -0,0 +1 @@
+{"version":3,"sources":["FormContentElement.tsx"],"names":["UIElement","FormContentElement"],"mappings":";;;;AAAA,SAASA,SAAT;AAEA,WAAaC,kBAAb;AAAA;;AAAA;;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA,EAAwCD,SAAxC","sourcesContent":["import { UIElement } from \"~/ui/UIElement\";\n\nexport class FormContentElement extends UIElement {}\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["FormFooterElement.tsx"],"names":["React","styled","UIElement","ButtonWrapper","display","justifyContent","borderTop","color","textAlign","padding","marginLeft","FormFooterElement","id","useGrid","props"],"mappings":";;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,MAAP,MAAmB,iBAAnB;AACA,SAASC,SAAT;AAEA,IAAMC,aAAa,gBAAGF,MAAH,CAAU,KAAV;AAAA;AAAA;AAAA,GAAiB;AAChCG,EAAAA,OAAO,EAAE,MADuB;AAEhCC,EAAAA,cAAc,EAAE,eAFgB;AAGhCC,EAAAA,SAAS,EAAE,0CAHqB;AAIhCC,EAAAA,KAAK,EAAE,6CAJyB;AAKhCC,EAAAA,SAAS,EAAE,OALqB;AAMhCC,EAAAA,OAAO,EAAE,EANuB;AAOhC,kBAAgB;AACZC,IAAAA,UAAU,EAAE;AADA;AAPgB,CAAjB,CAAnB;AAYA,WAAaC,iBAAb;AAAA;;AAAA;;AACI,6BAAmBC,EAAnB,EAA+B;AAAA;;AAAA;;AAC3B,8BAAMA,EAAN;;AAEA,UAAKC,OAAL,CAAa,KAAb;;AAH2B;AAI9B;;AALL;AAAA;AAAA,WAOI,gBAAuBC,KAAvB,EAAoD;AAChD,0BAAO,oBAAC,aAAD,sFAA6BA,KAA7B,EAAP;AACH;AATL;;AAAA;AAAA,EAAuCZ,SAAvC","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"]}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["FormHeaderElement.tsx"],"names":["React","css","Cell","Grid","Typography","UIElement","Icon","iconClass","marginRight","color","headerClass","borderBottom","titleClass","display","alignItems","actionsClass","justifyContent","FormHeaderElement","id","config","useGrid","icon","element","addElement","props","getTitle"],"mappings":";;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,GAAT,QAAoB,SAApB;AACA,SAASC,IAAT,EAAeC,IAAf,QAA2B,iBAA3B;AACA,SAASC,UAAT,QAA2B,uBAA3B;AACA,SAASC,SAAT;AACA,SAASC,IAAT,QAAqB,iBAArB;AAGA,IAAMC,SAAS,gBAAGN,GAAG,CAAC;AAClBO,EAAAA,WAAW,EAAE,EADK;AAElBC,EAAAA,KAAK,EAAE;AAFW,CAAD,qBAArB;AAKA,IAAMC,WAAW,gBAAGT,GAAG,CAAC;AACpBU,EAAAA,YAAY,EAAE,0CADM;AAEpBF,EAAAA,KAAK,EAAE;AAFa,CAAD,uBAAvB;AAKA,IAAMG,UAAU,gBAAGX,GAAG,CAAC;AACnBY,EAAAA,OAAO,EAAE,MADU;AAEnBC,EAAAA,UAAU,EAAE;AAFO,CAAD,sBAAtB;AAKA,IAAMC,YAAY,gBAAGd,GAAG,CAAC;AACrBY,EAAAA,OAAO,EAAE,MADY;AAErBG,EAAAA,cAAc,EAAE,UAFK;AAGrBF,EAAAA,UAAU,EAAE;AAHS,CAAD,wBAAxB;AAWA,WAAaG,iBAAb;AAAA;;AAAA;;AACI,6BAAmBC,EAAnB,EAA+BC,MAA/B,EAAyD;AAAA;;AAAA;;AACrD,8BAAMD,EAAN,EAAUC,MAAV;;AAEA,UAAKC,OAAL,CAAa,KAAb;;AAHqD;AAIxD;;AALL;AAAA;AAAA,WAOI,iBAAeC,IAAf,EAAyC;AACrC,WAAKF,MAAL,CAAYE,IAAZ,GAAmBA,IAAnB;AACH;AATL;AAAA;AAAA,WAWI,mBAAiBC,OAAjB,EAAqC;AACjC,WAAKC,UAAL,CAAgBD,OAAhB;AACH;AAbL;AAAA;AAAA,WAeI,gBAAuBE,KAAvB,EAAuE;AACnE,yBAA2B,KAAKL,MAAhC;AAAA,UAAQE,IAAR,gBAAQA,IAAR;AAAA,UAAcI,QAAd,gBAAcA,QAAd;AAEA,0BACI,oBAAC,IAAD;AAAM,QAAA,SAAS,EAAEf;AAAjB,sBACI,oBAAC,IAAD;AAAM,QAAA,IAAI,EAAE,CAAZ;AAAe,QAAA,SAAS,EAAEE;AAA1B,sBACI,oBAAC,KAAD,CAAO,QAAP,QACKS,IAAI,iBAAI,oBAAC,IAAD;AAAM,QAAA,SAAS,EAAEd,SAAjB;AAA4B,QAAA,IAAI,EAAEc;AAAlC,QADb,eAEI,oBAAC,UAAD;AAAY,QAAA,GAAG,EAAC;AAAhB,SAA6BI,QAAQ,CAACD,KAAD,CAArC,CAFJ,CADJ,CADJ,eAOI,oBAAC,IAAD;AAAM,QAAA,IAAI,EAAE,CAAZ;AAAe,QAAA,SAAS,EAAET;AAA1B,uFACkBS,KADlB,EAPJ,CADJ;AAaH;AA/BL;;AAAA;AAAA,EAAuCnB,SAAvC","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"]}

package/ui/views/FormView.js

@@ -24,6 +24,10 @@ export var FormView = /*#__PURE__*/function (_UIView) {
 
     _classCallCheck(this, FormView);
 
+    if (!config) {
+      config = {};
+    }
+
     if (!("setupForm" in config)) {
       config.setupForm = true;
     }
@@ -110,9 +114,17 @@ export var FormView = /*#__PURE__*/function (_UIView) {
       if (this.config.setupForm) {
         var form = this.addElement(new FormElement("form", {
           onSubmit: function onSubmit(data, form) {
+            if (!_this2.config.onSubmit) {
+              return;
+            }
+
             return _this2.config.onSubmit(data, form);
           },
           getData: function getData() {
+            if (!_this2.config.getFormData) {
+              return {};
+            }
+
             return _this2.config.getFormData();
           }
         }));
@@ -130,6 +142,10 @@ export var FormView = /*#__PURE__*/function (_UIView) {
       }));
       this.addElement(new FormHeaderElement("formHeader", {
         getTitle: function getTitle(props) {
+          if (!_this2.config.getTitle) {
+            return "";
+          }
+
           return _this2.config.getTitle(props);
         }
       }));
@@ -148,7 +164,11 @@ export var FormView = /*#__PURE__*/function (_UIView) {
         type: "default",
         label: "Cancel",
         onClick: function onClick() {
-          return _this2.config.onCancel();
+          if (!_this2.config.onCancel) {
+            return;
+          }
+
+          _this2.config.onCancel();
         },
         shouldRender: function shouldRender() {
           return typeof _this2.config.onCancel === "function";

package/ui/views/FormView.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["FormView.tsx"],"names":["React","CircularProgress","FormElement","ButtonElement","GenericElement","FormContentElement","FormHeaderElement","FormFooterElement","FormContainerElement","UIView","FormView","id","config","setupForm","addElements","useGrid","applyPlugins","element","getFormContainer","addElement","title","getTitle","onSubmit","getter","getFormData","getElement","getFormFooterElement","formContainer","testId","className","noElevation","form","data","getData","isLoading","props","footer","submitButton","type","label","onClick","formProps","submit","moveToTheEndOf","cancelButton","onCancel","shouldRender","moveToTheBeginningOf"],"mappings":"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","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"]}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["ContentElement.tsx"],"names":["React","styled","UIElement","ContentWrapper","width","paddingTop","ContentElement","id","useGrid","props"],"mappings":";;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,MAAP,MAAmB,iBAAnB;AACA,SAASC,SAAT;AAEA,IAAMC,cAAc,gBAAGF,MAAH,CAAU,KAAV;AAAA;AAAA;AAAA,GAAiB;AACjCG,EAAAA,KAAK,EAAE,MAD0B;AAEjCC,EAAAA,UAAU,EAAE;AAFqB,CAAjB,CAApB;AAKA,WAAaC,cAAb;AAAA;;AAAA;;AACI,0BAAYC,EAAZ,EAAwB;AAAA;;AAAA;;AACpB,8BAAMA,EAAN;;AACA,UAAKC,OAAL,CAAa,KAAb;;AAFoB;AAGvB;;AAJL;AAAA;AAAA,WAMI,gBAAuBC,KAAvB,EAAqE;AACjE,0BAAO,oBAAC,cAAD,mFAA8BA,KAA9B,EAAP;AACH;AARL;;AAAA;AAAA,EAAoCP,SAApC","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"]}

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

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

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

@@ -2,7 +2,7 @@ import React from "react";
 import { UIElement, UIElementConfig } from "../../UIElement";
 import { UIRenderer, UIRenderParams } from "../../UIRenderer";
 interface HeaderTitleElementConfig extends UIElementConfig {
-    title: () => string;
+    title: () => string | null;
 }
 export declare class HeaderTitleElementRenderer extends UIRenderer<HeaderTitleElement> {
     render({ element }: UIRenderParams<HeaderTitleElement>): React.ReactNode;

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["useOverlayView.ts"],"names":["useEffect","useState","css","OverlayView","noScroll","overflow","height","useOverlayView","isVisible","setIsVisible","openedViews","document","body","classList","add","remove"],"mappings":";AAAA,SAASA,SAAT,EAAoBC,QAApB,QAAoC,OAApC;AACA,SAASC,GAAT,QAAoB,SAApB;AACA,SAASC,WAAT;AAEA,IAAMC,QAAQ,gBAAGF,GAAG,CAAC;AACjBG,EAAAA,QAAQ,EAAE,QADO;AAEjBC,EAAAA,MAAM,EAAE;AAFS,CAAD,oBAApB;AAUA,OAAO,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,GAAsB;AAChD,kBAAkCN,QAAQ,CAAU,KAAV,CAA1C;AAAA;AAAA,MAAOO,SAAP;AAAA,MAAkBC,YAAlB;;AAEAT,EAAAA,SAAS,CAAC,YAAM;AACZ,QAAIQ,SAAJ,EAAe;AACXL,MAAAA,WAAW,CAACO,WAAZ;AACAC,MAAAA,QAAQ,CAACC,IAAT,CAAcC,SAAd,CAAwBC,GAAxB,CAA4BV,QAA5B;AACH,KAHD,MAGO,IAAI,CAACD,WAAW,CAACO,WAAjB,EAA8B;AACjCC,MAAAA,QAAQ,CAACC,IAAT,CAAcC,SAAd,CAAwBE,MAAxB,CAA+BX,QAA/B;AACH;AACJ,GAPQ,EAON,CAACI,SAAD,CAPM,CAAT;AASAR,EAAAA,SAAS,CAAC,YAAM;AACZ,WAAO,YAAM;AACT,UAAIG,WAAW,CAACO,WAAZ,GAA0B,CAA9B,EAAiC;AAC7BP,QAAAA,WAAW,CAACO,WAAZ;AACH;;AACD,UAAI,CAACP,WAAW,CAACO,WAAjB,EAA8B;AAC1BC,QAAAA,QAAQ,CAACC,IAAT,CAAcC,SAAd,CAAwBE,MAAxB,CAA+BX,QAA/B;AACH;AACJ,KAPD;AAQH,GATQ,EASN,EATM,CAAT;AAWA,SAAO;AAAEI,IAAAA,SAAS,EAATA,SAAF;AAAaC,IAAAA,YAAY,EAAZA;AAAb,GAAP;AACH,CAxBM","sourcesContent":["import { useEffect, useState } from \"react\";\nimport { css } from \"emotion\";\nimport { OverlayView } from \"../OverlayView\";\n\nconst noScroll = css({\n    overflow: \"hidden\",\n    height: \"100vh\"\n});\n\nexport interface UseOverlayView {\n    isVisible: boolean;\n    setIsVisible: (value: boolean) => void;\n}\n\nexport const useOverlayView = (): UseOverlayView => {\n    const [isVisible, setIsVisible] = useState<boolean>(false);\n\n    useEffect(() => {\n        if (isVisible) {\n            OverlayView.openedViews++;\n            document.body.classList.add(noScroll);\n        } else if (!OverlayView.openedViews) {\n            document.body.classList.remove(noScroll);\n        }\n    }, [isVisible]);\n\n    useEffect(() => {\n        return () => {\n            if (OverlayView.openedViews > 0) {\n                OverlayView.openedViews--;\n            }\n            if (!OverlayView.openedViews) {\n                document.body.classList.remove(noScroll);\n            }\n        };\n    }, []);\n\n    return { isVisible, setIsVisible };\n};\n"]}

package/ui/views/OverlayView.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["OverlayView.tsx"],"names":["React","Transition","styled","UIView","useOverlayView","HeaderElement","ContentElement","OverlayLayoutWrapper","position","width","height","backgroundColor","zIndex","top","left","defaultStyle","transform","opacity","transitionProperty","transitionTimingFunction","transitionDuration","willChange","transitionStyles","entering","entered","OverlayView","id","useGrid","addHookDefinition","addElement","onClose","setIsVisible","applyPlugins","title","getHeaderElement","setTitle","_onEntered","reverse","forEach","cb","_onExited","push","getHook","visible","getOverlayHook","getElement","props","isVisible","onExited","onEntered","state"],"mappings":";;;;;;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,UAAT,QAA2B,wBAA3B;AACA,OAAOC,MAAP,MAAmB,iBAAnB;AACA,SAASC,MAAT;AACA,SAAyBC,cAAzB;AACA,SAASC,aAAT;AACA,SAASC,cAAT,uC,CAEA;AACA;;AAEA,IAAMC,oBAAoB,gBAAGL,MAAH,CAAU,KAAV;AAAA;AAAA;AAAA,GAAiB;AACvCM,EAAAA,QAAQ,EAAE,OAD6B;AAEvCC,EAAAA,KAAK,EAAE,MAFgC;AAGvCC,EAAAA,MAAM,EAAE,OAH+B;AAIvCC,EAAAA,eAAe,EAAE,6BAJsB;;AAKvC;AACJ;AACA;AACA;AACIC,EAAAA,MAAM,EAAE,EAT+B;AAUvCC,EAAAA,GAAG,EAAE,CAVkC;AAWvCC,EAAAA,IAAI,EAAE;AAXiC,CAAjB,CAA1B;AAcA,IAAMC,YAA6C,GAAG;AAClDC,EAAAA,SAAS,EAAE,kBADuC;AAElDC,EAAAA,OAAO,EAAE,CAFyC;AAGlDC,EAAAA,kBAAkB,EAAE,oBAH8B;AAIlDC,EAAAA,wBAAwB,EAAE,2BAJwB;AAKlDC,EAAAA,kBAAkB,EAAE,OAL8B;AAMlDC,EAAAA,UAAU,EAAE;AANsC,CAAtD;AASA,IAAMC,gBAAqC,GAAG;AAC1CC,EAAAA,QAAQ,EAAE;AACNP,IAAAA,SAAS,EAAE,kBADL;AAENC,IAAAA,OAAO,EAAE;AAFH,GADgC;AAK1CO,EAAAA,OAAO,EAAE;AACLR,IAAAA,SAAS,EAAE,iBADN;AAELC,IAAAA,OAAO,EAAE;AAFJ;AALiC,CAA9C;AAmBA,WAAaQ,WAAb;AAAA;;AAAA;;AACI;AACJ;AACA;AACA;AAKI,yBAAuC;AAAA;;AAAA,QAApBC,EAAoB,uEAAf,aAAe;;AAAA;;AACnC,8BAAMA,EAAN;;AADmC,iEAHL,EAGK;;AAAA,gEAFP,EAEO;;AAEnC,UAAKC,OAAL,CAAa,KAAb;;AAEA,UAAKC,iBAAL,CAAuB,SAAvB,EAAkCxB,cAAlC;;AAEA,UAAKyB,UAAL,CACI,IAAIxB,aAAJ,CAAkB,eAAlB,EAAmC;AAC/ByB,MAAAA,OAAO,EAAE;AAAA,eAAM,MAAKC,YAAL,CAAkB,KAAlB,CAAN;AAAA;AADsB,KAAnC,CADJ;;AAMA,UAAKF,UAAL,CAAgB,IAAIvB,cAAJ,CAAmB,gBAAnB,CAAhB;;AAEA,UAAK0B,YAAL,CAAkBP,WAAlB;;AAdmC;AAetC;;AAxBL;AAAA;AAAA,WA0BI,kBAAgBQ,KAAhB,EAA2C;AACvC,WAAKC,gBAAL,GAAwBC,QAAxB,CAAiCF,KAAjC;AACH;AA5BL;AAAA;AAAA,WA8BI,qBAAyB;AAAA;;AACrB,yBAAI,KAAKG,UAAT,EAAqBC,OAArB,GAA+BC,OAA/B,CAAuC,UAAAC,EAAE;AAAA,eAAIA,EAAE,CAAC,MAAD,CAAN;AAAA,OAAzC;AACH;AAhCL;AAAA;AAAA,WAkCI,oBAAwB;AAAA;;AACpB,yBAAI,KAAKC,SAAT,EAAoBH,OAApB,GAA8BC,OAA9B,CAAsC,UAAAC,EAAE;AAAA,eAAIA,EAAE,CAAC,MAAD,CAAN;AAAA,OAAxC;AACH;AApCL;AAAA;AAAA,WAsCI,sBAAoBA,EAApB,EAAwC;AACpC,WAAKH,UAAL,CAAgBK,IAAhB,CAAqBF,EAArB;AACH;AAxCL;AAAA;AAAA,WA0CI,qBAAmBA,EAAnB,EAAuC;AACnC,WAAKC,SAAL,CAAeC,IAAf,CAAoBF,EAApB;AACH;AA5CL;AAAA;AAAA,WA8CI,0BAAwC;AACpC,aAAO,KAAKG,OAAL,CAA6B,SAA7B,CAAP;AACH;AAhDL;AAAA;AAAA,WAkDI,sBAAoBC,OAApB,EAA4C;AACxC,WAAKC,cAAL,GAAsBb,YAAtB,CAAmCY,OAAnC;AACH;AApDL;AAAA;AAAA,WAsDI,4BAAyC;AACrC,aAAO,KAAKE,UAAL,CAAgB,eAAhB,CAAP;AACH;AAxDL;AAAA;AAAA,WA0DI,6BAA2C;AACvC,aAAO,KAAKA,UAAL,CAAgB,gBAAhB,CAAP;AACH;AA5DL;AAAA;AAAA,WA8DI,gBAAuBC,KAAvB,EAA4D;AAAA;;AACxD,iCAAsB,KAAKF,cAAL,EAAtB;AAAA,UAAQG,SAAR,wBAAQA,SAAR;;AACA,0BACI,oBAAC,UAAD;AACI,QAAA,EAAE,EAAEA,SADR;AAEI,QAAA,OAAO,EAAE,GAFb;AAGI,QAAA,MAAM,MAHV;AAII,QAAA,QAAQ,EAAE;AAAA,iBAAM,MAAI,CAACC,QAAL,EAAN;AAAA,SAJd;AAKI,QAAA,SAAS,EAAE;AAAA,iBAAM,MAAI,CAACC,SAAL,EAAN;AAAA;AALf,SAOK,UAAAC,KAAK;AAAA,4BACF,oBAAC,oBAAD;AAAsB,UAAA,KAAK,kCAAOnC,YAAP,GAAwBO,gBAAgB,CAAC4B,KAAD,CAAxC;AAA3B,uFACkBJ,KADlB,EADE;AAAA,OAPV,CADJ;AAeH;AA/EL;;AAAA;AAAA,EAAiC3C,MAAjC;;gBAAasB,W,iBAKY,C","sourcesContent":["import React from \"react\";\nimport { Transition } from \"react-transition-group\";\nimport styled from \"@emotion/styled\";\nimport { UIView, UIViewProps } from \"~/ui/UIView\";\nimport { UseOverlayView, useOverlayView } from \"./OverlayView/useOverlayView\";\nimport { HeaderElement } from \"./OverlayView/HeaderElement\";\nimport { ContentElement } from \"./OverlayView/ContentElement\";\n\n// !GOOD FIRST ISSUE!\n// Extract rendering and styling into an OverlayViewRenderer class.\n\nconst OverlayLayoutWrapper = styled(\"div\")({\n    position: \"fixed\",\n    width: \"100%\",\n    height: \"100vh\",\n    backgroundColor: \"var(--mdc-theme-background)\",\n    /**\n     * Has to be higher than 5 so it's above advanced settings dialog,\n     * and below 20, so the image editor & Dialogs can be displayed above.\n     */\n    zIndex: 18,\n    top: 0,\n    left: 0\n});\n\nconst defaultStyle: Record<string, string | number> = {\n    transform: \"translateY(75vh)\",\n    opacity: 0,\n    transitionProperty: \"transform, opacity\",\n    transitionTimingFunction: \"cubic-bezier(0, 0, .2, 1)\",\n    transitionDuration: \"225ms\",\n    willChange: \"opacity, transform\"\n};\n\nconst transitionStyles: Record<string, any> = {\n    entering: {\n        transform: \"translateY(75vh)\",\n        opacity: 0\n    },\n    entered: {\n        transform: \"translateY(0px)\",\n        opacity: 1\n    }\n};\n\ninterface OnExited {\n    (view: OverlayView): void;\n}\n\ninterface OnEntered {\n    (view: OverlayView): void;\n}\n\nexport class OverlayView extends UIView {\n    /**\n     * This property is used to track the amount of opened overlays. Since we're applying a CSS class to disable\n     * window scroll, we must make sure we don't remove that CSS class until all the overlays are closed.\n     */\n    static openedViews = 0;\n    private _onEntered: OnEntered[] = [];\n    private _onExited: OnExited[] = [];\n\n    public constructor(id = \"OverlayView\") {\n        super(id);\n        this.useGrid(false);\n\n        this.addHookDefinition(\"overlay\", useOverlayView);\n\n        this.addElement(\n            new HeaderElement(\"overlayHeader\", {\n                onClose: () => this.setIsVisible(false)\n            })\n        );\n\n        this.addElement(new ContentElement(\"overlayContent\"));\n\n        this.applyPlugins(OverlayView);\n    }\n\n    public setTitle(title: () => string): void {\n        this.getHeaderElement().setTitle(title);\n    }\n\n    public onEntered(): void {\n        [...this._onEntered].reverse().forEach(cb => cb(this));\n    }\n\n    public onExited(): void {\n        [...this._onExited].reverse().forEach(cb => cb(this));\n    }\n\n    public addOnEntered(cb: OnExited): void {\n        this._onEntered.push(cb);\n    }\n\n    public addOnExited(cb: OnExited): void {\n        this._onExited.push(cb);\n    }\n\n    public getOverlayHook(): UseOverlayView {\n        return this.getHook<UseOverlayView>(\"overlay\");\n    }\n\n    public setIsVisible(visible: boolean): void {\n        this.getOverlayHook().setIsVisible(visible);\n    }\n\n    public getHeaderElement(): HeaderElement {\n        return this.getElement(\"overlayHeader\") as HeaderElement;\n    }\n\n    public getContentElement(): ContentElement {\n        return this.getElement(\"overlayContent\") as HeaderElement;\n    }\n\n    public override render(props: UIViewProps): React.ReactNode {\n        const { isVisible } = this.getOverlayHook();\n        return (\n            <Transition\n                in={isVisible}\n                timeout={100}\n                appear\n                onExited={() => this.onExited()}\n                onEntered={() => this.onEntered()}\n            >\n                {state => (\n                    <OverlayLayoutWrapper style={{ ...defaultStyle, ...transitionStyles[state] }}>\n                        {super.render(props)}\n                    </OverlayLayoutWrapper>\n                )}\n            </Transition>\n        );\n    }\n}\n"]}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["SplitViewPanelElement.tsx"],"names":["React","classNames","UIElement","Cell","SplitViewPanelElement","Set","width","_width","className","_classNames","add","delete","element","getChildren","forEach","el","remove","addElement","props","Array","from","values"],"mappings":";;;;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,SAASC,SAAT;AACA,SAASC,IAAT,QAAqB,iBAArB;AAEA,WAAaC,qBAAb;AAAA;;AAAA;;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;;AAAA;;AAAA,6DACqB,EADrB;;AAAA,kEAEuC,IAAIC,GAAJ,EAFvC;;AAAA;AAAA;;AAAA;AAAA;AAAA,WAII,kBAAgBC,KAAhB,EAAqC;AACjC,WAAKC,MAAL,GAAcD,KAAd;AACH;AANL;AAAA;AAAA,WAQI,sBAAoBE,SAApB,EAA6C;AACzC,WAAKC,WAAL,CAAiBC,GAAjB,CAAqBF,SAArB;AACH;AAVL;AAAA;AAAA,WAYI,yBAAuBA,SAAvB,EAAgD;AAC5C,WAAKC,WAAL,CAAiBE,MAAjB,CAAwBH,SAAxB;AACH;AAdL;AAAA;AAAA,WAgBI,2BAAyBI,OAAzB,EAAmD;AAC/C;AACA,WAAKC,WAAL,GAAmBC,OAAnB,CAA2B,UAAAC,EAAE;AAAA,eAAIA,EAAE,CAACC,MAAH,EAAJ;AAAA,OAA7B,EAF+C,CAI/C;;AACA,WAAKC,UAAL,CAAgBL,OAAhB;AACH;AAtBL;AAAA;AAAA,WAwBI,gBAAuBM,KAAvB,EAAqE;AACjE,0BACI,oBAAC,IAAD;AAAM,QAAA,IAAI,EAAE,KAAKX,MAAjB;AAAyB,QAAA,SAAS,EAAEN,UAAU,CAACkB,KAAK,CAACC,IAAN,CAAW,KAAKX,WAAL,CAAiBY,MAAjB,EAAX,CAAD;AAA9C,2FACkBH,KADlB,EADJ;AAKH;AA9BL;;AAAA;AAAA,EAA2ChB,SAA3C","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"]}

package/ui/views/SplitView.d.ts

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

package/ui/views/SplitView.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["SplitView.tsx"],"names":["React","classNames","css","Grid","SplitViewPanelElement","UIView","grid","padding","backgroundColor","gridGap","leftPanel","display","flexDirection","height","overflow","maxHeight","rightPanel","SplitView","id","config","Set","useGrid","addClassName","addElements","getLeftPanel","addElement","getRightPanel","className","_classNames","add","delete","getElement","props","Array","from","values","_leftPanel","setWidth","_rightPanel","moveAfter"],"mappings":"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","sourcesContent":["import React from \"react\";\nimport classNames from \"classnames\";\nimport { css } from \"emotion\";\nimport { Grid } from \"@webiny/ui/Grid\";\nimport { UIElement } from \"~/ui/UIElement\";\nimport { SplitViewPanelElement } from \"./SplitView/SplitViewPanelElement\";\nimport { UIView } from \"../UIView\";\n\nconst grid = css({\n    \"&.mdc-layout-grid\": {\n        padding: 0,\n        backgroundColor: \"var(--mdc-theme-background)\",\n        \">.mdc-layout-grid__inner\": {\n            gridGap: 0\n        }\n    }\n});\n\nconst leftPanel = css({\n    backgroundColor: \"var(--mdc-theme-surface)\",\n    \">.webiny-data-list\": {\n        display: \"flex\",\n        flexDirection: \"column\",\n        height: \"calc(100vh - 70px)\",\n        \".mdc-list\": {\n            overflow: \"auto\"\n        }\n    },\n    \">.mdc-list\": {\n        display: \"flex\",\n        flexDirection: \"column\",\n        maxHeight: \"calc(100vh - 70px)\",\n        overflow: \"auto\"\n    }\n});\n\nconst rightPanel = css({\n    backgroundColor: \"var(--mdc-theme-background)\",\n    overflow: \"auto\",\n    height: \"calc(100vh - 70px)\"\n});\n\ninterface SplitViewConfig {\n    leftPanel?: UIElement;\n    rightPanel?: UIElement;\n}\n\nexport class SplitView extends UIView {\n    private _classNames = new Set();\n    private _leftPanel?: SplitViewPanelElement;\n    private _rightPanel?: SplitViewPanelElement;\n\n    public constructor(id: string, config: SplitViewConfig = {}) {\n        super(`SplitView.${id}`);\n\n        this.useGrid(false);\n        this.addClassName(grid);\n        this.addClassName(\"webiny-split-view\");\n        this.addElements();\n\n        if (config.leftPanel) {\n            this.getLeftPanel().addElement(config.leftPanel);\n        }\n\n        if (config.rightPanel) {\n            this.getRightPanel().addElement(config.rightPanel);\n        }\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 getLeftPanel(): SplitViewPanelElement {\n        return this.getElement(\"leftPanel\") as SplitViewPanelElement;\n    }\n\n    public getRightPanel(): SplitViewPanelElement {\n        return this.getElement(\"rightPanel\") as SplitViewPanelElement;\n    }\n\n    public override render(props?: any): React.ReactNode {\n        return (\n            <Grid className={classNames(Array.from(this._classNames.values()))}>\n                {super.render(props)}\n            </Grid>\n        );\n    }\n\n    private addElements(): void {\n        this._leftPanel = new SplitViewPanelElement(\"leftPanel\");\n        this._leftPanel.useGrid(false);\n        this._leftPanel.setWidth(5);\n        this._leftPanel.addClassName(leftPanel);\n        this._leftPanel.addClassName(\"webiny-split-view__left-panel\");\n\n        this._rightPanel = new SplitViewPanelElement(\"rightPanel\");\n        this._rightPanel.useGrid(false);\n        this._rightPanel.setWidth(7);\n        this._rightPanel.addClassName(rightPanel);\n        this._rightPanel.addClassName(\"webiny-split-view__right-panel\");\n\n        this.addElement(this._leftPanel);\n        this._rightPanel.moveAfter(this._leftPanel);\n    }\n}\n"]}