@webiny/app-admin 0.0.0-ee-vpcs.549378cf03

package/plugins/globalSearch/SearchBarDropdown.js

@@ -0,0 +1,101 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+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 _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _List = require("@webiny/ui/List");
+
+var _styled = require("./styled");
+
+var _Elevation = require("@webiny/ui/Elevation");
+
+var _Icon = require("@webiny/ui/Icon");
+
+var _roundSearch24px = require("./icons/round-search-24px.svg");
+
+var SearchBarDropdown = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(SearchBarDropdown, _React$Component);
+
+  var _super = (0, _createSuper2.default)(SearchBarDropdown);
+
+  function SearchBarDropdown() {
+    (0, _classCallCheck2.default)(this, SearchBarDropdown);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2.default)(SearchBarDropdown, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this$props$context = this.props.context,
+          downshift = _this$props$context.downshift.current,
+          plugins = _this$props$context.state.plugins;
+      downshift.selectItem(plugins.current);
+      downshift.setHighlightedIndex(plugins.list.indexOf(plugins.current));
+      downshift.openMenu();
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props$context2 = this.props.context,
+          downshift = _this$props$context2.downshift.current,
+          submitSearchTerm = _this$props$context2.submitSearchTerm,
+          _this$props$context2$ = _this$props$context2.state,
+          plugins = _this$props$context2$.plugins,
+          searchTerm = _this$props$context2$.searchTerm;
+      var getMenuProps = downshift.getMenuProps,
+          getItemProps = downshift.getItemProps,
+          _downshift$state = downshift.state,
+          selectedItem = _downshift$state.selectedItem,
+          highlightedIndex = _downshift$state.highlightedIndex;
+      return /*#__PURE__*/React.createElement(_Elevation.Elevation, {
+        z: 2,
+        className: _styled.searchBarDropdown
+      }, /*#__PURE__*/React.createElement(_List.List, getMenuProps(), plugins.list.map(function (item, index) {
+        // Base classes.
+        var itemClassNames = {
+          highlighted: highlightedIndex === index,
+          selected: false
+        }; // Add "selected" class if the item is selected.
+
+        if (selectedItem && selectedItem === item) {
+          itemClassNames.selected = true;
+        }
+
+        return /*#__PURE__*/React.createElement(_List.ListItem, Object.assign({
+          key: item.route
+        }, getItemProps({
+          index: index,
+          item: item,
+          className: (0, _classnames.default)(itemClassNames),
+          onClick: function onClick() {
+            return submitSearchTerm(item);
+          }
+        })), /*#__PURE__*/React.createElement(_List.ListItemGraphic, null, /*#__PURE__*/React.createElement(_Icon.Icon, {
+          className: _styled.iconSearchType,
+          icon: /*#__PURE__*/React.createElement(_roundSearch24px.ReactComponent, null)
+        })), /*#__PURE__*/React.createElement(_List.ListItemText, null, searchTerm.current || "Search for all..."), /*#__PURE__*/React.createElement(_List.ListItemMeta, null, "in ", item.label));
+      })));
+    }
+  }]);
+  return SearchBarDropdown;
+}(React.Component);
+
+exports.default = SearchBarDropdown;

package/plugins/globalSearch/SearchBarDropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["SearchBarDropdown","props","context","downshift","current","plugins","state","selectItem","setHighlightedIndex","list","indexOf","openMenu","submitSearchTerm","searchTerm","getMenuProps","getItemProps","selectedItem","highlightedIndex","searchBarDropdown","map","item","index","itemClassNames","highlighted","selected","route","className","classnames","onClick","iconSearchType","label","React","Component"],"sources":["SearchBarDropdown.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { AdminGlobalSearchPlugin } from \"~/types\";\nimport classnames from \"classnames\";\nimport { List, ListItem, ListItemGraphic, ListItemText, ListItemMeta } from \"@webiny/ui/List\";\nimport { searchBarDropdown, iconSearchType } from \"./styled\";\nimport { Elevation } from \"@webiny/ui/Elevation\";\nimport { Icon } from \"@webiny/ui/Icon\";\nimport { Actions as DownshiftActions, DownshiftState, PropGetters } from \"downshift\";\nimport { ReactComponent as SearchIcon } from \"./icons/round-search-24px.svg\";\nimport { SearchBarState } from \"~/plugins/globalSearch/SearchBar\";\n\ninterface SearchBarDropdownPropsContextDownshiftCurrent\n    extends DownshiftActions<any>,\n        PropGetters<any> {\n    state: DownshiftState<any>;\n}\ninterface SearchBarDropdownPropsContextDownshift {\n    current: SearchBarDropdownPropsContextDownshiftCurrent;\n}\ninterface SearchBarDropdownPropsContext {\n    downshift: SearchBarDropdownPropsContextDownshift;\n    submitSearchTerm: (item: AdminGlobalSearchPlugin) => void;\n    state: SearchBarState;\n}\ninterface SearchBarDropdownProps {\n    context: SearchBarDropdownPropsContext;\n}\nexport default class SearchBarDropdown extends React.Component<SearchBarDropdownProps> {\n    public override componentDidMount() {\n        const {\n            context: {\n                downshift: { current: downshift },\n                state: { plugins }\n            }\n        } = this.props;\n\n        downshift.selectItem(plugins.current);\n        downshift.setHighlightedIndex(\n            plugins.list.indexOf(plugins.current as AdminGlobalSearchPlugin)\n        );\n        downshift.openMenu();\n    }\n\n    public override render() {\n        const {\n            context: {\n                downshift: { current: downshift },\n                submitSearchTerm,\n                state: { plugins, searchTerm }\n            }\n        } = this.props;\n\n        const {\n            getMenuProps,\n            getItemProps,\n            state: { selectedItem, highlightedIndex }\n        } = downshift;\n\n        return (\n            <Elevation z={2} className={searchBarDropdown}>\n                <List {...getMenuProps()}>\n                    {plugins.list.map((item: AdminGlobalSearchPlugin, index) => {\n                        // Base classes.\n                        const itemClassNames = {\n                            highlighted: highlightedIndex === index,\n                            selected: false\n                        };\n\n                        // Add \"selected\" class if the item is selected.\n                        if (selectedItem && selectedItem === item) {\n                            itemClassNames.selected = true;\n                        }\n\n                        return (\n                            <ListItem\n                                key={item.route}\n                                {...getItemProps({\n                                    index,\n                                    item,\n                                    className: classnames(itemClassNames),\n                                    onClick: () => submitSearchTerm(item)\n                                })}\n                            >\n                                <ListItemGraphic>\n                                    <Icon className={iconSearchType} icon={<SearchIcon />} />\n                                </ListItemGraphic>\n                                <ListItemText>\n                                    {searchTerm.current || \"Search for all...\"}\n                                </ListItemText>\n                                <ListItemMeta>in {item.label}</ListItemMeta>\n                            </ListItem>\n                        );\n                    })}\n                </List>\n            </Elevation>\n        );\n    }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AAEA;;IAmBqBA,iB;;;;;;;;;;;;WACjB,6BAAoC;MAChC,0BAKI,KAAKC,KALT,CACIC,OADJ;MAAA,IAE8BC,SAF9B,uBAEQA,SAFR,CAEqBC,OAFrB;MAAA,IAGiBC,OAHjB,uBAGQC,KAHR,CAGiBD,OAHjB;MAOAF,SAAS,CAACI,UAAV,CAAqBF,OAAO,CAACD,OAA7B;MACAD,SAAS,CAACK,mBAAV,CACIH,OAAO,CAACI,IAAR,CAAaC,OAAb,CAAqBL,OAAO,CAACD,OAA7B,CADJ;MAGAD,SAAS,CAACQ,QAAV;IACH;;;WAED,kBAAyB;MACrB,2BAMI,KAAKV,KANT,CACIC,OADJ;MAAA,IAE8BC,SAF9B,wBAEQA,SAFR,CAEqBC,OAFrB;MAAA,IAGQQ,gBAHR,wBAGQA,gBAHR;MAAA,iDAIQN,KAJR;MAAA,IAIiBD,OAJjB,yBAIiBA,OAJjB;MAAA,IAI0BQ,UAJ1B,yBAI0BA,UAJ1B;MAQA,IACIC,YADJ,GAIIX,SAJJ,CACIW,YADJ;MAAA,IAEIC,YAFJ,GAIIZ,SAJJ,CAEIY,YAFJ;MAAA,uBAIIZ,SAJJ,CAGIG,KAHJ;MAAA,IAGaU,YAHb,oBAGaA,YAHb;MAAA,IAG2BC,gBAH3B,oBAG2BA,gBAH3B;MAMA,oBACI,oBAAC,oBAAD;QAAW,CAAC,EAAE,CAAd;QAAiB,SAAS,EAAEC;MAA5B,gBACI,oBAAC,UAAD,EAAUJ,YAAY,EAAtB,EACKT,OAAO,CAACI,IAAR,CAAaU,GAAb,CAAiB,UAACC,IAAD,EAAgCC,KAAhC,EAA0C;QACxD;QACA,IAAMC,cAAc,GAAG;UACnBC,WAAW,EAAEN,gBAAgB,KAAKI,KADf;UAEnBG,QAAQ,EAAE;QAFS,CAAvB,CAFwD,CAOxD;;QACA,IAAIR,YAAY,IAAIA,YAAY,KAAKI,IAArC,EAA2C;UACvCE,cAAc,CAACE,QAAf,GAA0B,IAA1B;QACH;;QAED,oBACI,oBAAC,cAAD;UACI,GAAG,EAAEJ,IAAI,CAACK;QADd,GAEQV,YAAY,CAAC;UACbM,KAAK,EAALA,KADa;UAEbD,IAAI,EAAJA,IAFa;UAGbM,SAAS,EAAE,IAAAC,mBAAA,EAAWL,cAAX,CAHE;UAIbM,OAAO,EAAE;YAAA,OAAMhB,gBAAgB,CAACQ,IAAD,CAAtB;UAAA;QAJI,CAAD,CAFpB,gBASI,oBAAC,qBAAD,qBACI,oBAAC,UAAD;UAAM,SAAS,EAAES,sBAAjB;UAAiC,IAAI,eAAE,oBAAC,+BAAD;QAAvC,EADJ,CATJ,eAYI,oBAAC,kBAAD,QACKhB,UAAU,CAACT,OAAX,IAAsB,mBAD3B,CAZJ,eAeI,oBAAC,kBAAD,eAAkBgB,IAAI,CAACU,KAAvB,CAfJ,CADJ;MAmBH,CA/BA,CADL,CADJ,CADJ;IAsCH;;;EArE0CC,KAAK,CAACC,S"}

package/plugins/globalSearch/icons/round-search-24px.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
+	 height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g id="Header_x2F_BG" display="none">
+	<rect x="-358" y="-314" display="inline" fill="#F1F1F2" width="520" height="520"/>
+</g>
+<g id="Bounding_Boxes">
+	<g id="ui_x5F_spec_x5F_header_copy_3" display="none">
+	</g>
+	<path fill="none" d="M0,0h24v24H0V0z"/>
+</g>
+<g id="Rounded">
+	<g id="ui_x5F_spec_x5F_header_copy_5" display="none">
+	</g>
+	<path fill="currentColor" d="M15.5,14h-0.79l-0.28-0.27c1.2-1.4,1.82-3.31,1.48-5.34c-0.47-2.78-2.79-5-5.59-5.34c-4.23-0.52-7.79,3.04-7.27,7.27
+		c0.34,2.8,2.56,5.12,5.34,5.59c2.03,0.34,3.94-0.28,5.34-1.48L14,14.71v0.79l4.25,4.25c0.41,0.41,1.08,0.41,1.49,0l0,0
+		c0.41-0.41,0.41-1.08,0-1.49L15.5,14z M9.5,14C7.01,14,5,11.99,5,9.5S7.01,5,9.5,5S14,7.01,14,9.5S11.99,14,9.5,14z"/>
+</g>
+</svg>

package/plugins/globalSearch/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="web" />
+import React from "react";
+export declare const globalSearchHotkey: {
+    type: string;
+    name: string;
+    preventOpen(e: React.ChangeEvent<HTMLInputElement>): boolean;
+};

package/plugins/globalSearch/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.globalSearchHotkey = void 0;
+var globalSearchHotkey = {
+  type: "admin-global-search-prevent-hotkey",
+  name: "admin-global-search-prevent-hotkey-input",
+  preventOpen: function preventOpen(e) {
+    // Define a list of all node types we want to prevent the event from.
+    var ignoreNodes = ["INPUT", "TEXTAREA"];
+    return ignoreNodes.includes(e.target.nodeName);
+  }
+};
+exports.globalSearchHotkey = globalSearchHotkey;

package/plugins/globalSearch/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["globalSearchHotkey","type","name","preventOpen","e","ignoreNodes","includes","target","nodeName"],"sources":["index.tsx"],"sourcesContent":["import React from \"react\";\n\nexport const globalSearchHotkey = {\n    type: \"admin-global-search-prevent-hotkey\",\n    name: \"admin-global-search-prevent-hotkey-input\",\n    preventOpen(e: React.ChangeEvent<HTMLInputElement>): boolean {\n        // Define a list of all node types we want to prevent the event from.\n        const ignoreNodes = [\"INPUT\", \"TEXTAREA\"];\n\n        return ignoreNodes.includes(e.target.nodeName);\n    }\n};\n"],"mappings":";;;;;;AAEO,IAAMA,kBAAkB,GAAG;EAC9BC,IAAI,EAAE,oCADwB;EAE9BC,IAAI,EAAE,0CAFwB;EAG9BC,WAH8B,uBAGlBC,CAHkB,EAG+B;IACzD;IACA,IAAMC,WAAW,GAAG,CAAC,OAAD,EAAU,UAAV,CAApB;IAEA,OAAOA,WAAW,CAACC,QAAZ,CAAqBF,CAAC,CAACG,MAAF,CAASC,QAA9B,CAAP;EACH;AAR6B,CAA3B"}

package/plugins/globalSearch/styled.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+/// <reference types="web" />
+/// <reference types="react" />
+export declare const SearchShortcut: 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 SearchBarWrapper: 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 SearchBarInputWrapper: 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 searchBarInput: string;
+export declare const searchBarDropdown: string;
+export declare const icon: string;
+export declare const iconSearchType: string;
+export declare const searchWrapper: string;

package/plugins/globalSearch/styled.js

@@ -0,0 +1,135 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.searchWrapper = exports.searchBarInput = exports.searchBarDropdown = exports.iconSearchType = exports.icon = exports.SearchShortcut = exports.SearchBarWrapper = exports.SearchBarInputWrapper = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _emotion = require("emotion");
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+// TODO remove
+// @ts-nocheck
+var SearchShortcut = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "eh6vkyz0",
+  label: "SearchShortcut"
+})({
+  border: "1px solid var(--mdc-theme-surface)",
+  color: "var(--mdc-theme-surface)",
+  borderRadius: 5,
+  width: 20,
+  height: 24,
+  marginTop: 1,
+  textAlign: "center",
+  fontSize: "12px",
+  paddingTop: "3px",
+  boxSizing: "border-box",
+  cursor: "default",
+  opacity: "0.8"
+});
+exports.SearchShortcut = SearchShortcut;
+var SearchBarWrapper = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "eh6vkyz1",
+  label: "SearchBarWrapper"
+})({
+  display: "flex",
+  width: "100%"
+});
+exports.SearchBarWrapper = SearchBarWrapper;
+var SearchBarInputWrapper = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "eh6vkyz2",
+  label: "SearchBarInputWrapper"
+})({
+  display: "flex",
+  width: "100%",
+  position: "relative"
+});
+exports.SearchBarInputWrapper = SearchBarInputWrapper;
+var searchBarInput = /*#__PURE__*/(0, _emotion.css)({
+  width: "100%",
+  lineHeight: 1,
+  border: "none",
+  outline: "none",
+  backgroundColor: "transparent",
+  "&.mdc-text-field__input": {
+    paddingTop: "5px !important",
+    paddingLeft: "10px !important",
+    borderBottom: "none !important",
+    height: "25px !important",
+    color: "var(--mdc-theme-surface)",
+    "&::placeholder": {
+      color: "var(--mdc-theme-surface) !important",
+      opacity: "1 !important"
+    },
+    "&:focus::placeholder": {
+      color: "var(--mdc-theme-text-secondary-on-background) !important"
+    }
+  }
+}, "label:searchBarInput;");
+exports.searchBarInput = searchBarInput;
+var searchBarDropdown = /*#__PURE__*/(0, _emotion.css)({
+  position: "absolute",
+  background: "white",
+  left: -1,
+  width: "calc(100% + 2px)",
+  top: 45,
+  zIndex: 2,
+  color: "var(--mdc-theme-on-surface)",
+  borderRadius: "0 0 5px 5px",
+  ".mdc-list": {
+    padding: 0,
+    ".mdc-list-item": {
+      "&.selected": {
+        fontWeight: "bold"
+      },
+      "&.highlighted": {
+        backgroundColor: "var(--mdc-theme-on-background)"
+      }
+    }
+  }
+}, "label:searchBarDropdown;");
+exports.searchBarDropdown = searchBarDropdown;
+var icon = /*#__PURE__*/(0, _emotion.css)({
+  "&.mdc-button__icon": {
+    width: "auto !important",
+    paddingRight: 5,
+    opacity: 0.75,
+    marginTop: 2
+  }
+}, "label:icon;");
+exports.icon = icon;
+var iconSearchType = /*#__PURE__*/(0, _emotion.css)({
+  cursor: "pointer",
+  paddingLeft: 5
+}, "label:iconSearchType;");
+exports.iconSearchType = iconSearchType;
+var searchWrapper = /*#__PURE__*/(0, _emotion.css)({
+  backgroundColor: "rgba(0, 0, 0, 0.1)",
+  display: "flex",
+  padding: "10px 20px",
+  position: "relative",
+  borderRadius: 4,
+  transition: "background 100ms ease-in,width 100ms ease-out",
+  color: "var(--mdc-theme-surface)",
+  border: "1px solid transparent",
+  "&.active": (0, _defineProperty2.default)({
+    color: "var(--mdc-theme-on-surface)",
+    border: "1px solid var(--mdc-theme-text-hint-on-dark)",
+    background: "var(--mdc-theme-surface)",
+    boxShadow: "0 1px 1px var(--mdc-theme-text-hint-on-dark)",
+    input: {
+      color: "var(--mdc-theme-on-surface)"
+    }
+  }, SearchShortcut, {
+    display: "none"
+  }),
+  input: {
+    color: "var(--mdc-theme-surface)"
+  }
+}, "label:searchWrapper;");
+exports.searchWrapper = searchWrapper;

package/plugins/globalSearch/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["SearchShortcut","styled","border","color","borderRadius","width","height","marginTop","textAlign","fontSize","paddingTop","boxSizing","cursor","opacity","SearchBarWrapper","display","SearchBarInputWrapper","position","searchBarInput","css","lineHeight","outline","backgroundColor","paddingLeft","borderBottom","searchBarDropdown","background","left","top","zIndex","padding","fontWeight","icon","paddingRight","iconSearchType","searchWrapper","transition","boxShadow","input"],"sources":["styled.ts"],"sourcesContent":["// TODO remove\n// @ts-nocheck\nimport { css } from \"emotion\";\nimport styled from \"@emotion/styled\";\n\nexport const SearchShortcut = styled(\"div\")({\n    border: \"1px solid var(--mdc-theme-surface)\",\n    color: \"var(--mdc-theme-surface)\",\n    borderRadius: 5,\n    width: 20,\n    height: 24,\n    marginTop: 1,\n    textAlign: \"center\",\n    fontSize: \"12px\",\n    paddingTop: \"3px\",\n    boxSizing: \"border-box\",\n    cursor: \"default\",\n    opacity: \"0.8\"\n});\n\nexport const SearchBarWrapper = styled(\"div\")({\n    display: \"flex\",\n    width: \"100%\"\n});\n\nexport const SearchBarInputWrapper = styled(\"div\")({\n    display: \"flex\",\n    width: \"100%\",\n    position: \"relative\"\n});\n\nexport const searchBarInput = css({\n    width: \"100%\",\n    lineHeight: 1,\n    border: \"none\",\n    outline: \"none\",\n    backgroundColor: \"transparent\",\n    \"&.mdc-text-field__input\": {\n        paddingTop: \"5px !important\",\n        paddingLeft: \"10px !important\",\n        borderBottom: \"none !important\",\n        height: \"25px !important\",\n        color: \"var(--mdc-theme-surface)\",\n        \"&::placeholder\": {\n            color: \"var(--mdc-theme-surface) !important\",\n            opacity: \"1 !important\"\n        },\n        \"&:focus::placeholder\": {\n            color: \"var(--mdc-theme-text-secondary-on-background) !important\"\n        }\n    }\n});\n\nexport const searchBarDropdown = css({\n    position: \"absolute\",\n    background: \"white\",\n    left: -1,\n    width: \"calc(100% + 2px)\",\n    top: 45,\n    zIndex: 2,\n    color: \"var(--mdc-theme-on-surface)\",\n    borderRadius: \"0 0 5px 5px\",\n    \".mdc-list\": {\n        padding: 0,\n        \".mdc-list-item\": {\n            \"&.selected\": {\n                fontWeight: \"bold\"\n            },\n            \"&.highlighted\": {\n                backgroundColor: \"var(--mdc-theme-on-background)\"\n            }\n        }\n    }\n});\n\nexport const icon = css({\n    \"&.mdc-button__icon\": {\n        width: \"auto !important\",\n        paddingRight: 5,\n        opacity: 0.75,\n        marginTop: 2\n    }\n});\n\nexport const iconSearchType = css({\n    cursor: \"pointer\",\n    paddingLeft: 5\n});\n\nexport const searchWrapper = css({\n    backgroundColor: \"rgba(0, 0, 0, 0.1)\",\n    display: \"flex\",\n    padding: \"10px 20px\",\n    position: \"relative\",\n    borderRadius: 4,\n    transition: \"background 100ms ease-in,width 100ms ease-out\",\n    color: \"var(--mdc-theme-surface)\",\n    border: \"1px solid transparent\",\n    \"&.active\": {\n        color: \"var(--mdc-theme-on-surface)\",\n        border: \"1px solid var(--mdc-theme-text-hint-on-dark)\",\n        background: \"var(--mdc-theme-surface)\",\n        boxShadow: \"0 1px 1px var(--mdc-theme-text-hint-on-dark)\",\n        input: {\n            color: \"var(--mdc-theme-on-surface)\"\n        },\n        [SearchShortcut]: {\n            display: \"none\"\n        }\n    },\n    input: {\n        color: \"var(--mdc-theme-surface)\"\n    }\n});\n"],"mappings":"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"}

package/plugins/uiLayoutRenderer/index.d.ts

@@ -0,0 +1,2 @@
+import { UILayoutPlugin } from "../../ui/UILayout";
+export declare const uiLayoutPlugin: UILayoutPlugin<import("@webiny/ui-composer/UILayout").UILayout>;

package/plugins/uiLayoutRenderer/index.js

@@ -0,0 +1,75 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.uiLayoutPlugin = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Grid = require("@webiny/ui/Grid");
+
+var _UILayout = require("../../ui/UILayout");
+
+function getElementKey(element) {
+  return "".concat(element.constructor.name, ":").concat(element.id);
+}
+
+var ElementID = function ElementID(_ref) {
+  var children = _ref.children;
+  return children;
+};
+
+var uiLayoutPlugin = new _UILayout.UILayoutPlugin(function (layout) {
+  layout.setRenderer(function (_ref2) {
+    var layout = _ref2.layout,
+        props = _ref2.props,
+        hasParentGrid = _ref2.hasParentGrid;
+
+    if (!layout.getGrid()) {
+      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, layout.getLayout().map(function (row, index) {
+        return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
+          key: index
+        }, row.map(function (item) {
+          var element = layout.getElement(item.element);
+
+          if (!element) {
+            console.warn("Element \"".concat(item.element, "\" was not found!"));
+            return null;
+          }
+
+          if (!element.shouldRender(props)) {
+            return null;
+          }
+
+          return /*#__PURE__*/_react.default.createElement(ElementID, {
+            key: getElementKey(element)
+          }, element.render(props));
+        }));
+      }));
+    }
+
+    var GridComponent = hasParentGrid ? _Grid.GridInner : _Grid.Grid;
+    return /*#__PURE__*/_react.default.createElement(GridComponent, null, layout.getLayout().map(function (row, index) {
+      return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
+        key: index
+      }, row.map(function (item) {
+        var element = layout.getElement(item.element);
+
+        if (!element.shouldRender(props)) {
+          return null;
+        }
+
+        return /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
+          key: item.element,
+          span: item.width
+        }, /*#__PURE__*/_react.default.createElement(ElementID, {
+          key: getElementKey(element)
+        }, element.render(props)));
+      }));
+    }));
+  });
+});
+exports.uiLayoutPlugin = uiLayoutPlugin;

package/plugins/uiLayoutRenderer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["getElementKey","element","constructor","name","id","ElementID","children","uiLayoutPlugin","UILayoutPlugin","layout","setRenderer","props","hasParentGrid","getGrid","getLayout","map","row","index","item","getElement","console","warn","shouldRender","render","GridComponent","GridInner","Grid","width"],"sources":["index.tsx"],"sourcesContent":["import React, { Fragment } from \"react\";\nimport { Cell, Grid, GridInner } from \"@webiny/ui/Grid\";\nimport { UILayoutPlugin } from \"~/ui/UILayout\";\nimport { UIElement } from \"~/ui/UIElement\";\n\nfunction getElementKey(element: UIElement) {\n    return `${element.constructor.name}:${element.id}`;\n}\n\nconst ElementID: React.FC = ({ children }) => {\n    return children as unknown as React.ReactElement;\n};\n\nexport const uiLayoutPlugin = new UILayoutPlugin(layout => {\n    layout.setRenderer(({ layout, props, hasParentGrid }) => {\n        if (!layout.getGrid()) {\n            return (\n                <Fragment>\n                    {layout.getLayout().map((row, index) => (\n                        <Fragment key={index}>\n                            {row.map(item => {\n                                const element = layout.getElement(item.element);\n\n                                if (!element) {\n                                    console.warn(`Element \"${item.element}\" was not found!`);\n                                    return null;\n                                }\n\n                                if (!element.shouldRender(props)) {\n                                    return null;\n                                }\n\n                                return (\n                                    <ElementID key={getElementKey(element)}>\n                                        {element.render(props)}\n                                    </ElementID>\n                                );\n                            })}\n                        </Fragment>\n                    ))}\n                </Fragment>\n            );\n        }\n\n        const GridComponent = hasParentGrid ? GridInner : Grid;\n\n        return (\n            <GridComponent>\n                {layout.getLayout().map((row, index) => (\n                    <Fragment key={index}>\n                        {row.map(item => {\n                            const element = layout.getElement(item.element);\n                            if (!element.shouldRender(props)) {\n                                return null;\n                            }\n                            return (\n                                <Cell key={item.element} span={item.width}>\n                                    <ElementID key={getElementKey(element)}>\n                                        {element.render(props)}\n                                    </ElementID>\n                                </Cell>\n                            );\n                        })}\n                    </Fragment>\n                ))}\n            </GridComponent>\n        );\n    });\n});\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAGA,SAASA,aAAT,CAAuBC,OAAvB,EAA2C;EACvC,iBAAUA,OAAO,CAACC,WAAR,CAAoBC,IAA9B,cAAsCF,OAAO,CAACG,EAA9C;AACH;;AAED,IAAMC,SAAmB,GAAG,SAAtBA,SAAsB,OAAkB;EAAA,IAAfC,QAAe,QAAfA,QAAe;EAC1C,OAAOA,QAAP;AACH,CAFD;;AAIO,IAAMC,cAAc,GAAG,IAAIC,wBAAJ,CAAmB,UAAAC,MAAM,EAAI;EACvDA,MAAM,CAACC,WAAP,CAAmB,iBAAsC;IAAA,IAAnCD,MAAmC,SAAnCA,MAAmC;IAAA,IAA3BE,KAA2B,SAA3BA,KAA2B;IAAA,IAApBC,aAAoB,SAApBA,aAAoB;;IACrD,IAAI,CAACH,MAAM,CAACI,OAAP,EAAL,EAAuB;MACnB,oBACI,6BAAC,eAAD,QACKJ,MAAM,CAACK,SAAP,GAAmBC,GAAnB,CAAuB,UAACC,GAAD,EAAMC,KAAN;QAAA,oBACpB,6BAAC,eAAD;UAAU,GAAG,EAAEA;QAAf,GACKD,GAAG,CAACD,GAAJ,CAAQ,UAAAG,IAAI,EAAI;UACb,IAAMjB,OAAO,GAAGQ,MAAM,CAACU,UAAP,CAAkBD,IAAI,CAACjB,OAAvB,CAAhB;;UAEA,IAAI,CAACA,OAAL,EAAc;YACVmB,OAAO,CAACC,IAAR,qBAAyBH,IAAI,CAACjB,OAA9B;YACA,OAAO,IAAP;UACH;;UAED,IAAI,CAACA,OAAO,CAACqB,YAAR,CAAqBX,KAArB,CAAL,EAAkC;YAC9B,OAAO,IAAP;UACH;;UAED,oBACI,6BAAC,SAAD;YAAW,GAAG,EAAEX,aAAa,CAACC,OAAD;UAA7B,GACKA,OAAO,CAACsB,MAAR,CAAeZ,KAAf,CADL,CADJ;QAKH,CAjBA,CADL,CADoB;MAAA,CAAvB,CADL,CADJ;IA0BH;;IAED,IAAMa,aAAa,GAAGZ,aAAa,GAAGa,eAAH,GAAeC,UAAlD;IAEA,oBACI,6BAAC,aAAD,QACKjB,MAAM,CAACK,SAAP,GAAmBC,GAAnB,CAAuB,UAACC,GAAD,EAAMC,KAAN;MAAA,oBACpB,6BAAC,eAAD;QAAU,GAAG,EAAEA;MAAf,GACKD,GAAG,CAACD,GAAJ,CAAQ,UAAAG,IAAI,EAAI;QACb,IAAMjB,OAAO,GAAGQ,MAAM,CAACU,UAAP,CAAkBD,IAAI,CAACjB,OAAvB,CAAhB;;QACA,IAAI,CAACA,OAAO,CAACqB,YAAR,CAAqBX,KAArB,CAAL,EAAkC;UAC9B,OAAO,IAAP;QACH;;QACD,oBACI,6BAAC,UAAD;UAAM,GAAG,EAAEO,IAAI,CAACjB,OAAhB;UAAyB,IAAI,EAAEiB,IAAI,CAACS;QAApC,gBACI,6BAAC,SAAD;UAAW,GAAG,EAAE3B,aAAa,CAACC,OAAD;QAA7B,GACKA,OAAO,CAACsB,MAAR,CAAeZ,KAAf,CADL,CADJ,CADJ;MAOH,CAZA,CADL,CADoB;IAAA,CAAvB,CADL,CADJ;EAqBH,CArDD;AAsDH,CAvD6B,CAAvB"}