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

package/ui/elements/form/DynamicFieldsetElement/DynamicFieldsetRowElement.js

@@ -1,26 +1,41 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _get from "@babel/runtime/helpers/get";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _createSuper from "@babel/runtime/helpers/createSuper";
-import { UIElement } from "../../../UIElement"; // import styled from "@emotion/styled";
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DynamicFieldsetRowElement = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+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 _UIElement2 = require("../../../UIElement");
+
+// import styled from "@emotion/styled";
 // const DynamicFieldsetRow = styled("div")({
 //     paddingBottom: 10
 // });
 // !GOOD FIRST ISSUE!
 // Extract rendering and styling into a DynamicFieldsetRowElementRenderer class.
+var DynamicFieldsetRowElement = /*#__PURE__*/function (_UIElement) {
+  (0, _inherits2.default)(DynamicFieldsetRowElement, _UIElement);
 
-export var DynamicFieldsetRowElement = /*#__PURE__*/function (_UIElement) {
-  _inherits(DynamicFieldsetRowElement, _UIElement);
-
-  var _super = _createSuper(DynamicFieldsetRowElement);
+  var _super = (0, _createSuper2.default)(DynamicFieldsetRowElement);
 
   function DynamicFieldsetRowElement(id) {
     var _this;
 
-    _classCallCheck(this, DynamicFieldsetRowElement);
-
+    (0, _classCallCheck2.default)(this, DynamicFieldsetRowElement);
     _this = _super.call(this, id);
 
     _this.applyPlugins(DynamicFieldsetRowElement);
@@ -28,10 +43,10 @@ export var DynamicFieldsetRowElement = /*#__PURE__*/function (_UIElement) {
     return _this;
   }
 
-  _createClass(DynamicFieldsetRowElement, [{
+  (0, _createClass2.default)(DynamicFieldsetRowElement, [{
     key: "render",
     value: function render(props) {
-      return _get(_getPrototypeOf(DynamicFieldsetRowElement.prototype), "render", this).call(this, props);
+      return (0, _get2.default)((0, _getPrototypeOf2.default)(DynamicFieldsetRowElement.prototype), "render", this).call(this, props);
       /**
        * TODO @ts-refactor @pavel
        * Why was this left here?
@@ -39,6 +54,7 @@ export var DynamicFieldsetRowElement = /*#__PURE__*/function (_UIElement) {
       // return <DynamicFieldsetRow>{}</DynamicFieldsetRow>;
     }
   }]);
-
   return DynamicFieldsetRowElement;
-}(UIElement);
+}(_UIElement2.UIElement);
+
+exports.DynamicFieldsetRowElement = DynamicFieldsetRowElement;

package/ui/elements/form/DynamicFieldsetElement/DynamicFieldsetRowElement.js.map

@@ -1 +1 @@
-{"version":3,"sources":["DynamicFieldsetRowElement.tsx"],"names":["UIElement","DynamicFieldsetRowElement","id","applyPlugins","props"],"mappings":";;;;;;AACA,SAASA,SAAT,6B,CACA;AAEA;AACA;AACA;AAEA;AACA;;AAEA,WAAaC,yBAAb;AAAA;;AAAA;;AACI,qCAAmBC,EAAnB,EAA+B;AAAA;;AAAA;;AAC3B,8BAAMA,EAAN;;AAEA,UAAKC,YAAL,CAAkBF,yBAAlB;;AAH2B;AAI9B;;AALL;AAAA;AAAA,WAOI,gBAAuBG,KAAvB,EAAsE;AAClE,mGAAoBA,KAApB;AACA;AACR;AACA;AACA;AACQ;AACH;AAdL;;AAAA;AAAA,EAA+CJ,SAA/C","sourcesContent":["import React from \"react\";\nimport { UIElement, UiElementRenderProps } from \"~/ui/UIElement\";\n// import styled from \"@emotion/styled\";\n\n// const DynamicFieldsetRow = styled(\"div\")({\n//     paddingBottom: 10\n// });\n\n// !GOOD FIRST ISSUE!\n// Extract rendering and styling into a DynamicFieldsetRowElementRenderer class.\n\nexport class DynamicFieldsetRowElement extends UIElement<any> {\n    public constructor(id: string) {\n        super(id);\n\n        this.applyPlugins(DynamicFieldsetRowElement);\n    }\n\n    public override render(props?: UiElementRenderProps): React.ReactNode {\n        return super.render(props);\n        /**\n         * TODO @ts-refactor @pavel\n         * Why was this left here?\n         */\n        // return <DynamicFieldsetRow>{}</DynamicFieldsetRow>;\n    }\n}\n"]}
+{"version":3,"names":["DynamicFieldsetRowElement","id","applyPlugins","props","UIElement"],"sources":["DynamicFieldsetRowElement.tsx"],"sourcesContent":["import React from \"react\";\nimport { UIElement, UiElementRenderProps } from \"~/ui/UIElement\";\n// import styled from \"@emotion/styled\";\n\n// const DynamicFieldsetRow = styled(\"div\")({\n//     paddingBottom: 10\n// });\n\n// !GOOD FIRST ISSUE!\n// Extract rendering and styling into a DynamicFieldsetRowElementRenderer class.\n\nexport class DynamicFieldsetRowElement extends UIElement<any> {\n    public constructor(id: string) {\n        super(id);\n\n        this.applyPlugins(DynamicFieldsetRowElement);\n    }\n\n    public override render(props?: UiElementRenderProps): React.ReactNode {\n        return super.render(props);\n        /**\n         * TODO @ts-refactor @pavel\n         * Why was this left here?\n         */\n        // return <DynamicFieldsetRow>{}</DynamicFieldsetRow>;\n    }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AACA;;AACA;AAEA;AACA;AACA;AAEA;AACA;IAEaA,yB;;;;;EACT,mCAAmBC,EAAnB,EAA+B;IAAA;;IAAA;IAC3B,0BAAMA,EAAN;;IAEA,MAAKC,YAAL,CAAkBF,yBAAlB;;IAH2B;EAI9B;;;;WAED,gBAAuBG,KAAvB,EAAsE;MAClE,yHAAoBA,KAApB;MACA;AACR;AACA;AACA;MACQ;IACH;;;EAd0CC,qB"}

package/ui/elements/form/DynamicFieldsetElement.js

@@ -1,22 +1,39 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _createSuper from "@babel/runtime/helpers/createSuper";
-import React from "react";
-import { FormFieldElement } from "./FormFieldElement";
-import { DynamicFieldset } from "@webiny/ui/DynamicFieldset";
-import { Grid } from "@webiny/ui/Grid";
-import { DynamicFieldsetRowElement } from "./DynamicFieldsetElement/DynamicFieldsetRowElement";
-export var DynamicFieldsetElement = /*#__PURE__*/function (_FormFieldElement) {
-  _inherits(DynamicFieldsetElement, _FormFieldElement);
-
-  var _super = _createSuper(DynamicFieldsetElement);
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DynamicFieldsetElement = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _FormFieldElement2 = require("./FormFieldElement");
+
+var _DynamicFieldset = require("@webiny/ui/DynamicFieldset");
+
+var _Grid = require("@webiny/ui/Grid");
+
+var _DynamicFieldsetRowElement = require("./DynamicFieldsetElement/DynamicFieldsetRowElement");
+
+var DynamicFieldsetElement = /*#__PURE__*/function (_FormFieldElement) {
+  (0, _inherits2.default)(DynamicFieldsetElement, _FormFieldElement);
+
+  var _super = (0, _createSuper2.default)(DynamicFieldsetElement);
 
   function DynamicFieldsetElement(id, config) {
     var _this;
 
-    _classCallCheck(this, DynamicFieldsetElement);
-
+    (0, _classCallCheck2.default)(this, DynamicFieldsetElement);
     _this = _super.call(this, id, config);
 
     _this.useGrid(false);
@@ -26,7 +43,7 @@ export var DynamicFieldsetElement = /*#__PURE__*/function (_FormFieldElement) {
     return _this;
   }
 
-  _createClass(DynamicFieldsetElement, [{
+  (0, _createClass2.default)(DynamicFieldsetElement, [{
     key: "getCreateHeaderElement",
     value: function getCreateHeaderElement() {
       return this.config.createHeader;
@@ -83,15 +100,15 @@ export var DynamicFieldsetElement = /*#__PURE__*/function (_FormFieldElement) {
       var createHeader = this.getCreateHeaderElement();
       var createRow = this.getCreateRowElement();
       var createEmpty = this.getCreateEmptyElement();
-      return /*#__PURE__*/React.createElement(Bind, {
+      return /*#__PURE__*/_react.default.createElement(Bind, {
         name: this.getName(),
         defaultValue: this.getDefaultValue(props)
-      }, /*#__PURE__*/React.createElement(DynamicFieldset, null, function (_ref) {
+      }, /*#__PURE__*/_react.default.createElement(_DynamicFieldset.DynamicFieldset, null, function (_ref) {
         var actions = _ref.actions,
             header = _ref.header,
             row = _ref.row,
             empty = _ref.empty;
-        return /*#__PURE__*/React.createElement(React.Fragment, null, header(function () {
+        return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, header(function () {
           if (!createHeader) {
             return null;
           }
@@ -113,12 +130,12 @@ export var DynamicFieldsetElement = /*#__PURE__*/function (_FormFieldElement) {
           var rowElement = createRow({
             actions: actions,
             index: index,
-            row: new DynamicFieldsetRowElement("".concat(_this2.id, ".row.").concat(index))
+            row: new _DynamicFieldsetRowElement.DynamicFieldsetRowElement("".concat(_this2.id, ".row.").concat(index))
           }); // This element is not created via `this.addElement()` API.
           // We need to manually give it a parent to enable proper grid rendering.
 
           rowElement && rowElement.setParent(_this2);
-          return rowElement ? /*#__PURE__*/React.createElement(Grid, null, rowElement.render(props)) : null;
+          return rowElement ? /*#__PURE__*/_react.default.createElement(_Grid.Grid, null, rowElement.render(props)) : null;
         }), empty(function () {
           if (!createEmpty) {
             return null;
@@ -135,6 +152,7 @@ export var DynamicFieldsetElement = /*#__PURE__*/function (_FormFieldElement) {
       }));
     }
   }]);
-
   return DynamicFieldsetElement;
-}(FormFieldElement);
+}(_FormFieldElement2.FormFieldElement);
+
+exports.DynamicFieldsetElement = DynamicFieldsetElement;

package/ui/elements/form/DynamicFieldsetElement.js.map

@@ -1 +1 @@
-{"version":3,"sources":["DynamicFieldsetElement.tsx"],"names":["React","FormFieldElement","DynamicFieldset","Grid","DynamicFieldsetRowElement","DynamicFieldsetElement","id","config","useGrid","applyPlugins","createHeader","element","cb","createRow","createEmpty","props","formProps","Error","Bind","getCreateHeaderElement","getCreateRowElement","getCreateEmptyElement","getName","getDefaultValue","actions","header","row","empty","headerElement","setParent","render","index","rowElement","emptyElement"],"mappings":"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","sourcesContent":["import React from \"react\";\nimport {\n    FormFieldElement,\n    FormFieldElementConfig,\n    FormFieldElementRenderProps\n} from \"~/ui/elements/form/FormFieldElement\";\nimport { UIElement } from \"~/ui/UIElement\";\nimport { DynamicFieldset } from \"@webiny/ui/DynamicFieldset\";\nimport { Grid } from \"@webiny/ui/Grid\";\nimport { DynamicFieldsetRowElement } from \"./DynamicFieldsetElement/DynamicFieldsetRowElement\";\n\ninterface DynamicFieldsetActions {\n    add: (index?: number) => () => void;\n    remove: (index: number) => () => void;\n}\n\ninterface CreateHeaderCallable {\n    (params: { actions: DynamicFieldsetActions }): UIElement;\n}\n\ninterface CreateRowCallable {\n    (params: {\n        actions: DynamicFieldsetActions;\n        index: number;\n        row: DynamicFieldsetRowElement;\n    }): UIElement;\n}\n\ninterface CreateEmptyCallable {\n    (params: { actions: DynamicFieldsetActions }): UIElement;\n}\n\nexport interface DynamicFieldsetElementConfig extends FormFieldElementConfig {\n    createHeader?: CreateHeaderCallable;\n    createRow?: CreateRowCallable;\n    createEmpty?: CreateEmptyCallable;\n}\n\nexport class DynamicFieldsetElement extends FormFieldElement<DynamicFieldsetElementConfig> {\n    public constructor(id: string, config: DynamicFieldsetElementConfig) {\n        super(id, config);\n\n        this.useGrid(false);\n\n        this.applyPlugins(DynamicFieldsetElement);\n    }\n\n    public getCreateHeaderElement() {\n        return this.config.createHeader;\n    }\n\n    public setHeaderElement(element: UIElement): void {\n        this.config.createHeader = () => element;\n    }\n\n    public setCreateHeaderElement(cb: DynamicFieldsetElementConfig[\"createHeader\"]): void {\n        this.config.createHeader = cb;\n    }\n\n    public getCreateRowElement() {\n        return this.config.createRow;\n    }\n\n    public setCreateRowElement(cb: DynamicFieldsetElementConfig[\"createRow\"]): void {\n        this.config.createRow = cb;\n    }\n\n    public getCreateEmptyElement() {\n        return this.config.createEmpty;\n    }\n\n    public setEmptyElement(element: UIElement): void {\n        this.config.createEmpty = () => element;\n    }\n\n    public setCreateEmptyElement(cb: DynamicFieldsetElementConfig[\"createEmpty\"]): void {\n        this.config.createEmpty = cb;\n    }\n\n    public override render(props: FormFieldElementRenderProps): React.ReactNode {\n        if (!props.formProps) {\n            throw Error(`DynamicFieldsetElement must be placed inside of a FormElement.`);\n        }\n\n        const { Bind } = props.formProps;\n        const createHeader = this.getCreateHeaderElement();\n        const createRow = this.getCreateRowElement();\n        const createEmpty = this.getCreateEmptyElement();\n\n        return (\n            <Bind name={this.getName()} defaultValue={this.getDefaultValue(props)}>\n                <DynamicFieldset>\n                    {({ actions, header, row, empty }) => (\n                        <React.Fragment>\n                            {header(() => {\n                                if (!createHeader) {\n                                    return null;\n                                }\n                                const headerElement = createHeader({\n                                    actions: actions as DynamicFieldsetActions\n                                });\n                                // This element is not created via `this.addElement()` API.\n                                // We need to manually give it a parent to enable proper grid rendering.\n                                headerElement && headerElement.setParent(this);\n\n                                return headerElement ? headerElement.render(props) : null;\n                            })}\n                            {row(({ index }) => {\n                                if (!createRow) {\n                                    return null;\n                                }\n                                const rowElement = createRow({\n                                    actions: actions as DynamicFieldsetActions,\n                                    index,\n                                    row: new DynamicFieldsetRowElement(`${this.id}.row.${index}`)\n                                });\n\n                                // This element is not created via `this.addElement()` API.\n                                // We need to manually give it a parent to enable proper grid rendering.\n                                rowElement && rowElement.setParent(this);\n\n                                return rowElement ? <Grid>{rowElement.render(props)}</Grid> : null;\n                            })}\n                            {empty(() => {\n                                if (!createEmpty) {\n                                    return null;\n                                }\n                                const emptyElement = createEmpty({\n                                    actions: actions as DynamicFieldsetActions\n                                });\n\n                                // This element is not created via `this.addElement()` API.\n                                // We need to manually give it a parent to enable proper grid rendering.\n                                emptyElement && emptyElement.setParent(this);\n\n                                return emptyElement ? emptyElement.render(props) : null;\n                            })}\n                        </React.Fragment>\n                    )}\n                </DynamicFieldset>\n            </Bind>\n        );\n    }\n}\n"]}
+{"version":3,"names":["DynamicFieldsetElement","id","config","useGrid","applyPlugins","createHeader","element","cb","createRow","createEmpty","props","formProps","Error","Bind","getCreateHeaderElement","getCreateRowElement","getCreateEmptyElement","getName","getDefaultValue","actions","header","row","empty","headerElement","setParent","render","index","rowElement","DynamicFieldsetRowElement","emptyElement","FormFieldElement"],"sources":["DynamicFieldsetElement.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n    FormFieldElement,\n    FormFieldElementConfig,\n    FormFieldElementRenderProps\n} from \"~/ui/elements/form/FormFieldElement\";\nimport { UIElement } from \"~/ui/UIElement\";\nimport { DynamicFieldset } from \"@webiny/ui/DynamicFieldset\";\nimport { Grid } from \"@webiny/ui/Grid\";\nimport { DynamicFieldsetRowElement } from \"./DynamicFieldsetElement/DynamicFieldsetRowElement\";\n\ninterface DynamicFieldsetActions {\n    add: (index?: number) => () => void;\n    remove: (index: number) => () => void;\n}\n\ninterface CreateHeaderCallable {\n    (params: { actions: DynamicFieldsetActions }): UIElement;\n}\n\ninterface CreateRowCallable {\n    (params: {\n        actions: DynamicFieldsetActions;\n        index: number;\n        row: DynamicFieldsetRowElement;\n    }): UIElement;\n}\n\ninterface CreateEmptyCallable {\n    (params: { actions: DynamicFieldsetActions }): UIElement;\n}\n\nexport interface DynamicFieldsetElementConfig extends FormFieldElementConfig {\n    createHeader?: CreateHeaderCallable;\n    createRow?: CreateRowCallable;\n    createEmpty?: CreateEmptyCallable;\n}\n\nexport class DynamicFieldsetElement extends FormFieldElement<DynamicFieldsetElementConfig> {\n    public constructor(id: string, config: DynamicFieldsetElementConfig) {\n        super(id, config);\n\n        this.useGrid(false);\n\n        this.applyPlugins(DynamicFieldsetElement);\n    }\n\n    public getCreateHeaderElement() {\n        return this.config.createHeader;\n    }\n\n    public setHeaderElement(element: UIElement): void {\n        this.config.createHeader = () => element;\n    }\n\n    public setCreateHeaderElement(cb: DynamicFieldsetElementConfig[\"createHeader\"]): void {\n        this.config.createHeader = cb;\n    }\n\n    public getCreateRowElement() {\n        return this.config.createRow;\n    }\n\n    public setCreateRowElement(cb: DynamicFieldsetElementConfig[\"createRow\"]): void {\n        this.config.createRow = cb;\n    }\n\n    public getCreateEmptyElement() {\n        return this.config.createEmpty;\n    }\n\n    public setEmptyElement(element: UIElement): void {\n        this.config.createEmpty = () => element;\n    }\n\n    public setCreateEmptyElement(cb: DynamicFieldsetElementConfig[\"createEmpty\"]): void {\n        this.config.createEmpty = cb;\n    }\n\n    public override render(props: FormFieldElementRenderProps): React.ReactNode {\n        if (!props.formProps) {\n            throw Error(`DynamicFieldsetElement must be placed inside of a FormElement.`);\n        }\n\n        const { Bind } = props.formProps;\n        const createHeader = this.getCreateHeaderElement();\n        const createRow = this.getCreateRowElement();\n        const createEmpty = this.getCreateEmptyElement();\n\n        return (\n            <Bind name={this.getName()} defaultValue={this.getDefaultValue(props)}>\n                <DynamicFieldset>\n                    {({ actions, header, row, empty }) => (\n                        <React.Fragment>\n                            {header(() => {\n                                if (!createHeader) {\n                                    return null;\n                                }\n                                const headerElement = createHeader({\n                                    actions: actions as DynamicFieldsetActions\n                                });\n                                // This element is not created via `this.addElement()` API.\n                                // We need to manually give it a parent to enable proper grid rendering.\n                                headerElement && headerElement.setParent(this);\n\n                                return headerElement ? headerElement.render(props) : null;\n                            })}\n                            {row(({ index }) => {\n                                if (!createRow) {\n                                    return null;\n                                }\n                                const rowElement = createRow({\n                                    actions: actions as DynamicFieldsetActions,\n                                    index,\n                                    row: new DynamicFieldsetRowElement(`${this.id}.row.${index}`)\n                                });\n\n                                // This element is not created via `this.addElement()` API.\n                                // We need to manually give it a parent to enable proper grid rendering.\n                                rowElement && rowElement.setParent(this);\n\n                                return rowElement ? <Grid>{rowElement.render(props)}</Grid> : null;\n                            })}\n                            {empty(() => {\n                                if (!createEmpty) {\n                                    return null;\n                                }\n                                const emptyElement = createEmpty({\n                                    actions: actions as DynamicFieldsetActions\n                                });\n\n                                // This element is not created via `this.addElement()` API.\n                                // We need to manually give it a parent to enable proper grid rendering.\n                                emptyElement && emptyElement.setParent(this);\n\n                                return emptyElement ? emptyElement.render(props) : null;\n                            })}\n                        </React.Fragment>\n                    )}\n                </DynamicFieldset>\n            </Bind>\n        );\n    }\n}\n"],"mappings":"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"}

package/ui/elements/form/FileManagerElement/EmptyStateElement.js

@@ -1,25 +1,41 @@
-import _createClass from "@babel/runtime/helpers/createClass";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _createSuper from "@babel/runtime/helpers/createSuper";
-import { UIElement } from "../../../UIElement";
-import { EmptyStateElementRenderer } from "./EmptyStateElementRenderer";
-export var EmptyStateElement = /*#__PURE__*/function (_UIElement) {
-  _inherits(EmptyStateElement, _UIElement);
+"use strict";
 
-  var _super = _createSuper(EmptyStateElement);
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EmptyStateElement = void 0;
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+
+var _UIElement2 = require("../../../UIElement");
+
+var _EmptyStateElementRenderer = require("./EmptyStateElementRenderer");
+
+var EmptyStateElement = /*#__PURE__*/function (_UIElement) {
+  (0, _inherits2.default)(EmptyStateElement, _UIElement);
+
+  var _super = (0, _createSuper2.default)(EmptyStateElement);
 
   function EmptyStateElement(id) {
     var _this;
 
-    _classCallCheck(this, EmptyStateElement);
-
+    (0, _classCallCheck2.default)(this, EmptyStateElement);
     _this = _super.call(this, id);
 
-    _this.addRenderer(new EmptyStateElementRenderer());
+    _this.addRenderer(new _EmptyStateElementRenderer.EmptyStateElementRenderer());
 
     return _this;
   }
 
-  return _createClass(EmptyStateElement);
-}(UIElement);
+  return (0, _createClass2.default)(EmptyStateElement);
+}(_UIElement2.UIElement);
+
+exports.EmptyStateElement = EmptyStateElement;

package/ui/elements/form/FileManagerElement/EmptyStateElement.js.map

@@ -1 +1 @@
-{"version":3,"sources":["EmptyStateElement.tsx"],"names":["UIElement","EmptyStateElementRenderer","EmptyStateElement","id","addRenderer"],"mappings":";;;;AAAA,SAASA,SAAT;AACA,SAASC,yBAAT;AAEA,WAAaC,iBAAb;AAAA;;AAAA;;AACI,6BAAmBC,EAAnB,EAA+B;AAAA;;AAAA;;AAC3B,8BAAMA,EAAN;;AAEA,UAAKC,WAAL,CAAiB,IAAIH,yBAAJ,EAAjB;;AAH2B;AAI9B;;AALL;AAAA,EAAuCD,SAAvC","sourcesContent":["import { UIElement } from \"~/ui/UIElement\";\nimport { EmptyStateElementRenderer } from \"./EmptyStateElementRenderer\";\n\nexport class EmptyStateElement extends UIElement<any> {\n    public constructor(id: string) {\n        super(id);\n\n        this.addRenderer(new EmptyStateElementRenderer());\n    }\n}\n"]}
+{"version":3,"names":["EmptyStateElement","id","addRenderer","EmptyStateElementRenderer","UIElement"],"sources":["EmptyStateElement.tsx"],"sourcesContent":["import { UIElement } from \"~/ui/UIElement\";\nimport { EmptyStateElementRenderer } from \"./EmptyStateElementRenderer\";\n\nexport class EmptyStateElement extends UIElement<any> {\n    public constructor(id: string) {\n        super(id);\n\n        this.addRenderer(new EmptyStateElementRenderer());\n    }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;IAEaA,iB;;;;;EACT,2BAAmBC,EAAnB,EAA+B;IAAA;;IAAA;IAC3B,0BAAMA,EAAN;;IAEA,MAAKC,WAAL,CAAiB,IAAIC,oDAAJ,EAAjB;;IAH2B;EAI9B;;;EALkCC,qB"}

package/ui/elements/form/FileManagerElement/EmptyStateElementRenderer.js

@@ -1,27 +1,49 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _createSuper from "@babel/runtime/helpers/createSuper";
-import React from "react";
-import { UIRenderer } from "../../../UIRenderer";
-import * as Ui from "@webiny/ui/ImageUpload";
-import { Image } from "@webiny/app/components";
-import { AddImageIconWrapper, AddImageWrapper, FilePreviewWrapper, RemoveImage } from "./styled";
-import { ReactComponent as AddFileIcon } from "../../../../assets/icons/attach_file_black_24dp.svg";
-import { Typography } from "@webiny/ui/Typography";
-import { ReactComponent as RemoveImageIcon } from "@webiny/ui/ImageUpload/icons/round-close-24px.svg";
-export var EmptyStateElementRenderer = /*#__PURE__*/function (_UIRenderer) {
-  _inherits(EmptyStateElementRenderer, _UIRenderer);
-
-  var _super = _createSuper(EmptyStateElementRenderer);
+"use strict";
 
-  function EmptyStateElementRenderer() {
-    _classCallCheck(this, EmptyStateElementRenderer);
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EmptyStateElementRenderer = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _UIRenderer2 = require("../../../UIRenderer");
+
+var Ui = _interopRequireWildcard(require("@webiny/ui/ImageUpload"));
 
+var _components = require("@webiny/app/components");
+
+var _styled = require("./styled");
+
+var _attach_file_black_24dp = require("../../../../assets/icons/attach_file_black_24dp.svg");
+
+var _Typography = require("@webiny/ui/Typography");
+
+var _roundClose24px = require("@webiny/ui/ImageUpload/icons/round-close-24px.svg");
+
+var EmptyStateElementRenderer = /*#__PURE__*/function (_UIRenderer) {
+  (0, _inherits2.default)(EmptyStateElementRenderer, _UIRenderer);
+
+  var _super = (0, _createSuper2.default)(EmptyStateElementRenderer);
+
+  function EmptyStateElementRenderer() {
+    (0, _classCallCheck2.default)(this, EmptyStateElementRenderer);
     return _super.apply(this, arguments);
   }
 
-  _createClass(EmptyStateElementRenderer, [{
+  (0, _createClass2.default)(EmptyStateElementRenderer, [{
     key: "render",
     value: function render(_ref) {
       var props = _ref.props;
@@ -31,10 +53,10 @@ export var EmptyStateElementRenderer = /*#__PURE__*/function (_UIRenderer) {
       });
 
       if (acceptsOnlyImages) {
-        return /*#__PURE__*/React.createElement(Ui.Image, {
+        return /*#__PURE__*/_react.default.createElement(Ui.Image, {
           placeholder: "Select an image",
           renderImagePreview: function renderImagePreview(renderImageProps) {
-            return /*#__PURE__*/React.createElement(Image, renderImageProps);
+            return /*#__PURE__*/_react.default.createElement(_components.Image, renderImageProps);
           },
           style: {
             width: "100%",
@@ -47,26 +69,27 @@ export var EmptyStateElementRenderer = /*#__PURE__*/function (_UIRenderer) {
       }
 
       if (props.value) {
-        return /*#__PURE__*/React.createElement(FilePreviewWrapper, null, /*#__PURE__*/React.createElement("span", null, "Attached file: ", /*#__PURE__*/React.createElement("strong", null, props.value.src.split("/").pop())), /*#__PURE__*/React.createElement(RemoveImage, {
+        return /*#__PURE__*/_react.default.createElement(_styled.FilePreviewWrapper, null, /*#__PURE__*/_react.default.createElement("span", null, "Attached file: ", /*#__PURE__*/_react.default.createElement("strong", null, props.value.src.split("/").pop())), /*#__PURE__*/_react.default.createElement(_styled.RemoveImage, {
           onClick: function onClick() {
             return props.onChange(null);
           }
-        }, /*#__PURE__*/React.createElement(RemoveImageIcon, null)), /*#__PURE__*/React.createElement(AddImageWrapper, {
+        }, /*#__PURE__*/_react.default.createElement(_roundClose24px.ReactComponent, null)), /*#__PURE__*/_react.default.createElement(_styled.AddImageWrapper, {
           "data-role": "select-file",
           onClick: props.showFileManager
-        }, /*#__PURE__*/React.createElement(AddImageIconWrapper, null, /*#__PURE__*/React.createElement(AddFileIcon, null), /*#__PURE__*/React.createElement(Typography, {
+        }, /*#__PURE__*/_react.default.createElement(_styled.AddImageIconWrapper, null, /*#__PURE__*/_react.default.createElement(_attach_file_black_24dp.ReactComponent, null), /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
           use: "caption"
         }, "Select a file"))));
       }
 
-      return /*#__PURE__*/React.createElement(AddImageWrapper, {
+      return /*#__PURE__*/_react.default.createElement(_styled.AddImageWrapper, {
         "data-role": "select-file",
         onClick: props.showFileManager
-      }, /*#__PURE__*/React.createElement(AddImageIconWrapper, null, /*#__PURE__*/React.createElement(AddFileIcon, null), /*#__PURE__*/React.createElement(Typography, {
+      }, /*#__PURE__*/_react.default.createElement(_styled.AddImageIconWrapper, null, /*#__PURE__*/_react.default.createElement(_attach_file_black_24dp.ReactComponent, null), /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
         use: "caption"
       }, "Select a file")));
     }
   }]);
-
   return EmptyStateElementRenderer;
-}(UIRenderer);
+}(_UIRenderer2.UIRenderer);
+
+exports.EmptyStateElementRenderer = EmptyStateElementRenderer;

package/ui/elements/form/FileManagerElement/EmptyStateElementRenderer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["EmptyStateElementRenderer.tsx"],"names":["React","UIRenderer","Ui","Image","AddImageIconWrapper","AddImageWrapper","FilePreviewWrapper","RemoveImage","ReactComponent","AddFileIcon","Typography","RemoveImageIcon","EmptyStateElementRenderer","props","accept","fileManagerElement","getAccept","acceptsOnlyImages","every","el","startsWith","renderImageProps","width","height","value","showFileManager","onChange","src","split","pop"],"mappings":";;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,SAASC,UAAT;AACA,OAAO,KAAKC,EAAZ,MAAoB,wBAApB;AACA,SAASC,KAAT,QAAsB,wBAAtB;AAEA,SAASC,mBAAT,EAA8BC,eAA9B,EAA+CC,kBAA/C,EAAmEC,WAAnE;AACA,SAASC,cAAc,IAAIC,WAA3B;AACA,SAASC,UAAT,QAA2B,uBAA3B;AACA,SAASF,cAAc,IAAIG,eAA3B,QAAkD,mDAAlD;AAEA,WAAaC,yBAAb;AAAA;;AAAA;;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA,WAII,sBAEsF;AAAA,UADlFC,KACkF,QADlFA,KACkF;AAClF,UAAMC,MAAM,GAAGD,KAAK,CAACE,kBAAN,CAAyBC,SAAzB,EAAf;AACA,UAAMC,iBAAiB,GAAG,CAACH,MAAD,IAAWA,MAAM,CAACI,KAAP,CAAa,UAAAC,EAAE;AAAA,eAAIA,EAAE,CAACC,UAAH,CAAc,QAAd,CAAJ;AAAA,OAAf,CAArC;;AAEA,UAAIH,iBAAJ,EAAuB;AACnB,4BACI,oBAAC,EAAD,CAAI,KAAJ;AACI,UAAA,WAAW,EAAE,iBADjB;AAEI,UAAA,kBAAkB,EAAE,4BAAAI,gBAAgB;AAAA,gCAAI,oBAAC,KAAD,EAAWA,gBAAX,CAAJ;AAAA,WAFxC;AAGI,UAAA,KAAK,EAAE;AAAEC,YAAAA,KAAK,EAAE,MAAT;AAAiBC,YAAAA,MAAM,EAAE;AAAzB,WAHX;AAII,UAAA,KAAK,EAAEV,KAAK,CAACW,KAJjB;AAKI,UAAA,WAAW,EAAEX,KAAK,CAACY,eALvB;AAMI,UAAA,WAAW,EAAEZ,KAAK,CAACa;AANvB,UADJ;AAUH;;AAED,UAAIb,KAAK,CAACW,KAAV,EAAiB;AACb,4BACI,oBAAC,kBAAD,qBACI,kEACmB,oCAASX,KAAK,CAACW,KAAN,CAAYG,GAAZ,CAAgBC,KAAhB,CAAsB,GAAtB,EAA2BC,GAA3B,EAAT,CADnB,CADJ,eAKI,oBAAC,WAAD;AAAa,UAAA,OAAO,EAAE;AAAA,mBAAMhB,KAAK,CAACa,QAAN,CAAe,IAAf,CAAN;AAAA;AAAtB,wBACI,oBAAC,eAAD,OADJ,CALJ,eASI,oBAAC,eAAD;AAAiB,uBAAW,aAA5B;AAA2C,UAAA,OAAO,EAAEb,KAAK,CAACY;AAA1D,wBACI,oBAAC,mBAAD,qBACI,oBAAC,WAAD,OADJ,eAEI,oBAAC,UAAD;AAAY,UAAA,GAAG,EAAE;AAAjB,2BAFJ,CADJ,CATJ,CADJ;AAkBH;;AAED,0BACI,oBAAC,eAAD;AAAiB,qBAAW,aAA5B;AAA2C,QAAA,OAAO,EAAEZ,KAAK,CAACY;AAA1D,sBACI,oBAAC,mBAAD,qBACI,oBAAC,WAAD,OADJ,eAEI,oBAAC,UAAD;AAAY,QAAA,GAAG,EAAE;AAAjB,yBAFJ,CADJ,CADJ;AAQH;AApDL;;AAAA;AAAA,EAA+CxB,UAA/C","sourcesContent":["import React from \"react\";\nimport { EmptyStateElement } from \"./EmptyStateElement\";\nimport { UIRenderer, UIRenderParams } from \"~/ui/UIRenderer\";\nimport * as Ui from \"@webiny/ui/ImageUpload\";\nimport { Image } from \"@webiny/app/components\";\nimport { FileManagerElementRenderProps } from \"~/ui/elements/form/FileManagerElement/FileManagerElementRenderer\";\nimport { AddImageIconWrapper, AddImageWrapper, FilePreviewWrapper, RemoveImage } from \"./styled\";\nimport { ReactComponent as AddFileIcon } from \"~/assets/icons/attach_file_black_24dp.svg\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { ReactComponent as RemoveImageIcon } from \"@webiny/ui/ImageUpload/icons/round-close-24px.svg\";\n\nexport class EmptyStateElementRenderer extends UIRenderer<\n    EmptyStateElement,\n    FileManagerElementRenderProps\n> {\n    public override render({\n        props\n    }: UIRenderParams<EmptyStateElement, FileManagerElementRenderProps>): React.ReactNode {\n        const accept = props.fileManagerElement.getAccept();\n        const acceptsOnlyImages = !accept || accept.every(el => el.startsWith(\"image/\"));\n\n        if (acceptsOnlyImages) {\n            return (\n                <Ui.Image\n                    placeholder={\"Select an image\"}\n                    renderImagePreview={renderImageProps => <Image {...renderImageProps} />}\n                    style={{ width: \"100%\", height: \"auto\" }}\n                    value={props.value}\n                    uploadImage={props.showFileManager}\n                    removeImage={props.onChange}\n                />\n            );\n        }\n\n        if (props.value) {\n            return (\n                <FilePreviewWrapper>\n                    <span>\n                        Attached file: <strong>{props.value.src.split(\"/\").pop()}</strong>\n                    </span>\n\n                    <RemoveImage onClick={() => props.onChange(null)}>\n                        <RemoveImageIcon />\n                    </RemoveImage>\n\n                    <AddImageWrapper data-role={\"select-file\"} onClick={props.showFileManager}>\n                        <AddImageIconWrapper>\n                            <AddFileIcon />\n                            <Typography use={\"caption\"}>Select a file</Typography>\n                        </AddImageIconWrapper>\n                    </AddImageWrapper>\n                </FilePreviewWrapper>\n            );\n        }\n\n        return (\n            <AddImageWrapper data-role={\"select-file\"} onClick={props.showFileManager}>\n                <AddImageIconWrapper>\n                    <AddFileIcon />\n                    <Typography use={\"caption\"}>Select a file</Typography>\n                </AddImageIconWrapper>\n            </AddImageWrapper>\n        );\n    }\n}\n"]}
+{"version":3,"names":["EmptyStateElementRenderer","props","accept","fileManagerElement","getAccept","acceptsOnlyImages","every","el","startsWith","renderImageProps","width","height","value","showFileManager","onChange","src","split","pop","UIRenderer"],"sources":["EmptyStateElementRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { EmptyStateElement } from \"./EmptyStateElement\";\nimport { UIRenderer, UIRenderParams } from \"~/ui/UIRenderer\";\nimport * as Ui from \"@webiny/ui/ImageUpload\";\nimport { Image } from \"@webiny/app/components\";\nimport { FileManagerElementRenderProps } from \"~/ui/elements/form/FileManagerElement/FileManagerElementRenderer\";\nimport { AddImageIconWrapper, AddImageWrapper, FilePreviewWrapper, RemoveImage } from \"./styled\";\nimport { ReactComponent as AddFileIcon } from \"~/assets/icons/attach_file_black_24dp.svg\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { ReactComponent as RemoveImageIcon } from \"@webiny/ui/ImageUpload/icons/round-close-24px.svg\";\n\nexport class EmptyStateElementRenderer extends UIRenderer<\n    EmptyStateElement,\n    FileManagerElementRenderProps\n> {\n    public override render({\n        props\n    }: UIRenderParams<EmptyStateElement, FileManagerElementRenderProps>): React.ReactNode {\n        const accept = props.fileManagerElement.getAccept();\n        const acceptsOnlyImages = !accept || accept.every(el => el.startsWith(\"image/\"));\n\n        if (acceptsOnlyImages) {\n            return (\n                <Ui.Image\n                    placeholder={\"Select an image\"}\n                    renderImagePreview={renderImageProps => <Image {...renderImageProps} />}\n                    style={{ width: \"100%\", height: \"auto\" }}\n                    value={props.value}\n                    uploadImage={props.showFileManager}\n                    removeImage={props.onChange}\n                />\n            );\n        }\n\n        if (props.value) {\n            return (\n                <FilePreviewWrapper>\n                    <span>\n                        Attached file: <strong>{props.value.src.split(\"/\").pop()}</strong>\n                    </span>\n\n                    <RemoveImage onClick={() => props.onChange(null)}>\n                        <RemoveImageIcon />\n                    </RemoveImage>\n\n                    <AddImageWrapper data-role={\"select-file\"} onClick={props.showFileManager}>\n                        <AddImageIconWrapper>\n                            <AddFileIcon />\n                            <Typography use={\"caption\"}>Select a file</Typography>\n                        </AddImageIconWrapper>\n                    </AddImageWrapper>\n                </FilePreviewWrapper>\n            );\n        }\n\n        return (\n            <AddImageWrapper data-role={\"select-file\"} onClick={props.showFileManager}>\n                <AddImageIconWrapper>\n                    <AddFileIcon />\n                    <Typography use={\"caption\"}>Select a file</Typography>\n                </AddImageIconWrapper>\n            </AddImageWrapper>\n        );\n    }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AAEA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;IAEaA,yB;;;;;;;;;;;;WAIT,sBAEsF;MAAA,IADlFC,KACkF,QADlFA,KACkF;MAClF,IAAMC,MAAM,GAAGD,KAAK,CAACE,kBAAN,CAAyBC,SAAzB,EAAf;MACA,IAAMC,iBAAiB,GAAG,CAACH,MAAD,IAAWA,MAAM,CAACI,KAAP,CAAa,UAAAC,EAAE;QAAA,OAAIA,EAAE,CAACC,UAAH,CAAc,QAAd,CAAJ;MAAA,CAAf,CAArC;;MAEA,IAAIH,iBAAJ,EAAuB;QACnB,oBACI,6BAAC,EAAD,CAAI,KAAJ;UACI,WAAW,EAAE,iBADjB;UAEI,kBAAkB,EAAE,4BAAAI,gBAAgB;YAAA,oBAAI,6BAAC,iBAAD,EAAWA,gBAAX,CAAJ;UAAA,CAFxC;UAGI,KAAK,EAAE;YAAEC,KAAK,EAAE,MAAT;YAAiBC,MAAM,EAAE;UAAzB,CAHX;UAII,KAAK,EAAEV,KAAK,CAACW,KAJjB;UAKI,WAAW,EAAEX,KAAK,CAACY,eALvB;UAMI,WAAW,EAAEZ,KAAK,CAACa;QANvB,EADJ;MAUH;;MAED,IAAIb,KAAK,CAACW,KAAV,EAAiB;QACb,oBACI,6BAAC,0BAAD,qBACI,2EACmB,6CAASX,KAAK,CAACW,KAAN,CAAYG,GAAZ,CAAgBC,KAAhB,CAAsB,GAAtB,EAA2BC,GAA3B,EAAT,CADnB,CADJ,eAKI,6BAAC,mBAAD;UAAa,OAAO,EAAE;YAAA,OAAMhB,KAAK,CAACa,QAAN,CAAe,IAAf,CAAN;UAAA;QAAtB,gBACI,6BAAC,8BAAD,OADJ,CALJ,eASI,6BAAC,uBAAD;UAAiB,aAAW,aAA5B;UAA2C,OAAO,EAAEb,KAAK,CAACY;QAA1D,gBACI,6BAAC,2BAAD,qBACI,6BAAC,sCAAD,OADJ,eAEI,6BAAC,sBAAD;UAAY,GAAG,EAAE;QAAjB,mBAFJ,CADJ,CATJ,CADJ;MAkBH;;MAED,oBACI,6BAAC,uBAAD;QAAiB,aAAW,aAA5B;QAA2C,OAAO,EAAEZ,KAAK,CAACY;MAA1D,gBACI,6BAAC,2BAAD,qBACI,6BAAC,sCAAD,OADJ,eAEI,6BAAC,sBAAD;QAAY,GAAG,EAAE;MAAjB,mBAFJ,CADJ,CADJ;IAQH;;;EApD0CK,uB"}

package/ui/elements/form/FileManagerElement/FileManagerElementRenderer.js

@@ -1,14 +1,33 @@
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _createSuper from "@babel/runtime/helpers/createSuper";
-import React from "react";
-import styled from "@emotion/styled";
-import { UIRenderer } from "../../../UIRenderer";
-import { FormElementMessage } from "@webiny/ui/FormElementMessage";
-import { FileManager } from "../../../../components";
-var ImageUploadWrapper = /*#__PURE__*/styled("div", {
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FileManagerElementRenderer = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _UIRenderer2 = require("../../../UIRenderer");
+
+var _FormElementMessage = require("@webiny/ui/FormElementMessage");
+
+var _components = require("../../../../components");
+
+var ImageUploadWrapper = /*#__PURE__*/(0, _styled.default)("div", {
   target: "e1g56mwy0",
   label: "ImageUploadWrapper"
 })({
@@ -27,18 +46,18 @@ var ImageUploadWrapper = /*#__PURE__*/styled("div", {
     color: "var(--mdc-theme-text-secondary-on-background)"
   }
 });
-export var FileManagerElementRenderer = /*#__PURE__*/function (_UIRenderer) {
-  _inherits(FileManagerElementRenderer, _UIRenderer);
 
-  var _super = _createSuper(FileManagerElementRenderer);
+var FileManagerElementRenderer = /*#__PURE__*/function (_UIRenderer) {
+  (0, _inherits2.default)(FileManagerElementRenderer, _UIRenderer);
 
-  function FileManagerElementRenderer() {
-    _classCallCheck(this, FileManagerElementRenderer);
+  var _super = (0, _createSuper2.default)(FileManagerElementRenderer);
 
+  function FileManagerElementRenderer() {
+    (0, _classCallCheck2.default)(this, FileManagerElementRenderer);
     return _super.apply(this, arguments);
   }
 
-  _createClass(FileManagerElementRenderer, [{
+  (0, _createClass2.default)(FileManagerElementRenderer, [{
     key: "render",
     value: function render(_ref) {
       var element = _ref.element,
@@ -52,7 +71,7 @@ export var FileManagerElementRenderer = /*#__PURE__*/function (_UIRenderer) {
       var accept = element.getAccept();
       var label = element.getLabel(props);
       var description = element.getDescription(props);
-      return /*#__PURE__*/React.createElement(Bind, {
+      return /*#__PURE__*/_react.default.createElement(Bind, {
         name: element.getName(),
         validators: element.getValidators(props),
         defaultValue: element.getDefaultValue(props),
@@ -66,9 +85,9 @@ export var FileManagerElementRenderer = /*#__PURE__*/function (_UIRenderer) {
         var value = _ref2.value,
             onChange = _ref2.onChange,
             validation = _ref2.validation;
-        return /*#__PURE__*/React.createElement(ImageUploadWrapper, null, label && /*#__PURE__*/React.createElement("div", {
+        return /*#__PURE__*/_react.default.createElement(ImageUploadWrapper, null, label && /*#__PURE__*/_react.default.createElement("div", {
           className: "mdc-floating-label mdc-floating-label--float-above"
-        }, label), /*#__PURE__*/React.createElement(FileManager, {
+        }, label), /*#__PURE__*/_react.default.createElement(_components.FileManager, {
           onChange: onChange,
           onChangePick: element.getOnChangePickAttributes(),
           accept: accept,
@@ -78,18 +97,19 @@ export var FileManagerElementRenderer = /*#__PURE__*/function (_UIRenderer) {
           multipleMaxSize: element.getMultipleMaxSize()
         }, function (_ref3) {
           var showFileManager = _ref3.showFileManager;
-          return element.getEmptyStateElement().render(_objectSpread(_objectSpread({}, props), {}, {
+          return element.getEmptyStateElement().render((0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
             fileManagerElement: element,
             showFileManager: showFileManager,
             value: value,
             onChange: onChange
           }));
-        }), validation.isValid === false && /*#__PURE__*/React.createElement(FormElementMessage, {
+        }), validation.isValid === false && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, {
           error: true
-        }, validation.message), validation.isValid !== false && description && /*#__PURE__*/React.createElement(FormElementMessage, null, description));
+        }, validation.message), validation.isValid !== false && description && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, null, description));
       });
     }
   }]);
-
   return FileManagerElementRenderer;
-}(UIRenderer);
+}(_UIRenderer2.UIRenderer);
+
+exports.FileManagerElementRenderer = FileManagerElementRenderer;

package/ui/elements/form/FileManagerElement/FileManagerElementRenderer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["FileManagerElementRenderer.tsx"],"names":["React","styled","UIRenderer","FormElementMessage","FileManager","ImageUploadWrapper","position","opacity","pointerEvents","transform","top","left","color","FileManagerElementRenderer","element","props","formProps","Error","Bind","accept","getAccept","label","getLabel","description","getDescription","getName","getValidators","getDefaultValue","value","cb","onBeforeChange","form","onAfterChange","onChange","validation","getOnChangePickAttributes","getMaxSize","getMultipleMaxCount","getMultipleMaxSize","showFileManager","getEmptyStateElement","render","fileManagerElement","isValid","message"],"mappings":"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","sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { UIRenderer, UIRenderParams } from \"~/ui/UIRenderer\";\nimport { FormElementMessage } from \"@webiny/ui/FormElementMessage\";\nimport { FileManagerElement } from \"~/ui/elements/form/FileManagerElement\";\nimport { FileManager } from \"~/components\";\nimport { FormFieldElementRenderProps } from \"~/ui/elements/form/FormFieldElement\";\n\nconst ImageUploadWrapper = styled(\"div\")({\n    position: \"relative\",\n    \".disabled\": {\n        opacity: 0.75,\n        pointerEvents: \"none\"\n    },\n    \".mdc-floating-label--float-above\": {\n        transform: \"scale(0.75)\",\n        top: 10,\n        left: 10,\n        color: \"var(--mdc-theme-text-secondary-on-background)\"\n    },\n    \".mdc-text-field-helper-text\": {\n        color: \"var(--mdc-theme-text-secondary-on-background)\"\n    }\n});\n\nexport interface FileManagerElementRenderProps extends FormFieldElementRenderProps {\n    fileManagerElement: FileManagerElement;\n    value: any;\n    showFileManager: () => void;\n    onChange: (value: any) => void;\n}\n\nexport class FileManagerElementRenderer extends UIRenderer<\n    FileManagerElement,\n    FormFieldElementRenderProps\n> {\n    public override render({\n        element,\n        props\n    }: UIRenderParams<FileManagerElement, FormFieldElementRenderProps>): React.ReactNode {\n        if (!props.formProps) {\n            throw Error(`FileManagerElement must be placed inside of a FormElement.`);\n        }\n\n        const { Bind } = props.formProps;\n\n        const accept = element.getAccept();\n        const label = element.getLabel(props);\n        const description = element.getDescription(props);\n\n        return (\n            <Bind\n                name={element.getName()}\n                validators={element.getValidators(props)}\n                defaultValue={element.getDefaultValue(props)}\n                beforeChange={(value: string, cb) => element.onBeforeChange(value, cb)}\n                afterChange={(value: string, form) => element.onAfterChange(value, form)}\n            >\n                {({ value, onChange, validation }) => (\n                    <ImageUploadWrapper>\n                        {label && (\n                            <div className=\"mdc-floating-label mdc-floating-label--float-above\">\n                                {label}\n                            </div>\n                        )}\n\n                        <FileManager\n                            onChange={onChange}\n                            onChangePick={element.getOnChangePickAttributes()}\n                            accept={accept}\n                            images={!accept}\n                            maxSize={element.getMaxSize()}\n                            multipleMaxCount={element.getMultipleMaxCount()}\n                            multipleMaxSize={element.getMultipleMaxSize()}\n                        >\n                            {({ showFileManager }) =>\n                                element.getEmptyStateElement().render({\n                                    ...props,\n                                    fileManagerElement: element,\n                                    showFileManager,\n                                    value,\n                                    onChange\n                                })\n                            }\n                        </FileManager>\n\n                        {validation.isValid === false && (\n                            <FormElementMessage error>{validation.message}</FormElementMessage>\n                        )}\n                        {validation.isValid !== false && description && (\n                            <FormElementMessage>{description}</FormElementMessage>\n                        )}\n                    </ImageUploadWrapper>\n                )}\n            </Bind>\n        );\n    }\n}\n"]}
+{"version":3,"names":["ImageUploadWrapper","styled","position","opacity","pointerEvents","transform","top","left","color","FileManagerElementRenderer","element","props","formProps","Error","Bind","accept","getAccept","label","getLabel","description","getDescription","getName","getValidators","getDefaultValue","value","cb","onBeforeChange","form","onAfterChange","onChange","validation","getOnChangePickAttributes","getMaxSize","getMultipleMaxCount","getMultipleMaxSize","showFileManager","getEmptyStateElement","render","fileManagerElement","isValid","message","UIRenderer"],"sources":["FileManagerElementRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { UIRenderer, UIRenderParams } from \"~/ui/UIRenderer\";\nimport { FormElementMessage } from \"@webiny/ui/FormElementMessage\";\nimport { FileManagerElement } from \"~/ui/elements/form/FileManagerElement\";\nimport { FileManager } from \"~/components\";\nimport { FormFieldElementRenderProps } from \"~/ui/elements/form/FormFieldElement\";\n\nconst ImageUploadWrapper = styled(\"div\")({\n    position: \"relative\",\n    \".disabled\": {\n        opacity: 0.75,\n        pointerEvents: \"none\"\n    },\n    \".mdc-floating-label--float-above\": {\n        transform: \"scale(0.75)\",\n        top: 10,\n        left: 10,\n        color: \"var(--mdc-theme-text-secondary-on-background)\"\n    },\n    \".mdc-text-field-helper-text\": {\n        color: \"var(--mdc-theme-text-secondary-on-background)\"\n    }\n});\n\nexport interface FileManagerElementRenderProps extends FormFieldElementRenderProps {\n    fileManagerElement: FileManagerElement;\n    value: any;\n    showFileManager: () => void;\n    onChange: (value: any) => void;\n}\n\nexport class FileManagerElementRenderer extends UIRenderer<\n    FileManagerElement,\n    FormFieldElementRenderProps\n> {\n    public override render({\n        element,\n        props\n    }: UIRenderParams<FileManagerElement, FormFieldElementRenderProps>): React.ReactNode {\n        if (!props.formProps) {\n            throw Error(`FileManagerElement must be placed inside of a FormElement.`);\n        }\n\n        const { Bind } = props.formProps;\n\n        const accept = element.getAccept();\n        const label = element.getLabel(props);\n        const description = element.getDescription(props);\n\n        return (\n            <Bind\n                name={element.getName()}\n                validators={element.getValidators(props)}\n                defaultValue={element.getDefaultValue(props)}\n                beforeChange={(value: string, cb) => element.onBeforeChange(value, cb)}\n                afterChange={(value: string, form) => element.onAfterChange(value, form)}\n            >\n                {({ value, onChange, validation }) => (\n                    <ImageUploadWrapper>\n                        {label && (\n                            <div className=\"mdc-floating-label mdc-floating-label--float-above\">\n                                {label}\n                            </div>\n                        )}\n\n                        <FileManager\n                            onChange={onChange}\n                            onChangePick={element.getOnChangePickAttributes()}\n                            accept={accept}\n                            images={!accept}\n                            maxSize={element.getMaxSize()}\n                            multipleMaxCount={element.getMultipleMaxCount()}\n                            multipleMaxSize={element.getMultipleMaxSize()}\n                        >\n                            {({ showFileManager }) =>\n                                element.getEmptyStateElement().render({\n                                    ...props,\n                                    fileManagerElement: element,\n                                    showFileManager,\n                                    value,\n                                    onChange\n                                })\n                            }\n                        </FileManager>\n\n                        {validation.isValid === false && (\n                            <FormElementMessage error>{validation.message}</FormElementMessage>\n                        )}\n                        {validation.isValid !== false && description && (\n                            <FormElementMessage>{description}</FormElementMessage>\n                        )}\n                    </ImageUploadWrapper>\n                )}\n            </Bind>\n        );\n    }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;AAGA,IAAMA,kBAAkB,oBAAGC,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,GAAiB;EACrCC,QAAQ,EAAE,UAD2B;EAErC,aAAa;IACTC,OAAO,EAAE,IADA;IAETC,aAAa,EAAE;EAFN,CAFwB;EAMrC,oCAAoC;IAChCC,SAAS,EAAE,aADqB;IAEhCC,GAAG,EAAE,EAF2B;IAGhCC,IAAI,EAAE,EAH0B;IAIhCC,KAAK,EAAE;EAJyB,CANC;EAYrC,+BAA+B;IAC3BA,KAAK,EAAE;EADoB;AAZM,CAAjB,CAAxB;;IAwBaC,0B;;;;;;;;;;;;WAIT,sBAGqF;MAAA,IAFjFC,OAEiF,QAFjFA,OAEiF;MAAA,IADjFC,KACiF,QADjFA,KACiF;;MACjF,IAAI,CAACA,KAAK,CAACC,SAAX,EAAsB;QAClB,MAAMC,KAAK,8DAAX;MACH;;MAED,IAAQC,IAAR,GAAiBH,KAAK,CAACC,SAAvB,CAAQE,IAAR;MAEA,IAAMC,MAAM,GAAGL,OAAO,CAACM,SAAR,EAAf;MACA,IAAMC,KAAK,GAAGP,OAAO,CAACQ,QAAR,CAAiBP,KAAjB,CAAd;MACA,IAAMQ,WAAW,GAAGT,OAAO,CAACU,cAAR,CAAuBT,KAAvB,CAApB;MAEA,oBACI,6BAAC,IAAD;QACI,IAAI,EAAED,OAAO,CAACW,OAAR,EADV;QAEI,UAAU,EAAEX,OAAO,CAACY,aAAR,CAAsBX,KAAtB,CAFhB;QAGI,YAAY,EAAED,OAAO,CAACa,eAAR,CAAwBZ,KAAxB,CAHlB;QAII,YAAY,EAAE,sBAACa,KAAD,EAAgBC,EAAhB;UAAA,OAAuBf,OAAO,CAACgB,cAAR,CAAuBF,KAAvB,EAA8BC,EAA9B,CAAvB;QAAA,CAJlB;QAKI,WAAW,EAAE,qBAACD,KAAD,EAAgBG,IAAhB;UAAA,OAAyBjB,OAAO,CAACkB,aAAR,CAAsBJ,KAAtB,EAA6BG,IAA7B,CAAzB;QAAA;MALjB,GAOK;QAAA,IAAGH,KAAH,SAAGA,KAAH;QAAA,IAAUK,QAAV,SAAUA,QAAV;QAAA,IAAoBC,UAApB,SAAoBA,UAApB;QAAA,oBACG,6BAAC,kBAAD,QACKb,KAAK,iBACF;UAAK,SAAS,EAAC;QAAf,GACKA,KADL,CAFR,eAOI,6BAAC,uBAAD;UACI,QAAQ,EAAEY,QADd;UAEI,YAAY,EAAEnB,OAAO,CAACqB,yBAAR,EAFlB;UAGI,MAAM,EAAEhB,MAHZ;UAII,MAAM,EAAE,CAACA,MAJb;UAKI,OAAO,EAAEL,OAAO,CAACsB,UAAR,EALb;UAMI,gBAAgB,EAAEtB,OAAO,CAACuB,mBAAR,EANtB;UAOI,eAAe,EAAEvB,OAAO,CAACwB,kBAAR;QAPrB,GASK;UAAA,IAAGC,eAAH,SAAGA,eAAH;UAAA,OACGzB,OAAO,CAAC0B,oBAAR,GAA+BC,MAA/B,6DACO1B,KADP;YAEI2B,kBAAkB,EAAE5B,OAFxB;YAGIyB,eAAe,EAAfA,eAHJ;YAIIX,KAAK,EAALA,KAJJ;YAKIK,QAAQ,EAARA;UALJ,GADH;QAAA,CATL,CAPJ,EA2BKC,UAAU,CAACS,OAAX,KAAuB,KAAvB,iBACG,6BAAC,sCAAD;UAAoB,KAAK;QAAzB,GAA2BT,UAAU,CAACU,OAAtC,CA5BR,EA8BKV,UAAU,CAACS,OAAX,KAAuB,KAAvB,IAAgCpB,WAAhC,iBACG,6BAAC,sCAAD,QAAqBA,WAArB,CA/BR,CADH;MAAA,CAPL,CADJ;IA8CH;;;EAhE2CsB,uB"}

package/ui/elements/form/FileManagerElement/styled.d.ts

@@ -4,14 +4,14 @@ export declare const AddImageWrapperRound: import("@emotion/styled-base").Styled
     theme?: object | undefined;
 } & {
     children?: import("react").ReactNode;
-}, "key" | "theme" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+}, "key" | keyof import("react").HTMLAttributes<HTMLDivElement> | "theme"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }, Pick<Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Pick<Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, keyof import("react").HTMLAttributes<HTMLDivElement>> & {
     theme?: object | undefined;
 } & {
     children?: import("react").ReactNode;
-}, "key" | "theme" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+}, "key" | keyof import("react").HTMLAttributes<HTMLDivElement> | "theme"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, "theme" | keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
+}, keyof import("react").HTMLAttributes<HTMLDivElement> | "theme">, object>;
 export declare const RemoveImage: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
 export declare const FilePreviewWrapper: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;