@webiny/app-admin 5.34.8 → 5.35.0-beta.0

package/components/RichTextEditor/tools/textColor/index.js

@@ -1,24 +1,18 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var COLOR_TOOL_CLASS = "cdx-text-color";
-
 var TextColorTool = /*#__PURE__*/function () {
   function TextColorTool(_ref) {
     var api = _ref.api,
-        config = _ref.config;
+      config = _ref.config;
     (0, _classCallCheck2.default)(this, TextColorTool);
     (0, _defineProperty2.default)(this, "_state", void 0);
     (0, _defineProperty2.default)(this, "color", void 0);
@@ -45,7 +39,6 @@ var TextColorTool = /*#__PURE__*/function () {
       colorBoxActive: "ce-text-color-tool__color-box--active"
     };
   }
-
   (0, _createClass2.default)(TextColorTool, [{
     key: "state",
     get: function get() {
@@ -53,17 +46,14 @@ var TextColorTool = /*#__PURE__*/function () {
     },
     set: function set(state) {
       this._state = state;
-
       if (!this.button) {
         return;
       }
-
       this.button.classList.toggle(this.api.styles.inlineToolButtonActive, state);
     }
     /**
      * Render method must return HTML element of the button for Inline Toolbar.
      */
-
   }, {
     key: "render",
     value: function render() {
@@ -73,23 +63,22 @@ var TextColorTool = /*#__PURE__*/function () {
       this.button.classList.add(this.api.styles.inlineToolButton);
       return this.button;
     }
+
     /**
      * Input for the link
      */
-
   }, {
     key: "renderActions",
     value: function renderActions() {
       var _this = this;
-
       // Create action element
-      this.colorPicker = document.createElement("div"); // Add element properties
-
+      this.colorPicker = document.createElement("div");
+      // Add element properties
       this.colorPicker.classList.add(this._CSS.colorPicker);
       this.config.themeColors.forEach(function (color) {
         // create element
-        var colorBox = document.createElement("button"); // add properties
-
+        var colorBox = document.createElement("button");
+        // add properties
         colorBox.style.backgroundColor = color;
         colorBox.classList.add(_this._CSS.colorBox);
         colorBox.addEventListener("click", function () {
@@ -100,7 +89,6 @@ var TextColorTool = /*#__PURE__*/function () {
             // set color
             _this.color = color;
           }
-
           if (_this.colorPicker) {
             /**
              * TODO @ts-refactor
@@ -112,27 +100,25 @@ var TextColorTool = /*#__PURE__*/function () {
                 node.classList.remove(_this._CSS.colorBoxActive);
               }
             });
-          } // add active class
-
-
+          }
+          // add active class
           colorBox.classList.add(_this._CSS.colorBoxActive);
         });
-
         if (!_this.colorPicker) {
           return;
-        } // save element
-
-
+        }
+        // save element
         _this.colorPicker.appendChild(colorBox);
-      }); // Return element
+      });
 
+      // Return element
       return this.colorPicker;
     }
+
     /**
      * Finally, when button is pressed Editor calls
      * surround method of the tool with Range object as an argument.
      */
-
   }, {
     key: "surround",
     value: function surround(range) {
@@ -140,7 +126,6 @@ var TextColorTool = /*#__PURE__*/function () {
         this.unwrap(range);
         return;
       }
-
       this.wrap(range);
     }
   }, {
@@ -158,26 +143,21 @@ var TextColorTool = /*#__PURE__*/function () {
     value: function unwrap(range) {
       var mark = this.api.selection.findParentTag(this.tag, this.class);
       var text = range.extractContents();
-
       if (mark) {
         mark.remove();
       }
-
       range.insertNode(text);
     }
   }, {
     key: "showActions",
     value: function showActions(mark) {
       var _this2 = this;
-
       if (!this.colorPicker) {
         return;
       }
-
       this.colorPicker.onclick = function () {
         mark.style.color = _this2.color;
       };
-
       this.colorPicker.hidden = false;
     }
   }, {
@@ -186,21 +166,19 @@ var TextColorTool = /*#__PURE__*/function () {
       if (!this.colorPicker) {
         return;
       }
-
       this.colorPicker.onchange = null;
       this.colorPicker.hidden = true;
     }
+
     /**
      * CheckState method of each Inline Tool is called by Editor with current `Selection`
      * when user selects some text
      */
-
   }, {
     key: "checkState",
     value: function checkState() {
       var mark = this.api.selection.findParentTag(this.tag);
       this.state = !!mark;
-
       if (!!mark) {
         this.showActions(mark);
       } else {
@@ -211,11 +189,9 @@ var TextColorTool = /*#__PURE__*/function () {
     key: "convertToHex",
     value: function convertToHex(color) {
       var rgb = color.match(/(\d+)/g);
-
       if (!rgb) {
         return "";
       }
-
       var hexR = parseInt(rgb[0]).toString(16);
       var hexG = parseInt(rgb[1]).toString(16);
       var hexB = parseInt(rgb[2]).toString(16);
@@ -234,12 +210,12 @@ var TextColorTool = /*#__PURE__*/function () {
     get: function get() {
       return true;
     }
+
     /**
      * Sanitize method returns rules to let Editor know which HTML tags it should respect.
      * @returns {object} sanitizer configuration.
      * https://editorjs.io/sanitizer
      */
-
   }, {
     key: "sanitize",
     get: function get() {
@@ -258,7 +234,6 @@ var TextColorTool = /*#__PURE__*/function () {
               style: el.style
             };
           }
-
           return {};
         }
       };
@@ -266,6 +241,5 @@ var TextColorTool = /*#__PURE__*/function () {
   }]);
   return TextColorTool;
 }();
-
 var _default = TextColorTool;
 exports.default = _default;

package/components/RichTextEditor/tools/textColor/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["COLOR_TOOL_CLASS","TextColorTool","api","config","button","colorPicker","_state","tag","color","class","themeColors","_CSS","colorBox","colorBoxActive","state","classList","toggle","styles","inlineToolButtonActive","document","createElement","type","innerHTML","add","inlineToolButton","forEach","style","backgroundColor","addEventListener","childNodes","node","contains","remove","appendChild","range","unwrap","wrap","selectedText","extractContents","mark","insertNode","selection","expandToTag","findParentTag","text","onclick","hidden","onchange","showActions","hideActions","rgb","match","hexR","parseInt","toString","hexG","hexB","length","span","el"],"sources":["index.ts"],"sourcesContent":["import { API } from \"@editorjs/editorjs\";\n\nconst COLOR_TOOL_CLASS = \"cdx-text-color\";\n\ninterface Config {\n    themeColors: string[];\n}\n\ninterface TextColorToolParams {\n    api: API;\n    config: Config;\n}\n\ninterface SanitizeResultSpanResult {\n    class?: string;\n    style?: CSSStyleDeclaration;\n}\ninterface SanitizeResult {\n    span: (element: HTMLElement) => SanitizeResultSpanResult;\n}\n\nclass TextColorTool {\n    private _state: boolean;\n    private color: string;\n    private readonly api: API;\n    private readonly tag: string;\n    private readonly class: string;\n    private colorPicker: HTMLDivElement | null;\n    private button: HTMLButtonElement | null;\n    private readonly config: Config;\n    private readonly _CSS: any;\n\n    constructor({ api, config }: TextColorToolParams) {\n        this.api = api;\n        this.button = null;\n        this.colorPicker = null;\n        this._state = false;\n        this.tag = \"SPAN\";\n        this.color = \"red\";\n        this.class = COLOR_TOOL_CLASS;\n        this.config = config || { themeColors: [\"#44bd32\"] };\n        this._CSS = {\n            colorPicker: \"ce-text-color-tool\",\n            colorBox: \"ce-text-color-tool__color-box\",\n            colorBoxActive: \"ce-text-color-tool__color-box--active\"\n        };\n    }\n\n    static get isInline(): boolean {\n        return true;\n    }\n\n    /**\n     * Sanitize method returns rules to let Editor know which HTML tags it should respect.\n     * @returns {object} sanitizer configuration.\n     * https://editorjs.io/sanitizer\n     */\n    static get sanitize(): SanitizeResult {\n        // Block Tools are not connected with Inline ones,\n        // so markup added by Inline Tool will be removed on pasting or on saving.\n        // We need this config so that `class` & `style` attributes will remain intact for \"span\".\n        return {\n            /**\n             * TODO: figure out the element type\n             */\n            span: (el: HTMLElement) => {\n                // Respect `class` and `style` attributes if this condition is meet.\n                if (el.classList.contains(COLOR_TOOL_CLASS)) {\n                    return {\n                        class: COLOR_TOOL_CLASS,\n                        style: el.style\n                    };\n                }\n                return {};\n            }\n        };\n    }\n\n    get state(): boolean {\n        return this._state;\n    }\n\n    set state(state) {\n        this._state = state;\n        if (!this.button) {\n            return;\n        }\n        this.button.classList.toggle(this.api.styles.inlineToolButtonActive, state);\n    }\n    /**\n     * Render method must return HTML element of the button for Inline Toolbar.\n     */\n    public render(): HTMLButtonElement {\n        this.button = document.createElement(\"button\");\n        this.button.type = \"button\";\n        this.button.innerHTML =\n            '<svg width=\"20\" height=\"18\"><path d=\"M10.458 12.04l2.919 1.686-.781 1.417-.984-.03-.974 1.687H8.674l1.49-2.583-.508-.775.802-1.401zm.546-.952l3.624-6.327a1.597 1.597 0 0 1 2.182-.59 1.632 1.632 0 0 1 .615 2.201l-3.519 6.391-2.902-1.675zm-7.73 3.467h3.465a1.123 1.123 0 1 1 0 2.247H3.273a1.123 1.123 0 1 1 0-2.247z\"/></svg>';\n        this.button.classList.add(this.api.styles.inlineToolButton);\n\n        return this.button;\n    }\n\n    /**\n     * Input for the link\n     */\n    public renderActions(): HTMLElement {\n        // Create action element\n        this.colorPicker = document.createElement(\"div\");\n        // Add element properties\n        this.colorPicker.classList.add(this._CSS.colorPicker);\n\n        this.config.themeColors.forEach(color => {\n            // create element\n            const colorBox = document.createElement(\"button\");\n            // add properties\n            colorBox.style.backgroundColor = color;\n            colorBox.classList.add(this._CSS.colorBox);\n\n            colorBox.addEventListener(\"click\", () => {\n                if (this.color === color) {\n                    // reset the color\n                    this.color = \"unset\";\n                } else {\n                    // set color\n                    this.color = color;\n                }\n\n                if (this.colorPicker) {\n                    /**\n                     * TODO @ts-refactor\n                     * TS Complains there is no classList on child node.\n                     */\n                    this.colorPicker.childNodes.forEach((node: any) => {\n                        if (node.classList.contains(this._CSS.colorBoxActive)) {\n                            // remove active class\n                            node.classList.remove(this._CSS.colorBoxActive);\n                        }\n                    });\n                }\n                // add active class\n                colorBox.classList.add(this._CSS.colorBoxActive);\n            });\n            if (!this.colorPicker) {\n                return;\n            }\n            // save element\n            this.colorPicker.appendChild(colorBox);\n        });\n\n        // Return element\n        return this.colorPicker;\n    }\n\n    /**\n     * Finally, when button is pressed Editor calls\n     * surround method of the tool with Range object as an argument.\n     */\n    public surround(range: Range): void {\n        if (this.state) {\n            this.unwrap(range);\n            return;\n        }\n\n        this.wrap(range);\n    }\n\n    public wrap(range: Range): void {\n        const selectedText = range.extractContents();\n        const mark = document.createElement(this.tag);\n\n        mark.classList.add(this.class);\n\n        mark.appendChild(selectedText);\n        range.insertNode(mark);\n\n        this.api.selection.expandToTag(mark);\n    }\n\n    public unwrap(range: Range): void {\n        const mark = this.api.selection.findParentTag(this.tag, this.class);\n        const text = range.extractContents();\n\n        if (mark) {\n            mark.remove();\n        }\n\n        range.insertNode(text);\n    }\n\n    public showActions(mark: HTMLElement): void {\n        if (!this.colorPicker) {\n            return;\n        }\n        this.colorPicker.onclick = () => {\n            mark.style.color = this.color;\n        };\n        this.colorPicker.hidden = false;\n    }\n\n    public hideActions(): void {\n        if (!this.colorPicker) {\n            return;\n        }\n        this.colorPicker.onchange = null;\n        this.colorPicker.hidden = true;\n    }\n\n    /**\n     * CheckState method of each Inline Tool is called by Editor with current `Selection`\n     * when user selects some text\n     */\n    public checkState(): void {\n        const mark = this.api.selection.findParentTag(this.tag);\n\n        this.state = !!mark;\n\n        if (!!mark) {\n            this.showActions(mark);\n        } else {\n            this.hideActions();\n        }\n    }\n\n    public convertToHex(color: string): string {\n        const rgb = color.match(/(\\d+)/g);\n        if (!rgb) {\n            return \"\";\n        }\n\n        let hexR = parseInt(rgb[0]).toString(16);\n        let hexG = parseInt(rgb[1]).toString(16);\n        let hexB = parseInt(rgb[2]).toString(16);\n\n        hexR = hexR.length === 1 ? \"0\" + hexR : hexR;\n        hexG = hexG.length === 1 ? \"0\" + hexG : hexG;\n        hexB = hexB.length === 1 ? \"0\" + hexB : hexB;\n\n        return \"#\" + hexR + hexG + hexB;\n    }\n\n    public clear(): void {\n        this.hideActions();\n    }\n}\n\nexport default TextColorTool;\n"],"mappings":"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"}
+{"version":3,"names":["COLOR_TOOL_CLASS","TextColorTool","api","config","button","colorPicker","_state","tag","color","class","themeColors","_CSS","colorBox","colorBoxActive","state","classList","toggle","styles","inlineToolButtonActive","document","createElement","type","innerHTML","add","inlineToolButton","forEach","style","backgroundColor","addEventListener","childNodes","node","contains","remove","appendChild","range","unwrap","wrap","selectedText","extractContents","mark","insertNode","selection","expandToTag","findParentTag","text","onclick","hidden","onchange","showActions","hideActions","rgb","match","hexR","parseInt","toString","hexG","hexB","length","span","el"],"sources":["index.ts"],"sourcesContent":["import { API } from \"@editorjs/editorjs\";\n\nconst COLOR_TOOL_CLASS = \"cdx-text-color\";\n\ninterface Config {\n    themeColors: string[];\n}\n\ninterface TextColorToolParams {\n    api: API;\n    config: Config;\n}\n\ninterface SanitizeResultSpanResult {\n    class?: string;\n    style?: CSSStyleDeclaration;\n}\ninterface SanitizeResult {\n    span: (element: HTMLElement) => SanitizeResultSpanResult;\n}\n\nclass TextColorTool {\n    private _state: boolean;\n    private color: string;\n    private readonly api: API;\n    private readonly tag: string;\n    private readonly class: string;\n    private colorPicker: HTMLDivElement | null;\n    private button: HTMLButtonElement | null;\n    private readonly config: Config;\n    private readonly _CSS: any;\n\n    constructor({ api, config }: TextColorToolParams) {\n        this.api = api;\n        this.button = null;\n        this.colorPicker = null;\n        this._state = false;\n        this.tag = \"SPAN\";\n        this.color = \"red\";\n        this.class = COLOR_TOOL_CLASS;\n        this.config = config || { themeColors: [\"#44bd32\"] };\n        this._CSS = {\n            colorPicker: \"ce-text-color-tool\",\n            colorBox: \"ce-text-color-tool__color-box\",\n            colorBoxActive: \"ce-text-color-tool__color-box--active\"\n        };\n    }\n\n    static get isInline(): boolean {\n        return true;\n    }\n\n    /**\n     * Sanitize method returns rules to let Editor know which HTML tags it should respect.\n     * @returns {object} sanitizer configuration.\n     * https://editorjs.io/sanitizer\n     */\n    static get sanitize(): SanitizeResult {\n        // Block Tools are not connected with Inline ones,\n        // so markup added by Inline Tool will be removed on pasting or on saving.\n        // We need this config so that `class` & `style` attributes will remain intact for \"span\".\n        return {\n            /**\n             * TODO: figure out the element type\n             */\n            span: (el: HTMLElement) => {\n                // Respect `class` and `style` attributes if this condition is meet.\n                if (el.classList.contains(COLOR_TOOL_CLASS)) {\n                    return {\n                        class: COLOR_TOOL_CLASS,\n                        style: el.style\n                    };\n                }\n                return {};\n            }\n        };\n    }\n\n    get state(): boolean {\n        return this._state;\n    }\n\n    set state(state) {\n        this._state = state;\n        if (!this.button) {\n            return;\n        }\n        this.button.classList.toggle(this.api.styles.inlineToolButtonActive, state);\n    }\n    /**\n     * Render method must return HTML element of the button for Inline Toolbar.\n     */\n    public render(): HTMLButtonElement {\n        this.button = document.createElement(\"button\");\n        this.button.type = \"button\";\n        this.button.innerHTML =\n            '<svg width=\"20\" height=\"18\"><path d=\"M10.458 12.04l2.919 1.686-.781 1.417-.984-.03-.974 1.687H8.674l1.49-2.583-.508-.775.802-1.401zm.546-.952l3.624-6.327a1.597 1.597 0 0 1 2.182-.59 1.632 1.632 0 0 1 .615 2.201l-3.519 6.391-2.902-1.675zm-7.73 3.467h3.465a1.123 1.123 0 1 1 0 2.247H3.273a1.123 1.123 0 1 1 0-2.247z\"/></svg>';\n        this.button.classList.add(this.api.styles.inlineToolButton);\n\n        return this.button;\n    }\n\n    /**\n     * Input for the link\n     */\n    public renderActions(): HTMLElement {\n        // Create action element\n        this.colorPicker = document.createElement(\"div\");\n        // Add element properties\n        this.colorPicker.classList.add(this._CSS.colorPicker);\n\n        this.config.themeColors.forEach(color => {\n            // create element\n            const colorBox = document.createElement(\"button\");\n            // add properties\n            colorBox.style.backgroundColor = color;\n            colorBox.classList.add(this._CSS.colorBox);\n\n            colorBox.addEventListener(\"click\", () => {\n                if (this.color === color) {\n                    // reset the color\n                    this.color = \"unset\";\n                } else {\n                    // set color\n                    this.color = color;\n                }\n\n                if (this.colorPicker) {\n                    /**\n                     * TODO @ts-refactor\n                     * TS Complains there is no classList on child node.\n                     */\n                    this.colorPicker.childNodes.forEach((node: any) => {\n                        if (node.classList.contains(this._CSS.colorBoxActive)) {\n                            // remove active class\n                            node.classList.remove(this._CSS.colorBoxActive);\n                        }\n                    });\n                }\n                // add active class\n                colorBox.classList.add(this._CSS.colorBoxActive);\n            });\n            if (!this.colorPicker) {\n                return;\n            }\n            // save element\n            this.colorPicker.appendChild(colorBox);\n        });\n\n        // Return element\n        return this.colorPicker;\n    }\n\n    /**\n     * Finally, when button is pressed Editor calls\n     * surround method of the tool with Range object as an argument.\n     */\n    public surround(range: Range): void {\n        if (this.state) {\n            this.unwrap(range);\n            return;\n        }\n\n        this.wrap(range);\n    }\n\n    public wrap(range: Range): void {\n        const selectedText = range.extractContents();\n        const mark = document.createElement(this.tag);\n\n        mark.classList.add(this.class);\n\n        mark.appendChild(selectedText);\n        range.insertNode(mark);\n\n        this.api.selection.expandToTag(mark);\n    }\n\n    public unwrap(range: Range): void {\n        const mark = this.api.selection.findParentTag(this.tag, this.class);\n        const text = range.extractContents();\n\n        if (mark) {\n            mark.remove();\n        }\n\n        range.insertNode(text);\n    }\n\n    public showActions(mark: HTMLElement): void {\n        if (!this.colorPicker) {\n            return;\n        }\n        this.colorPicker.onclick = () => {\n            mark.style.color = this.color;\n        };\n        this.colorPicker.hidden = false;\n    }\n\n    public hideActions(): void {\n        if (!this.colorPicker) {\n            return;\n        }\n        this.colorPicker.onchange = null;\n        this.colorPicker.hidden = true;\n    }\n\n    /**\n     * CheckState method of each Inline Tool is called by Editor with current `Selection`\n     * when user selects some text\n     */\n    public checkState(): void {\n        const mark = this.api.selection.findParentTag(this.tag);\n\n        this.state = !!mark;\n\n        if (!!mark) {\n            this.showActions(mark);\n        } else {\n            this.hideActions();\n        }\n    }\n\n    public convertToHex(color: string): string {\n        const rgb = color.match(/(\\d+)/g);\n        if (!rgb) {\n            return \"\";\n        }\n\n        let hexR = parseInt(rgb[0]).toString(16);\n        let hexG = parseInt(rgb[1]).toString(16);\n        let hexB = parseInt(rgb[2]).toString(16);\n\n        hexR = hexR.length === 1 ? \"0\" + hexR : hexR;\n        hexG = hexG.length === 1 ? \"0\" + hexG : hexG;\n        hexB = hexB.length === 1 ? \"0\" + hexB : hexB;\n\n        return \"#\" + hexR + hexG + hexB;\n    }\n\n    public clear(): void {\n        this.hideActions();\n    }\n}\n\nexport default TextColorTool;\n"],"mappings":"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"}

package/components/RichTextEditor/tools/utils.js

@@ -6,13 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.TextAlign = exports.ALIGNMENT_ICONS = exports.ALIGNMENTS = void 0;
 var TextAlign;
 exports.TextAlign = TextAlign;
-
 (function (TextAlign) {
   TextAlign["START"] = "start";
   TextAlign["END"] = "end";
   TextAlign["CENTER"] = "center";
 })(TextAlign || (exports.TextAlign = TextAlign = {}));
-
 var ALIGNMENT_ICONS = {
   start: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">\n' + '  <path fill="none" d="M0 0h24v24H0V0z"/>\n' + "  <g>\n" + '    <path fill="currentColor" d="M14 15H4c-.55 0-1 .45-1 1s.45 1 1 1h10c.55 0 1-.45 1-1s-.45-1-1-1zm0-8H4c-.55 0-1 .45-1 1s.45 1 1 1h10c.55 0 1-.45 1-1s-.45-1-1-1zM4 13h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zm0 8h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zM3 4c0 .55.45 1 1 1h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1z"/>\n' + "  </g>\n" + "</svg>",
   end: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">\n' + '  <path fill="none" d="M0 0h24v24H0V0z"/>\n' + "  <g>\n" + '    <path fill="currentColor" d="M4 21h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zm6-4h10c.55 0 1-.45 1-1s-.45-1-1-1H10c-.55 0-1 .45-1 1s.45 1 1 1zm-6-4h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zm6-4h10c.55 0 1-.45 1-1s-.45-1-1-1H10c-.55 0-1 .45-1 1s.45 1 1 1zM3 4c0 .55.45 1 1 1h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1z"/>\n' + "  </g>\n" + "</svg>",

package/components/RichTextEditor/tools/utils.js.map

@@ -1 +1 @@
-{"version":3,"names":["TextAlign","ALIGNMENT_ICONS","start","end","center","justify","ALIGNMENTS","name","START","svg","CENTER","END"],"sources":["utils.ts"],"sourcesContent":["export enum TextAlign {\n    START = \"start\",\n    END = \"end\",\n    CENTER = \"center\"\n}\n\nexport type Alignment = {\n    name: TextAlign;\n    svg: string;\n};\n\nexport const ALIGNMENT_ICONS = {\n    start:\n        '<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\">\\n' +\n        '  <path fill=\"none\" d=\"M0 0h24v24H0V0z\"/>\\n' +\n        \"  <g>\\n\" +\n        '    <path fill=\"currentColor\" d=\"M14 15H4c-.55 0-1 .45-1 1s.45 1 1 1h10c.55 0 1-.45 1-1s-.45-1-1-1zm0-8H4c-.55 0-1 .45-1 1s.45 1 1 1h10c.55 0 1-.45 1-1s-.45-1-1-1zM4 13h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zm0 8h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zM3 4c0 .55.45 1 1 1h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1z\"/>\\n' +\n        \"  </g>\\n\" +\n        \"</svg>\",\n    end:\n        '<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\">\\n' +\n        '  <path fill=\"none\" d=\"M0 0h24v24H0V0z\"/>\\n' +\n        \"  <g>\\n\" +\n        '    <path fill=\"currentColor\" d=\"M4 21h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zm6-4h10c.55 0 1-.45 1-1s-.45-1-1-1H10c-.55 0-1 .45-1 1s.45 1 1 1zm-6-4h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zm6-4h10c.55 0 1-.45 1-1s-.45-1-1-1H10c-.55 0-1 .45-1 1s.45 1 1 1zM3 4c0 .55.45 1 1 1h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1z\"/>\\n' +\n        \"  </g>\\n\" +\n        \"</svg>\",\n    center:\n        '<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\">\\n' +\n        '  <path fill=\"none\" d=\"M0 0h24v24H0V0z\"/>\\n' +\n        \"  <g>\\n\" +\n        '    <path fill=\"currentColor\" d=\"M7 16c0 .55.45 1 1 1h8c.55 0 1-.45 1-1s-.45-1-1-1H8c-.55 0-1 .45-1 1zm-3 5h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zm0-8h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zm3-5c0 .55.45 1 1 1h8c.55 0 1-.45 1-1s-.45-1-1-1H8c-.55 0-1 .45-1 1zM3 4c0 .55.45 1 1 1h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1z\"/>\\n' +\n        \"  </g>\\n\" +\n        \"</svg>\",\n    justify:\n        '<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\">\\n' +\n        '  <path fill=\"none\" d=\"M0 0h24v24H0V0z\"/>\\n' +\n        \"  <g>\\n\" +\n        '    <path fill=\"currentColor\" d=\"M4 21h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zm0-4h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zm0-4h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zm0-4h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zM3 4c0 .55.45 1 1 1h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1z\"/>\\n' +\n        \"  </g>\\n\" +\n        \"</svg>\"\n};\n\nexport const ALIGNMENTS = [\n    {\n        name: TextAlign.START,\n        svg: ALIGNMENT_ICONS.start\n    },\n    {\n        name: TextAlign.CENTER,\n        svg: ALIGNMENT_ICONS.center\n    },\n    {\n        name: TextAlign.END,\n        svg: ALIGNMENT_ICONS.end\n    }\n];\n"],"mappings":";;;;;;IAAYA,S;;;WAAAA,S;EAAAA,S;EAAAA,S;EAAAA,S;GAAAA,S,yBAAAA,S;;AAWL,IAAMC,eAAe,GAAG;EAC3BC,KAAK,EACD,sEACA,6CADA,GAEA,SAFA,GAGA,gXAHA,GAIA,UAJA,GAKA,QAPuB;EAQ3BC,GAAG,EACC,sEACA,6CADA,GAEA,SAFA,GAGA,iXAHA,GAIA,UAJA,GAKA,QAduB;EAe3BC,MAAM,EACF,sEACA,6CADA,GAEA,SAFA,GAGA,uXAHA,GAIA,UAJA,GAKA,QArBuB;EAsB3BC,OAAO,EACH,sEACA,6CADA,GAEA,SAFA,GAGA,8WAHA,GAIA,UAJA,GAKA;AA5BuB,CAAxB;;AA+BA,IAAMC,UAAU,GAAG,CACtB;EACIC,IAAI,EAAEP,SAAS,CAACQ,KADpB;EAEIC,GAAG,EAAER,eAAe,CAACC;AAFzB,CADsB,EAKtB;EACIK,IAAI,EAAEP,SAAS,CAACU,MADpB;EAEID,GAAG,EAAER,eAAe,CAACG;AAFzB,CALsB,EAStB;EACIG,IAAI,EAAEP,SAAS,CAACW,GADpB;EAEIF,GAAG,EAAER,eAAe,CAACE;AAFzB,CATsB,CAAnB"}
+{"version":3,"names":["TextAlign","ALIGNMENT_ICONS","start","end","center","justify","ALIGNMENTS","name","START","svg","CENTER","END"],"sources":["utils.ts"],"sourcesContent":["export enum TextAlign {\n    START = \"start\",\n    END = \"end\",\n    CENTER = \"center\"\n}\n\nexport type Alignment = {\n    name: TextAlign;\n    svg: string;\n};\n\nexport const ALIGNMENT_ICONS = {\n    start:\n        '<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\">\\n' +\n        '  <path fill=\"none\" d=\"M0 0h24v24H0V0z\"/>\\n' +\n        \"  <g>\\n\" +\n        '    <path fill=\"currentColor\" d=\"M14 15H4c-.55 0-1 .45-1 1s.45 1 1 1h10c.55 0 1-.45 1-1s-.45-1-1-1zm0-8H4c-.55 0-1 .45-1 1s.45 1 1 1h10c.55 0 1-.45 1-1s-.45-1-1-1zM4 13h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zm0 8h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zM3 4c0 .55.45 1 1 1h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1z\"/>\\n' +\n        \"  </g>\\n\" +\n        \"</svg>\",\n    end:\n        '<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\">\\n' +\n        '  <path fill=\"none\" d=\"M0 0h24v24H0V0z\"/>\\n' +\n        \"  <g>\\n\" +\n        '    <path fill=\"currentColor\" d=\"M4 21h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zm6-4h10c.55 0 1-.45 1-1s-.45-1-1-1H10c-.55 0-1 .45-1 1s.45 1 1 1zm-6-4h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zm6-4h10c.55 0 1-.45 1-1s-.45-1-1-1H10c-.55 0-1 .45-1 1s.45 1 1 1zM3 4c0 .55.45 1 1 1h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1z\"/>\\n' +\n        \"  </g>\\n\" +\n        \"</svg>\",\n    center:\n        '<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\">\\n' +\n        '  <path fill=\"none\" d=\"M0 0h24v24H0V0z\"/>\\n' +\n        \"  <g>\\n\" +\n        '    <path fill=\"currentColor\" d=\"M7 16c0 .55.45 1 1 1h8c.55 0 1-.45 1-1s-.45-1-1-1H8c-.55 0-1 .45-1 1zm-3 5h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zm0-8h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zm3-5c0 .55.45 1 1 1h8c.55 0 1-.45 1-1s-.45-1-1-1H8c-.55 0-1 .45-1 1zM3 4c0 .55.45 1 1 1h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1z\"/>\\n' +\n        \"  </g>\\n\" +\n        \"</svg>\",\n    justify:\n        '<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\">\\n' +\n        '  <path fill=\"none\" d=\"M0 0h24v24H0V0z\"/>\\n' +\n        \"  <g>\\n\" +\n        '    <path fill=\"currentColor\" d=\"M4 21h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zm0-4h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zm0-4h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zm0-4h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zM3 4c0 .55.45 1 1 1h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1z\"/>\\n' +\n        \"  </g>\\n\" +\n        \"</svg>\"\n};\n\nexport const ALIGNMENTS = [\n    {\n        name: TextAlign.START,\n        svg: ALIGNMENT_ICONS.start\n    },\n    {\n        name: TextAlign.CENTER,\n        svg: ALIGNMENT_ICONS.center\n    },\n    {\n        name: TextAlign.END,\n        svg: ALIGNMENT_ICONS.end\n    }\n];\n"],"mappings":";;;;;;IAAYA,SAAS;AAAA;AAAA,WAATA,SAAS;EAATA,SAAS;EAATA,SAAS;EAATA,SAAS;AAAA,GAATA,SAAS,yBAATA,SAAS;AAWd,IAAMC,eAAe,GAAG;EAC3BC,KAAK,EACD,mEAAmE,GACnE,6CAA6C,GAC7C,SAAS,GACT,gXAAgX,GAChX,UAAU,GACV,QAAQ;EACZC,GAAG,EACC,mEAAmE,GACnE,6CAA6C,GAC7C,SAAS,GACT,iXAAiX,GACjX,UAAU,GACV,QAAQ;EACZC,MAAM,EACF,mEAAmE,GACnE,6CAA6C,GAC7C,SAAS,GACT,uXAAuX,GACvX,UAAU,GACV,QAAQ;EACZC,OAAO,EACH,mEAAmE,GACnE,6CAA6C,GAC7C,SAAS,GACT,8WAA8W,GAC9W,UAAU,GACV;AACR,CAAC;AAAC;AAEK,IAAMC,UAAU,GAAG,CACtB;EACIC,IAAI,EAAEP,SAAS,CAACQ,KAAK;EACrBC,GAAG,EAAER,eAAe,CAACC;AACzB,CAAC,EACD;EACIK,IAAI,EAAEP,SAAS,CAACU,MAAM;EACtBD,GAAG,EAAER,eAAe,CAACG;AACzB,CAAC,EACD;EACIG,IAAI,EAAEP,SAAS,CAACW,GAAG;EACnBF,GAAG,EAAER,eAAe,CAACE;AACzB,CAAC,CACJ;AAAC"}

package/components/Routes.js

@@ -1,42 +1,36 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Routes = void 0;
-
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _plugins = require("@webiny/plugins");
-
 var _reactRouter = require("@webiny/react-router");
-
 var Routes = function Routes(props) {
   var routes = [].concat((0, _toConsumableArray2.default)(props.routes), (0, _toConsumableArray2.default)(_plugins.plugins.byType("route").map(function (_ref) {
     var route = _ref.route;
     return route;
   }))).sort(function (a, b) {
     var pathA = a.props.path || "*";
-    var pathB = b.props.path || "*"; // This will sort paths at the very bottom of the list
+    var pathB = b.props.path || "*";
 
+    // This will sort paths at the very bottom of the list
     if (pathA === "/" && pathB === "*") {
       return -1;
-    } // This will push * and / to the bottom of the list
-
+    }
 
+    // This will push * and / to the bottom of the list
     if (pathA === "*" || pathA === "/") {
       return 1;
-    } // This will push * and / to the bottom of the list
-
+    }
 
+    // This will push * and / to the bottom of the list
     if (["*", "/"].includes(pathB)) {
       return -1;
     }
-
     return 0;
   });
   return /*#__PURE__*/_react.default.createElement(_reactRouter.Routes, null, routes.map(function (route, index) {
@@ -45,5 +39,4 @@ var Routes = function Routes(props) {
     });
   }));
 };
-
 exports.Routes = Routes;

package/components/Routes.js.map

@@ -1 +1 @@
-{"version":3,"names":["Routes","props","routes","plugins","byType","map","route","sort","a","b","pathA","path","pathB","includes","index","React","cloneElement","key"],"sources":["Routes.tsx"],"sourcesContent":["import React from \"react\";\nimport { plugins } from \"@webiny/plugins\";\nimport { Routes as ReactRouterRoutes } from \"@webiny/react-router\";\nimport { RoutePlugin } from \"@webiny/app/types\";\n\ninterface RoutesProps {\n    routes: JSX.Element[];\n}\n\nexport const Routes: React.FC<RoutesProps> = props => {\n    const routes = [\n        ...props.routes,\n        // For backwards compatibility, we need to support the RoutePlugin routes as well.\n        ...plugins.byType<RoutePlugin>(\"route\").map(({ route }) => route)\n    ].sort((a, b) => {\n        const pathA = a.props.path || \"*\";\n        const pathB = b.props.path || \"*\";\n\n        // This will sort paths at the very bottom of the list\n        if (pathA === \"/\" && pathB === \"*\") {\n            return -1;\n        }\n\n        // This will push * and / to the bottom of the list\n        if (pathA === \"*\" || pathA === \"/\") {\n            return 1;\n        }\n\n        // This will push * and / to the bottom of the list\n        if ([\"*\", \"/\"].includes(pathB)) {\n            return -1;\n        }\n\n        return 0;\n    });\n\n    return (\n        <ReactRouterRoutes>\n            {routes.map((route, index) =>\n                React.cloneElement(route, { key: `${route.props.path}:${index}` })\n            )}\n        </ReactRouterRoutes>\n    );\n};\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AAOO,IAAMA,MAA6B,GAAG,SAAhCA,MAAgC,CAAAC,KAAK,EAAI;EAClD,IAAMC,MAAM,GAAG,2CACRD,KAAK,CAACC,MADE,oCAGRC,gBAAA,CAAQC,MAAR,CAA4B,OAA5B,EAAqCC,GAArC,CAAyC;IAAA,IAAGC,KAAH,QAAGA,KAAH;IAAA,OAAeA,KAAf;EAAA,CAAzC,CAHQ,GAIbC,IAJa,CAIR,UAACC,CAAD,EAAIC,CAAJ,EAAU;IACb,IAAMC,KAAK,GAAGF,CAAC,CAACP,KAAF,CAAQU,IAAR,IAAgB,GAA9B;IACA,IAAMC,KAAK,GAAGH,CAAC,CAACR,KAAF,CAAQU,IAAR,IAAgB,GAA9B,CAFa,CAIb;;IACA,IAAID,KAAK,KAAK,GAAV,IAAiBE,KAAK,KAAK,GAA/B,EAAoC;MAChC,OAAO,CAAC,CAAR;IACH,CAPY,CASb;;;IACA,IAAIF,KAAK,KAAK,GAAV,IAAiBA,KAAK,KAAK,GAA/B,EAAoC;MAChC,OAAO,CAAP;IACH,CAZY,CAcb;;;IACA,IAAI,CAAC,GAAD,EAAM,GAAN,EAAWG,QAAX,CAAoBD,KAApB,CAAJ,EAAgC;MAC5B,OAAO,CAAC,CAAR;IACH;;IAED,OAAO,CAAP;EACH,CAxBc,CAAf;EA0BA,oBACI,6BAAC,mBAAD,QACKV,MAAM,CAACG,GAAP,CAAW,UAACC,KAAD,EAAQQ,KAAR;IAAA,oBACRC,cAAA,CAAMC,YAAN,CAAmBV,KAAnB,EAA0B;MAAEW,GAAG,YAAKX,KAAK,CAACL,KAAN,CAAYU,IAAjB,cAAyBG,KAAzB;IAAL,CAA1B,CADQ;EAAA,CAAX,CADL,CADJ;AAOH,CAlCM"}
+{"version":3,"names":["Routes","props","routes","plugins","byType","map","route","sort","a","b","pathA","path","pathB","includes","index","React","cloneElement","key"],"sources":["Routes.tsx"],"sourcesContent":["import React from \"react\";\nimport { plugins } from \"@webiny/plugins\";\nimport { Routes as ReactRouterRoutes } from \"@webiny/react-router\";\nimport { RoutePlugin } from \"@webiny/app/types\";\n\ninterface RoutesProps {\n    routes: JSX.Element[];\n}\n\nexport const Routes: React.FC<RoutesProps> = props => {\n    const routes = [\n        ...props.routes,\n        // For backwards compatibility, we need to support the RoutePlugin routes as well.\n        ...plugins.byType<RoutePlugin>(\"route\").map(({ route }) => route)\n    ].sort((a, b) => {\n        const pathA = a.props.path || \"*\";\n        const pathB = b.props.path || \"*\";\n\n        // This will sort paths at the very bottom of the list\n        if (pathA === \"/\" && pathB === \"*\") {\n            return -1;\n        }\n\n        // This will push * and / to the bottom of the list\n        if (pathA === \"*\" || pathA === \"/\") {\n            return 1;\n        }\n\n        // This will push * and / to the bottom of the list\n        if ([\"*\", \"/\"].includes(pathB)) {\n            return -1;\n        }\n\n        return 0;\n    });\n\n    return (\n        <ReactRouterRoutes>\n            {routes.map((route, index) =>\n                React.cloneElement(route, { key: `${route.props.path}:${index}` })\n            )}\n        </ReactRouterRoutes>\n    );\n};\n"],"mappings":";;;;;;;;AAAA;AACA;AACA;AAOO,IAAMA,MAA6B,GAAG,SAAhCA,MAA6B,CAAGC,KAAK,EAAI;EAClD,IAAMC,MAAM,GAAG,2CACRD,KAAK,CAACC,MAAM,oCAEZC,gBAAO,CAACC,MAAM,CAAc,OAAO,CAAC,CAACC,GAAG,CAAC;IAAA,IAAGC,KAAK,QAALA,KAAK;IAAA,OAAOA,KAAK;EAAA,EAAC,GACnEC,IAAI,CAAC,UAACC,CAAC,EAAEC,CAAC,EAAK;IACb,IAAMC,KAAK,GAAGF,CAAC,CAACP,KAAK,CAACU,IAAI,IAAI,GAAG;IACjC,IAAMC,KAAK,GAAGH,CAAC,CAACR,KAAK,CAACU,IAAI,IAAI,GAAG;;IAEjC;IACA,IAAID,KAAK,KAAK,GAAG,IAAIE,KAAK,KAAK,GAAG,EAAE;MAChC,OAAO,CAAC,CAAC;IACb;;IAEA;IACA,IAAIF,KAAK,KAAK,GAAG,IAAIA,KAAK,KAAK,GAAG,EAAE;MAChC,OAAO,CAAC;IACZ;;IAEA;IACA,IAAI,CAAC,GAAG,EAAE,GAAG,CAAC,CAACG,QAAQ,CAACD,KAAK,CAAC,EAAE;MAC5B,OAAO,CAAC,CAAC;IACb;IAEA,OAAO,CAAC;EACZ,CAAC,CAAC;EAEF,oBACI,6BAAC,mBAAiB,QACbV,MAAM,CAACG,GAAG,CAAC,UAACC,KAAK,EAAEQ,KAAK;IAAA,oBACrBC,cAAK,CAACC,YAAY,CAACV,KAAK,EAAE;MAAEW,GAAG,YAAKX,KAAK,CAACL,KAAK,CAACU,IAAI,cAAIG,KAAK;IAAG,CAAC,CAAC;EAAA,EACrE,CACe;AAE5B,CAAC;AAAC"}

package/components/SearchUI.d.ts

@@ -2,6 +2,7 @@ import React from "react";
 export interface SearchProps {
     value: string;
     onChange: (value: string) => void;
+    onEnter?: () => any;
     inputPlaceholder?: string;
 }
 declare const Search: React.FC<SearchProps>;

package/components/SearchUI.js

@@ -1,20 +1,15 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
+var _react = _interopRequireWildcard(require("react"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _InputField = _interopRequireDefault(require("./SimpleUI/InputField"));
-
-var _search24px = require("../assets/icons/search-24px.svg");
-
+var _search = require("@material-design-icons/svg/outlined/search.svg");
 var SearchWrapper = /*#__PURE__*/(0, _styled.default)("div", {
   target: "epa3kz70",
   label: "SearchWrapper"
@@ -50,17 +45,23 @@ var SearchWrapper = /*#__PURE__*/(0, _styled.default)("div", {
     }
   }
 });
-
 var Search = function Search(_ref) {
   var value = _ref.value,
-      onChange = _ref.onChange,
-      _ref$inputPlaceholder = _ref.inputPlaceholder,
-      inputPlaceholder = _ref$inputPlaceholder === void 0 ? "Search..." : _ref$inputPlaceholder;
+    onChange = _ref.onChange,
+    onEnter = _ref.onEnter,
+    _ref$inputPlaceholder = _ref.inputPlaceholder,
+    inputPlaceholder = _ref$inputPlaceholder === void 0 ? "Search..." : _ref$inputPlaceholder;
+  var inputOnKeyDown = (0, _react.useCallback)(function (e) {
+    if (typeof onEnter === "function" && e.key === "Enter") {
+      onEnter();
+    }
+  }, [onEnter]);
   return /*#__PURE__*/_react.default.createElement(SearchWrapper, {
     "data-testid": "default-data-list.search"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "search__icon"
-  }, /*#__PURE__*/_react.default.createElement(_search24px.ReactComponent, null)), /*#__PURE__*/_react.default.createElement(_InputField.default, {
+  }, /*#__PURE__*/_react.default.createElement(_search.ReactComponent, null)), /*#__PURE__*/_react.default.createElement(_InputField.default, {
+    onKeyDown: inputOnKeyDown,
     className: "search__input",
     placeholder: inputPlaceholder,
     value: value,
@@ -68,6 +69,5 @@ var Search = function Search(_ref) {
     autoComplete: "off"
   }));
 };
-
 var _default = Search;
 exports.default = _default;

package/components/SearchUI.js.map

@@ -1 +1 @@
-{"version":3,"names":["SearchWrapper","styled","width","height","display","position","top","left","bottom","pointerEvents","alignItems","paddingLeft","color","padding","outline","border","textTransform","letterSpacing","Search","value","onChange","inputPlaceholder"],"sources":["SearchUI.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport InputField from \"./SimpleUI/InputField\";\nimport { ReactComponent as SearchIcon } from \"../assets/icons/search-24px.svg\";\n\nconst SearchWrapper = styled(\"div\")({\n    width: \"100%\",\n    height: \"100%\",\n    display: \"flex\",\n    position: \"relative\",\n\n    \"& .search__icon\": {\n        position: \"absolute\",\n        top: 0,\n        left: 0,\n        bottom: 0,\n        pointerEvents: \"none\",\n        display: \"flex\",\n        alignItems: \"center\",\n        paddingLeft: \"0.25rem\",\n        color: \"var(--mdc-theme-text-secondary-on-background)\"\n    },\n\n    \"& .search__input\": {\n        width: \"100%\",\n        padding: \"0.5rem 0.5rem 0.5rem 2.25rem\",\n        outline: \"none\",\n        border: \"none\",\n        color: \"var(--mdc-theme-text-primary-on-background)\",\n        \"&:focus\": {\n            outline: \"none\"\n        },\n        \"&::placeholder\": {\n            textTransform: \"uppercase\",\n            letterSpacing: \"0.05em\",\n            color: \"var(--mdc-theme-text-secondary-on-background)\"\n        }\n    }\n});\n\nexport interface SearchProps {\n    value: string;\n    onChange: (value: string) => void;\n    inputPlaceholder?: string;\n}\nconst Search: React.FC<SearchProps> = ({ value, onChange, inputPlaceholder = \"Search...\" }) => {\n    return (\n        <SearchWrapper data-testid={\"default-data-list.search\"}>\n            <div className=\"search__icon\">\n                <SearchIcon />\n            </div>\n            <InputField\n                className=\"search__input\"\n                placeholder={inputPlaceholder}\n                value={value}\n                onChange={onChange}\n                autoComplete=\"off\"\n            />\n        </SearchWrapper>\n    );\n};\n\nexport default Search;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA,IAAMA,aAAa,oBAAGC,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,GAAiB;EAChCC,KAAK,EAAE,MADyB;EAEhCC,MAAM,EAAE,MAFwB;EAGhCC,OAAO,EAAE,MAHuB;EAIhCC,QAAQ,EAAE,UAJsB;EAMhC,mBAAmB;IACfA,QAAQ,EAAE,UADK;IAEfC,GAAG,EAAE,CAFU;IAGfC,IAAI,EAAE,CAHS;IAIfC,MAAM,EAAE,CAJO;IAKfC,aAAa,EAAE,MALA;IAMfL,OAAO,EAAE,MANM;IAOfM,UAAU,EAAE,QAPG;IAQfC,WAAW,EAAE,SARE;IASfC,KAAK,EAAE;EATQ,CANa;EAkBhC,oBAAoB;IAChBV,KAAK,EAAE,MADS;IAEhBW,OAAO,EAAE,8BAFO;IAGhBC,OAAO,EAAE,MAHO;IAIhBC,MAAM,EAAE,MAJQ;IAKhBH,KAAK,EAAE,6CALS;IAMhB,WAAW;MACPE,OAAO,EAAE;IADF,CANK;IAShB,kBAAkB;MACdE,aAAa,EAAE,WADD;MAEdC,aAAa,EAAE,QAFD;MAGdL,KAAK,EAAE;IAHO;EATF;AAlBY,CAAjB,CAAnB;;AAwCA,IAAMM,MAA6B,GAAG,SAAhCA,MAAgC,OAAyD;EAAA,IAAtDC,KAAsD,QAAtDA,KAAsD;EAAA,IAA/CC,QAA+C,QAA/CA,QAA+C;EAAA,iCAArCC,gBAAqC;EAAA,IAArCA,gBAAqC,sCAAlB,WAAkB;EAC3F,oBACI,6BAAC,aAAD;IAAe,eAAa;EAA5B,gBACI;IAAK,SAAS,EAAC;EAAf,gBACI,6BAAC,0BAAD,OADJ,CADJ,eAII,6BAAC,mBAAD;IACI,SAAS,EAAC,eADd;IAEI,WAAW,EAAEA,gBAFjB;IAGI,KAAK,EAAEF,KAHX;IAII,QAAQ,EAAEC,QAJd;IAKI,YAAY,EAAC;EALjB,EAJJ,CADJ;AAcH,CAfD;;eAiBeF,M"}
+{"version":3,"names":["SearchWrapper","styled","width","height","display","position","top","left","bottom","pointerEvents","alignItems","paddingLeft","color","padding","outline","border","textTransform","letterSpacing","Search","value","onChange","onEnter","inputPlaceholder","inputOnKeyDown","useCallback","e","key"],"sources":["SearchUI.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport styled from \"@emotion/styled\";\nimport InputField from \"./SimpleUI/InputField\";\nimport { ReactComponent as SearchIcon } from \"@material-design-icons/svg/outlined/search.svg\";\n\nconst SearchWrapper = styled(\"div\")({\n    width: \"100%\",\n    height: \"100%\",\n    display: \"flex\",\n    position: \"relative\",\n\n    \"& .search__icon\": {\n        position: \"absolute\",\n        top: 0,\n        left: 0,\n        bottom: 0,\n        pointerEvents: \"none\",\n        display: \"flex\",\n        alignItems: \"center\",\n        paddingLeft: \"0.25rem\",\n        color: \"var(--mdc-theme-text-secondary-on-background)\"\n    },\n\n    \"& .search__input\": {\n        width: \"100%\",\n        padding: \"0.5rem 0.5rem 0.5rem 2.25rem\",\n        outline: \"none\",\n        border: \"none\",\n        color: \"var(--mdc-theme-text-primary-on-background)\",\n        \"&:focus\": {\n            outline: \"none\"\n        },\n        \"&::placeholder\": {\n            textTransform: \"uppercase\",\n            letterSpacing: \"0.05em\",\n            color: \"var(--mdc-theme-text-secondary-on-background)\"\n        }\n    }\n});\n\nexport interface SearchProps {\n    value: string;\n    onChange: (value: string) => void;\n    onEnter?: () => any;\n    inputPlaceholder?: string;\n}\nconst Search: React.FC<SearchProps> = ({\n    value,\n    onChange,\n    onEnter,\n    inputPlaceholder = \"Search...\"\n}) => {\n    const inputOnKeyDown = useCallback(\n        e => {\n            if (typeof onEnter === \"function\" && e.key === \"Enter\") {\n                onEnter();\n            }\n        },\n        [onEnter]\n    );\n\n    return (\n        <SearchWrapper data-testid={\"default-data-list.search\"}>\n            <div className=\"search__icon\">\n                <SearchIcon />\n            </div>\n            <InputField\n                onKeyDown={inputOnKeyDown}\n                className=\"search__input\"\n                placeholder={inputPlaceholder}\n                value={value}\n                onChange={onChange}\n                autoComplete=\"off\"\n            />\n        </SearchWrapper>\n    );\n};\n\nexport default Search;\n"],"mappings":";;;;;;;;AAAA;AACA;AACA;AACA;AAEA,IAAMA,aAAa,oBAAGC,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,GAAE;EAChCC,KAAK,EAAE,MAAM;EACbC,MAAM,EAAE,MAAM;EACdC,OAAO,EAAE,MAAM;EACfC,QAAQ,EAAE,UAAU;EAEpB,iBAAiB,EAAE;IACfA,QAAQ,EAAE,UAAU;IACpBC,GAAG,EAAE,CAAC;IACNC,IAAI,EAAE,CAAC;IACPC,MAAM,EAAE,CAAC;IACTC,aAAa,EAAE,MAAM;IACrBL,OAAO,EAAE,MAAM;IACfM,UAAU,EAAE,QAAQ;IACpBC,WAAW,EAAE,SAAS;IACtBC,KAAK,EAAE;EACX,CAAC;EAED,kBAAkB,EAAE;IAChBV,KAAK,EAAE,MAAM;IACbW,OAAO,EAAE,8BAA8B;IACvCC,OAAO,EAAE,MAAM;IACfC,MAAM,EAAE,MAAM;IACdH,KAAK,EAAE,6CAA6C;IACpD,SAAS,EAAE;MACPE,OAAO,EAAE;IACb,CAAC;IACD,gBAAgB,EAAE;MACdE,aAAa,EAAE,WAAW;MAC1BC,aAAa,EAAE,QAAQ;MACvBL,KAAK,EAAE;IACX;EACJ;AACJ,CAAC,CAAC;AAQF,IAAMM,MAA6B,GAAG,SAAhCA,MAA6B,OAK7B;EAAA,IAJFC,KAAK,QAALA,KAAK;IACLC,QAAQ,QAARA,QAAQ;IACRC,OAAO,QAAPA,OAAO;IAAA,6BACPC,gBAAgB;IAAhBA,gBAAgB,sCAAG,WAAW;EAE9B,IAAMC,cAAc,GAAG,IAAAC,kBAAW,EAC9B,UAAAC,CAAC,EAAI;IACD,IAAI,OAAOJ,OAAO,KAAK,UAAU,IAAII,CAAC,CAACC,GAAG,KAAK,OAAO,EAAE;MACpDL,OAAO,EAAE;IACb;EACJ,CAAC,EACD,CAACA,OAAO,CAAC,CACZ;EAED,oBACI,6BAAC,aAAa;IAAC,eAAa;EAA2B,gBACnD;IAAK,SAAS,EAAC;EAAc,gBACzB,6BAAC,sBAAU,OAAG,CACZ,eACN,6BAAC,mBAAU;IACP,SAAS,EAAEE,cAAe;IAC1B,SAAS,EAAC,eAAe;IACzB,WAAW,EAAED,gBAAiB;IAC9B,KAAK,EAAEH,KAAM;IACb,QAAQ,EAAEC,QAAS;IACnB,YAAY,EAAC;EAAK,EACpB,CACU;AAExB,CAAC;AAAC,eAEaF,MAAM;AAAA"}

package/components/SimpleForm/SimpleForm.js

@@ -1,30 +1,19 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SimpleFormHeader = exports.SimpleFormFooter = exports.SimpleFormContent = exports.SimpleForm = void 0;
-
 var React = _interopRequireWildcard(require("react"));
-
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _emotion = require("emotion");
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _Grid = require("@webiny/ui/Grid");
-
 var _Typography = require("@webiny/ui/Typography");
-
 var _Elevation = require("@webiny/ui/Elevation");
-
 var _Icon = require("@webiny/ui/Icon");
-
 var SimpleFormContainer = /*#__PURE__*/(0, _styled.default)("div", {
   target: "ep5jo8l0",
   label: "SimpleFormContainer"
@@ -49,16 +38,7 @@ var icon = /*#__PURE__*/(0, _emotion.css)({
   marginRight: 15,
   color: "var(--mdc-theme-text-primary-on-background)"
 }, "label:icon;");
-var footer = /*#__PURE__*/(0, _emotion.css)({
-  borderTop: "1px solid var(--mdc-theme-on-background)",
-  color: "var(--mdc-theme-text-primary-on-background)",
-  textAlign: "right",
-  "&.mdc-layout-grid": {
-    padding: 25 // "25px 50px"
-
-  }
-}, "label:footer;");
-
+var footer = /*#__PURE__*/(0, _emotion.css)("display:flex;justify-content:flex-end;flex-wrap:wrap;border-top:1px solid var(--mdc-theme-on-background);padding:24px;box-sizing:border-box;min-height:52px;button:last-of-type{margin-left:8px;}label:footer;");
 var SimpleForm = function SimpleForm(props) {
   return /*#__PURE__*/React.createElement(SimpleFormContainer, {
     className: (0, _classnames.default)("webiny-data-list", props.className),
@@ -67,9 +47,7 @@ var SimpleForm = function SimpleForm(props) {
     z: 1
   }, props.children));
 };
-
 exports.SimpleForm = SimpleForm;
-
 var SimpleFormHeader = function SimpleFormHeader(props) {
   return /*#__PURE__*/React.createElement(_Grid.Grid, {
     className: header
@@ -86,21 +64,14 @@ var SimpleFormHeader = function SimpleFormHeader(props) {
     className: actions
   }, props.children));
 };
-
 exports.SimpleFormHeader = SimpleFormHeader;
-
 var SimpleFormFooter = function SimpleFormFooter(props) {
-  return /*#__PURE__*/React.createElement(_Grid.Grid, {
+  return /*#__PURE__*/React.createElement("div", {
     className: (0, _classnames.default)(footer, props.className)
-  }, /*#__PURE__*/React.createElement(_Grid.Cell, {
-    span: 12
-  }, props.children));
+  }, props.children);
 };
-
 exports.SimpleFormFooter = SimpleFormFooter;
-
 var SimpleFormContent = function SimpleFormContent(props) {
   return props.children;
 };
-
 exports.SimpleFormContent = SimpleFormContent;

package/components/SimpleForm/SimpleForm.js.map

@@ -1 +1 @@
-{"version":3,"names":["SimpleFormContainer","styled","position","margin","header","css","borderBottom","color","title","display","alignItems","actions","justifyContent","icon","marginRight","footer","borderTop","textAlign","padding","SimpleForm","props","classNames","className","noElevation","children","SimpleFormHeader","SimpleFormFooter","SimpleFormContent"],"sources":["SimpleForm.tsx"],"sourcesContent":["import * as React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { css } from \"emotion\";\nimport classNames from \"classnames\";\nimport { Cell, Grid } from \"@webiny/ui/Grid\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { Elevation } from \"@webiny/ui/Elevation\";\nimport { Icon } from \"@webiny/ui/Icon\";\n\nconst SimpleFormContainer = styled(\"div\")({\n    position: \"relative\",\n    margin: \"17px 50px\"\n});\n\nconst header = css({\n    borderBottom: \"1px solid var(--mdc-theme-on-background)\",\n    color: \"var(--mdc-theme-text-primary-on-background)\"\n});\n\nconst title = css({\n    display: \"flex\",\n    alignItems: \"center\"\n});\n\nconst actions = css({\n    display: \"flex\",\n    justifyContent: \"flex-end\",\n    alignItems: \"center\"\n});\n\nconst icon = css({\n    marginRight: 15,\n    color: \"var(--mdc-theme-text-primary-on-background)\"\n});\n\nconst footer = css({\n    borderTop: \"1px solid var(--mdc-theme-on-background)\",\n    color: \"var(--mdc-theme-text-primary-on-background)\",\n    textAlign: \"right\",\n    \"&.mdc-layout-grid\": {\n        padding: 25 // \"25px 50px\"\n    }\n});\n\ninterface SimpleFormProps {\n    children: React.ReactNode;\n    \"data-testid\"?: string;\n    noElevation?: boolean;\n    className?: string;\n}\nexport const SimpleForm: React.FC<SimpleFormProps> = props => {\n    return (\n        <SimpleFormContainer\n            className={classNames(\"webiny-data-list\", props.className)}\n            data-testid={props[\"data-testid\"]}\n        >\n            {props.noElevation ? props.children : <Elevation z={1}>{props.children}</Elevation>}\n        </SimpleFormContainer>\n    );\n};\n\ninterface SimpleFormHeaderProps {\n    title: React.ReactNode;\n    icon?: React.ReactElement<any>;\n    children?: React.ReactNode;\n}\nexport const SimpleFormHeader: React.FC<SimpleFormHeaderProps> = props => {\n    return (\n        <Grid className={header}>\n            <Cell span={props.children ? 6 : 12} className={title}>\n                <React.Fragment>\n                    {props.icon && <Icon className={icon} icon={props.icon} />}\n                    <Typography use=\"headline5\">{props.title}</Typography>\n                </React.Fragment>\n            </Cell>\n            {props.children && (\n                <Cell span={6} className={actions}>\n                    {props.children}\n                </Cell>\n            )}\n        </Grid>\n    );\n};\n\ninterface SimpleFormFooterProps {\n    children: React.ReactNode;\n    className?: string;\n}\nexport const SimpleFormFooter: React.FC<SimpleFormFooterProps> = props => {\n    return (\n        <Grid className={classNames(footer, props.className)}>\n            <Cell span={12}>{props.children}</Cell>\n        </Grid>\n    );\n};\n\nexport const SimpleFormContent: React.FC = props => {\n    return props.children as unknown as React.ReactElement;\n};\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA,IAAMA,mBAAmB,oBAAGC,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,GAAiB;EACtCC,QAAQ,EAAE,UAD4B;EAEtCC,MAAM,EAAE;AAF8B,CAAjB,CAAzB;AAKA,IAAMC,MAAM,gBAAG,IAAAC,YAAA,EAAI;EACfC,YAAY,EAAE,0CADC;EAEfC,KAAK,EAAE;AAFQ,CAAJ,kBAAf;AAKA,IAAMC,KAAK,gBAAG,IAAAH,YAAA,EAAI;EACdI,OAAO,EAAE,MADK;EAEdC,UAAU,EAAE;AAFE,CAAJ,iBAAd;AAKA,IAAMC,OAAO,gBAAG,IAAAN,YAAA,EAAI;EAChBI,OAAO,EAAE,MADO;EAEhBG,cAAc,EAAE,UAFA;EAGhBF,UAAU,EAAE;AAHI,CAAJ,mBAAhB;AAMA,IAAMG,IAAI,gBAAG,IAAAR,YAAA,EAAI;EACbS,WAAW,EAAE,EADA;EAEbP,KAAK,EAAE;AAFM,CAAJ,gBAAb;AAKA,IAAMQ,MAAM,gBAAG,IAAAV,YAAA,EAAI;EACfW,SAAS,EAAE,0CADI;EAEfT,KAAK,EAAE,6CAFQ;EAGfU,SAAS,EAAE,OAHI;EAIf,qBAAqB;IACjBC,OAAO,EAAE,EADQ,CACL;;EADK;AAJN,CAAJ,kBAAf;;AAeO,IAAMC,UAAqC,GAAG,SAAxCA,UAAwC,CAAAC,KAAK,EAAI;EAC1D,oBACI,oBAAC,mBAAD;IACI,SAAS,EAAE,IAAAC,mBAAA,EAAW,kBAAX,EAA+BD,KAAK,CAACE,SAArC,CADf;IAEI,eAAaF,KAAK,CAAC,aAAD;EAFtB,GAIKA,KAAK,CAACG,WAAN,GAAoBH,KAAK,CAACI,QAA1B,gBAAqC,oBAAC,oBAAD;IAAW,CAAC,EAAE;EAAd,GAAkBJ,KAAK,CAACI,QAAxB,CAJ1C,CADJ;AAQH,CATM;;;;AAgBA,IAAMC,gBAAiD,GAAG,SAApDA,gBAAoD,CAAAL,KAAK,EAAI;EACtE,oBACI,oBAAC,UAAD;IAAM,SAAS,EAAEhB;EAAjB,gBACI,oBAAC,UAAD;IAAM,IAAI,EAAEgB,KAAK,CAACI,QAAN,GAAiB,CAAjB,GAAqB,EAAjC;IAAqC,SAAS,EAAEhB;EAAhD,gBACI,oBAAC,KAAD,CAAO,QAAP,QACKY,KAAK,CAACP,IAAN,iBAAc,oBAAC,UAAD;IAAM,SAAS,EAAEA,IAAjB;IAAuB,IAAI,EAAEO,KAAK,CAACP;EAAnC,EADnB,eAEI,oBAAC,sBAAD;IAAY,GAAG,EAAC;EAAhB,GAA6BO,KAAK,CAACZ,KAAnC,CAFJ,CADJ,CADJ,EAOKY,KAAK,CAACI,QAAN,iBACG,oBAAC,UAAD;IAAM,IAAI,EAAE,CAAZ;IAAe,SAAS,EAAEb;EAA1B,GACKS,KAAK,CAACI,QADX,CARR,CADJ;AAeH,CAhBM;;;;AAsBA,IAAME,gBAAiD,GAAG,SAApDA,gBAAoD,CAAAN,KAAK,EAAI;EACtE,oBACI,oBAAC,UAAD;IAAM,SAAS,EAAE,IAAAC,mBAAA,EAAWN,MAAX,EAAmBK,KAAK,CAACE,SAAzB;EAAjB,gBACI,oBAAC,UAAD;IAAM,IAAI,EAAE;EAAZ,GAAiBF,KAAK,CAACI,QAAvB,CADJ,CADJ;AAKH,CANM;;;;AAQA,IAAMG,iBAA2B,GAAG,SAA9BA,iBAA8B,CAAAP,KAAK,EAAI;EAChD,OAAOA,KAAK,CAACI,QAAb;AACH,CAFM"}
+{"version":3,"names":["SimpleFormContainer","styled","position","margin","header","css","borderBottom","color","title","display","alignItems","actions","justifyContent","icon","marginRight","footer","SimpleForm","props","classNames","className","noElevation","children","SimpleFormHeader","SimpleFormFooter","SimpleFormContent"],"sources":["SimpleForm.tsx"],"sourcesContent":["import * as React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { css } from \"emotion\";\nimport classNames from \"classnames\";\nimport { Cell, Grid } from \"@webiny/ui/Grid\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { Elevation } from \"@webiny/ui/Elevation\";\nimport { Icon } from \"@webiny/ui/Icon\";\n\nconst SimpleFormContainer = styled(\"div\")({\n    position: \"relative\",\n    margin: \"17px 50px\"\n});\n\nconst header = css({\n    borderBottom: \"1px solid var(--mdc-theme-on-background)\",\n    color: \"var(--mdc-theme-text-primary-on-background)\"\n});\n\nconst title = css({\n    display: \"flex\",\n    alignItems: \"center\"\n});\n\nconst actions = css({\n    display: \"flex\",\n    justifyContent: \"flex-end\",\n    alignItems: \"center\"\n});\n\nconst icon = css({\n    marginRight: 15,\n    color: \"var(--mdc-theme-text-primary-on-background)\"\n});\n\nconst footer = css`\n    display: flex;\n    justify-content: flex-end;\n    flex-wrap: wrap;\n    border-top: 1px solid var(--mdc-theme-on-background);\n    padding: 24px;\n    box-sizing: border-box;\n    min-height: 52px;\n    button:last-of-type {\n        margin-left: 8px;\n    }\n`;\n\ninterface SimpleFormProps {\n    children: React.ReactNode;\n    \"data-testid\"?: string;\n    noElevation?: boolean;\n    className?: string;\n}\nexport const SimpleForm: React.FC<SimpleFormProps> = props => {\n    return (\n        <SimpleFormContainer\n            className={classNames(\"webiny-data-list\", props.className)}\n            data-testid={props[\"data-testid\"]}\n        >\n            {props.noElevation ? props.children : <Elevation z={1}>{props.children}</Elevation>}\n        </SimpleFormContainer>\n    );\n};\n\ninterface SimpleFormHeaderProps {\n    title: React.ReactNode;\n    icon?: React.ReactElement<any>;\n    children?: React.ReactNode;\n}\nexport const SimpleFormHeader: React.FC<SimpleFormHeaderProps> = props => {\n    return (\n        <Grid className={header}>\n            <Cell span={props.children ? 6 : 12} className={title}>\n                <React.Fragment>\n                    {props.icon && <Icon className={icon} icon={props.icon} />}\n                    <Typography use=\"headline5\">{props.title}</Typography>\n                </React.Fragment>\n            </Cell>\n            {props.children && (\n                <Cell span={6} className={actions}>\n                    {props.children}\n                </Cell>\n            )}\n        </Grid>\n    );\n};\n\ninterface SimpleFormFooterProps {\n    children: React.ReactNode;\n    className?: string;\n}\nexport const SimpleFormFooter: React.FC<SimpleFormFooterProps> = props => {\n    return <div className={classNames(footer, props.className)}>{props.children}</div>;\n};\n\nexport const SimpleFormContent: React.FC = props => {\n    return props.children as unknown as React.ReactElement;\n};\n"],"mappings":";;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,IAAMA,mBAAmB,oBAAGC,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,GAAE;EACtCC,QAAQ,EAAE,UAAU;EACpBC,MAAM,EAAE;AACZ,CAAC,CAAC;AAEF,IAAMC,MAAM,gBAAG,IAAAC,YAAG,EAAC;EACfC,YAAY,EAAE,0CAA0C;EACxDC,KAAK,EAAE;AACX,CAAC,kBAAC;AAEF,IAAMC,KAAK,gBAAG,IAAAH,YAAG,EAAC;EACdI,OAAO,EAAE,MAAM;EACfC,UAAU,EAAE;AAChB,CAAC,iBAAC;AAEF,IAAMC,OAAO,gBAAG,IAAAN,YAAG,EAAC;EAChBI,OAAO,EAAE,MAAM;EACfG,cAAc,EAAE,UAAU;EAC1BF,UAAU,EAAE;AAChB,CAAC,mBAAC;AAEF,IAAMG,IAAI,gBAAG,IAAAR,YAAG,EAAC;EACbS,WAAW,EAAE,EAAE;EACfP,KAAK,EAAE;AACX,CAAC,gBAAC;AAEF,IAAMQ,MAAM,oBAAGV,YAAG,mNAWjB;AAQM,IAAMW,UAAqC,GAAG,SAAxCA,UAAqC,CAAGC,KAAK,EAAI;EAC1D,oBACI,oBAAC,mBAAmB;IAChB,SAAS,EAAE,IAAAC,mBAAU,EAAC,kBAAkB,EAAED,KAAK,CAACE,SAAS,CAAE;IAC3D,eAAaF,KAAK,CAAC,aAAa;EAAE,GAEjCA,KAAK,CAACG,WAAW,GAAGH,KAAK,CAACI,QAAQ,gBAAG,oBAAC,oBAAS;IAAC,CAAC,EAAE;EAAE,GAAEJ,KAAK,CAACI,QAAQ,CAAa,CACjE;AAE9B,CAAC;AAAC;AAOK,IAAMC,gBAAiD,GAAG,SAApDA,gBAAiD,CAAGL,KAAK,EAAI;EACtE,oBACI,oBAAC,UAAI;IAAC,SAAS,EAAEb;EAAO,gBACpB,oBAAC,UAAI;IAAC,IAAI,EAAEa,KAAK,CAACI,QAAQ,GAAG,CAAC,GAAG,EAAG;IAAC,SAAS,EAAEb;EAAM,gBAClD,oBAAC,KAAK,CAAC,QAAQ,QACVS,KAAK,CAACJ,IAAI,iBAAI,oBAAC,UAAI;IAAC,SAAS,EAAEA,IAAK;IAAC,IAAI,EAAEI,KAAK,CAACJ;EAAK,EAAG,eAC1D,oBAAC,sBAAU;IAAC,GAAG,EAAC;EAAW,GAAEI,KAAK,CAACT,KAAK,CAAc,CACzC,CACd,EACNS,KAAK,CAACI,QAAQ,iBACX,oBAAC,UAAI;IAAC,IAAI,EAAE,CAAE;IAAC,SAAS,EAAEV;EAAQ,GAC7BM,KAAK,CAACI,QAAQ,CAEtB,CACE;AAEf,CAAC;AAAC;AAMK,IAAME,gBAAiD,GAAG,SAApDA,gBAAiD,CAAGN,KAAK,EAAI;EACtE,oBAAO;IAAK,SAAS,EAAE,IAAAC,mBAAU,EAACH,MAAM,EAAEE,KAAK,CAACE,SAAS;EAAE,GAAEF,KAAK,CAACI,QAAQ,CAAO;AACtF,CAAC;AAAC;AAEK,IAAMG,iBAA2B,GAAG,SAA9BA,iBAA2B,CAAGP,KAAK,EAAI;EAChD,OAAOA,KAAK,CAACI,QAAQ;AACzB,CAAC;AAAC"}

package/components/SimpleForm/index.js

@@ -27,5 +27,4 @@ Object.defineProperty(exports, "SimpleFormHeader", {
     return _SimpleForm.SimpleFormHeader;
   }
 });
-
 var _SimpleForm = require("./SimpleForm");

package/components/SimpleForm/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { SimpleForm, SimpleFormHeader, SimpleFormFooter, SimpleFormContent } from \"./SimpleForm\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA"}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { SimpleForm, SimpleFormHeader, SimpleFormFooter, SimpleFormContent } from \"./SimpleForm\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA"}