@webiny/app-admin-rmwc 5.27.0 → 5.29.0-beta.0

package/modules/Navigation/renderers/MenuGroupRenderer.js

@@ -1,18 +1,44 @@
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { Fragment, useCallback, useState } from "react";
-import { default as localStorage } from "store";
-import { css } from "emotion";
-import { Transition } from "react-transition-group";
-import classNames from "classnames";
-import { Link } from "@webiny/react-router";
-import { useMenuItem, MenuItems } from "@webiny/app-admin";
-import { List, ListItem, ListItemGraphic, ListItemMeta } from "@webiny/ui/List";
-import { IconButton } from "@webiny/ui/Button";
-import { useNavigation } from "../index";
-import { ReactComponent as UpIcon } from "../icons/round-keyboard_arrow_up-24px.svg";
-import { ReactComponent as DownIcon } from "../icons/round-keyboard_arrow_down-24px.svg";
+"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.MenuGroupRenderer = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _store = _interopRequireDefault(require("store"));
+
+var _emotion = require("emotion");
+
+var _reactTransitionGroup = require("react-transition-group");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _reactRouter = require("@webiny/react-router");
+
+var _appAdmin = require("@webiny/app-admin");
+
+var _List = require("@webiny/ui/List");
+
+var _Button = require("@webiny/ui/Button");
+
+var _index = require("../index");
+
+var _roundKeyboard_arrow_up24px = require("../icons/round-keyboard_arrow_up-24px.svg");
+
+var _roundKeyboard_arrow_down24px = require("../icons/round-keyboard_arrow_down-24px.svg");
+
 var defaultStyle = {
   transform: "translateY(-20px)",
   opacity: 0,
@@ -31,7 +57,7 @@ var transitionStyles = {
     opacity: 1
   }
 };
-var menuTitle = /*#__PURE__*/css({
+var menuTitle = /*#__PURE__*/(0, _emotion.css)({
   ".mdc-drawer &.mdc-list": {
     borderBottom: "1px solid var(--mdc-theme-on-background)",
     padding: 0,
@@ -45,17 +71,17 @@ var menuTitle = /*#__PURE__*/css({
     }
   }
 }, "label:menuTitle;");
-var menuTitleActive = /*#__PURE__*/css({
+var menuTitleActive = /*#__PURE__*/(0, _emotion.css)({
   backgroundColor: "var(--mdc-theme-background)"
 }, "label:menuTitleActive;");
 var LOCAL_STORAGE_KEY = "webiny_navigation_groups";
 
 function loadState() {
-  return (localStorage.get(LOCAL_STORAGE_KEY) || "").split(",").filter(Boolean);
+  return (_store.default.get(LOCAL_STORAGE_KEY) || "").split(",").filter(Boolean);
 }
 
 function storeState(state) {
-  localStorage.set(LOCAL_STORAGE_KEY, state.join(","));
+  _store.default.set(LOCAL_STORAGE_KEY, state.join(","));
 }
 
 function getState(id) {
@@ -67,26 +93,26 @@ function getState(id) {
   return state.includes(id);
 }
 
-export var MenuGroupRenderer = function MenuGroupRenderer(PrevMenuItem) {
+var MenuGroupRenderer = function MenuGroupRenderer(PrevMenuItem) {
   return function MenuGroup() {
-    var _useNavigation = useNavigation(),
+    var _useNavigation = (0, _index.useNavigation)(),
         setVisible = _useNavigation.setVisible;
 
-    var _useMenuItem = useMenuItem(),
+    var _useMenuItem = (0, _appAdmin.useMenuItem)(),
         menuItem = _useMenuItem.menuItem,
         depth = _useMenuItem.depth;
 
     var shouldRender = depth === 0 && menuItem && menuItem.children;
 
-    var _useState = useState(getState(menuItem ? menuItem.name : null)),
-        _useState2 = _slicedToArray(_useState, 2),
+    var _useState = (0, _react.useState)(getState(menuItem ? menuItem.name : null)),
+        _useState2 = (0, _slicedToArray2.default)(_useState, 2),
         isExpanded = _useState2[0],
         setExpanded = _useState2[1];
 
-    var hideMenu = useCallback(function () {
+    var hideMenu = (0, _react.useCallback)(function () {
       return setVisible(false);
     }, []);
-    var toggleElement = useCallback(function () {
+    var toggleElement = (0, _react.useCallback)(function () {
       if (!menuItem) {
         return;
       }
@@ -106,7 +132,7 @@ export var MenuGroupRenderer = function MenuGroupRenderer(PrevMenuItem) {
     }, [isExpanded, setExpanded]);
 
     if (!shouldRender) {
-      return /*#__PURE__*/React.createElement(PrevMenuItem, null);
+      return /*#__PURE__*/_react.default.createElement(PrevMenuItem, null);
     }
 
     if (!menuItem || !menuItem.children.length) {
@@ -114,34 +140,37 @@ export var MenuGroupRenderer = function MenuGroupRenderer(PrevMenuItem) {
     }
 
     var withLink = function withLink(content) {
-      return /*#__PURE__*/React.createElement(Link, {
+      return /*#__PURE__*/_react.default.createElement(_reactRouter.Link, {
         to: menuItem.path || "",
         "data-testid": menuItem.testId,
         onClick: menuItem.onClick || hideMenu
       }, content);
     };
 
-    var item = /*#__PURE__*/React.createElement(List, {
-      className: classNames(menuTitle, _defineProperty({}, menuTitleActive, isExpanded))
-    }, /*#__PURE__*/React.createElement(ListItem, {
+    var item = /*#__PURE__*/_react.default.createElement(_List.List, {
+      className: (0, _classnames.default)(menuTitle, (0, _defineProperty2.default)({}, menuTitleActive, isExpanded))
+    }, /*#__PURE__*/_react.default.createElement(_List.ListItem, {
       "data-testid": menuItem.testId,
       onClick: toggleElement
-    }, menuItem.icon && /*#__PURE__*/React.createElement(ListItemGraphic, null, /*#__PURE__*/React.createElement(IconButton, {
+    }, menuItem.icon && /*#__PURE__*/_react.default.createElement(_List.ListItemGraphic, null, /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
       icon: menuItem.icon
-    })), menuItem.label, menuItem.children.length ? /*#__PURE__*/React.createElement(ListItemMeta, null, /*#__PURE__*/React.createElement(IconButton, {
-      icon: isExpanded ? /*#__PURE__*/React.createElement(UpIcon, null) : /*#__PURE__*/React.createElement(DownIcon, null)
+    })), menuItem.label, menuItem.children.length ? /*#__PURE__*/_react.default.createElement(_List.ListItemMeta, null, /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
+      icon: isExpanded ? /*#__PURE__*/_react.default.createElement(_roundKeyboard_arrow_up24px.ReactComponent, null) : /*#__PURE__*/_react.default.createElement(_roundKeyboard_arrow_down24px.ReactComponent, null)
     })) : null));
-    return /*#__PURE__*/React.createElement(Fragment, null, menuItem.path ? withLink(item) : item, menuItem.children ? /*#__PURE__*/React.createElement(Transition, {
+
+    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, menuItem.path ? withLink(item) : item, menuItem.children ? /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.Transition, {
       in: isExpanded,
       timeout: 100,
       appear: true,
       unmountOnExit: true
     }, function (state) {
-      return /*#__PURE__*/React.createElement("div", {
-        style: _objectSpread(_objectSpread({}, defaultStyle), transitionStyles[state])
-      }, /*#__PURE__*/React.createElement(MenuItems, {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, defaultStyle), transitionStyles[state])
+      }, /*#__PURE__*/_react.default.createElement(_appAdmin.MenuItems, {
         menuItems: menuItem.children
       }));
     }) : null);
   };
-};
+};
+
+exports.MenuGroupRenderer = MenuGroupRenderer;

package/modules/Navigation/renderers/MenuGroupRenderer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["MenuGroupRenderer.tsx"],"names":["React","Fragment","useCallback","useState","default","localStorage","css","Transition","classNames","Link","useMenuItem","MenuItems","List","ListItem","ListItemGraphic","ListItemMeta","IconButton","useNavigation","ReactComponent","UpIcon","DownIcon","defaultStyle","transform","opacity","transitionProperty","transitionTimingFunction","transitionDuration","willChange","transitionStyles","entering","entered","menuTitle","borderBottom","padding","margin","height","width","fontWeight","boxSizing","menuTitleActive","backgroundColor","LOCAL_STORAGE_KEY","loadState","get","split","filter","Boolean","storeState","state","set","join","getState","id","includes","MenuGroupRenderer","PrevMenuItem","MenuGroup","setVisible","menuItem","depth","shouldRender","children","name","isExpanded","setExpanded","hideMenu","toggleElement","splice","indexOf","push","length","withLink","content","path","testId","onClick","item","icon","label"],"mappings":"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","sourcesContent":["import React, { Fragment, useCallback, useState } from \"react\";\nimport { default as localStorage } from \"store\";\nimport { css } from \"emotion\";\nimport { Transition } from \"react-transition-group\";\nimport classNames from \"classnames\";\nimport { Link } from \"@webiny/react-router\";\nimport { useMenuItem, MenuItems } from \"@webiny/app-admin\";\nimport { List, ListItem, ListItemGraphic, ListItemMeta } from \"@webiny/ui/List\";\nimport { IconButton } from \"@webiny/ui/Button\";\nimport { useNavigation } from \"../index\";\nimport { ReactComponent as UpIcon } from \"../icons/round-keyboard_arrow_up-24px.svg\";\nimport { ReactComponent as DownIcon } from \"../icons/round-keyboard_arrow_down-24px.svg\";\n\nconst defaultStyle = {\n    transform: \"translateY(-20px)\",\n    opacity: 0,\n    transitionProperty: \"transform, opacity\",\n    transitionTimingFunction: \"cubic-bezier(0, 0, .2, 1)\",\n    transitionDuration: \"100ms\",\n    willChange: \"opacity, transform\"\n};\n\nconst transitionStyles: Record<string, any> = {\n    entering: {\n        transform: \"translateY(-20px)\",\n        opacity: 0\n    },\n    entered: {\n        transform: \"translateY(0px)\",\n        opacity: 1\n    }\n};\n\nconst menuTitle = css({\n    \".mdc-drawer &.mdc-list\": {\n        borderBottom: \"1px solid var(--mdc-theme-on-background)\",\n        padding: 0,\n        \".mdc-list-item\": {\n            margin: 0,\n            padding: \"0 15px\",\n            height: \"48px\",\n            width: \"100%\",\n            fontWeight: 600,\n            boxSizing: \"border-box\"\n        }\n    }\n});\n\nconst menuTitleActive = css({\n    backgroundColor: \"var(--mdc-theme-background)\"\n});\n\nconst LOCAL_STORAGE_KEY = \"webiny_navigation_groups\";\n\nfunction loadState(): string[] {\n    return (localStorage.get(LOCAL_STORAGE_KEY) || \"\").split(\",\").filter(Boolean);\n}\n\nfunction storeState(state: string[]) {\n    localStorage.set(LOCAL_STORAGE_KEY, state.join(\",\"));\n}\n\nfunction getState(id: string | null): boolean {\n    if (!id) {\n        return false;\n    }\n    const state = loadState();\n    return state.includes(id);\n}\n\nexport const MenuGroupRenderer = (PrevMenuItem: React.FC): React.FC => {\n    return function MenuGroup() {\n        const { setVisible } = useNavigation();\n        const { menuItem, depth } = useMenuItem();\n        const shouldRender = depth === 0 && menuItem && menuItem.children;\n        const [isExpanded, setExpanded] = useState<boolean>(\n            getState(menuItem ? menuItem.name : null)\n        );\n\n        const hideMenu = useCallback(() => setVisible(false), []);\n\n        const toggleElement = useCallback(() => {\n            if (!menuItem) {\n                return;\n            }\n            const state = loadState();\n            if (isExpanded && state.includes(menuItem.name)) {\n                state.splice(state.indexOf(menuItem.name), 1);\n            }\n\n            if (!isExpanded && !state.includes(menuItem.name)) {\n                state.push(menuItem.name);\n            }\n\n            setExpanded(!isExpanded);\n            storeState(state);\n        }, [isExpanded, setExpanded]);\n\n        if (!shouldRender) {\n            return <PrevMenuItem />;\n        }\n\n        if (!menuItem || !menuItem.children.length) {\n            return null;\n        }\n\n        const withLink = (content: React.ReactNode): React.ReactElement => {\n            return (\n                <Link\n                    to={menuItem.path || \"\"}\n                    data-testid={menuItem.testId}\n                    onClick={menuItem.onClick || hideMenu}\n                >\n                    {content}\n                </Link>\n            );\n        };\n\n        const item = (\n            <List className={classNames(menuTitle, { [menuTitleActive]: isExpanded })}>\n                <ListItem data-testid={menuItem.testId} onClick={toggleElement}>\n                    {menuItem.icon && (\n                        <ListItemGraphic>\n                            <IconButton icon={menuItem.icon} />\n                        </ListItemGraphic>\n                    )}\n\n                    {menuItem.label}\n\n                    {menuItem.children.length ? (\n                        <ListItemMeta>\n                            <IconButton icon={isExpanded ? <UpIcon /> : <DownIcon />} />\n                        </ListItemMeta>\n                    ) : null}\n                </ListItem>\n            </List>\n        );\n\n        return (\n            <Fragment>\n                {menuItem.path ? withLink(item) : item}\n                {menuItem.children ? (\n                    <Transition in={isExpanded} timeout={100} appear unmountOnExit>\n                        {state => (\n                            <div style={{ ...defaultStyle, ...transitionStyles[state] }}>\n                                <MenuItems menuItems={menuItem.children} />\n                            </div>\n                        )}\n                    </Transition>\n                ) : null}\n            </Fragment>\n        );\n    };\n};\n"]}
+{"version":3,"names":["defaultStyle","transform","opacity","transitionProperty","transitionTimingFunction","transitionDuration","willChange","transitionStyles","entering","entered","menuTitle","css","borderBottom","padding","margin","height","width","fontWeight","boxSizing","menuTitleActive","backgroundColor","LOCAL_STORAGE_KEY","loadState","localStorage","get","split","filter","Boolean","storeState","state","set","join","getState","id","includes","MenuGroupRenderer","PrevMenuItem","MenuGroup","useNavigation","setVisible","useMenuItem","menuItem","depth","shouldRender","children","useState","name","isExpanded","setExpanded","hideMenu","useCallback","toggleElement","splice","indexOf","push","length","withLink","content","path","testId","onClick","item","classNames","icon","label"],"sources":["MenuGroupRenderer.tsx"],"sourcesContent":["import React, { Fragment, useCallback, useState } from \"react\";\nimport { default as localStorage } from \"store\";\nimport { css } from \"emotion\";\nimport { Transition } from \"react-transition-group\";\nimport classNames from \"classnames\";\nimport { Link } from \"@webiny/react-router\";\nimport { useMenuItem, MenuItems } from \"@webiny/app-admin\";\nimport { List, ListItem, ListItemGraphic, ListItemMeta } from \"@webiny/ui/List\";\nimport { IconButton } from \"@webiny/ui/Button\";\nimport { useNavigation } from \"../index\";\nimport { ReactComponent as UpIcon } from \"../icons/round-keyboard_arrow_up-24px.svg\";\nimport { ReactComponent as DownIcon } from \"../icons/round-keyboard_arrow_down-24px.svg\";\n\nconst defaultStyle = {\n    transform: \"translateY(-20px)\",\n    opacity: 0,\n    transitionProperty: \"transform, opacity\",\n    transitionTimingFunction: \"cubic-bezier(0, 0, .2, 1)\",\n    transitionDuration: \"100ms\",\n    willChange: \"opacity, transform\"\n};\n\nconst transitionStyles: Record<string, any> = {\n    entering: {\n        transform: \"translateY(-20px)\",\n        opacity: 0\n    },\n    entered: {\n        transform: \"translateY(0px)\",\n        opacity: 1\n    }\n};\n\nconst menuTitle = css({\n    \".mdc-drawer &.mdc-list\": {\n        borderBottom: \"1px solid var(--mdc-theme-on-background)\",\n        padding: 0,\n        \".mdc-list-item\": {\n            margin: 0,\n            padding: \"0 15px\",\n            height: \"48px\",\n            width: \"100%\",\n            fontWeight: 600,\n            boxSizing: \"border-box\"\n        }\n    }\n});\n\nconst menuTitleActive = css({\n    backgroundColor: \"var(--mdc-theme-background)\"\n});\n\nconst LOCAL_STORAGE_KEY = \"webiny_navigation_groups\";\n\nfunction loadState(): string[] {\n    return (localStorage.get(LOCAL_STORAGE_KEY) || \"\").split(\",\").filter(Boolean);\n}\n\nfunction storeState(state: string[]) {\n    localStorage.set(LOCAL_STORAGE_KEY, state.join(\",\"));\n}\n\nfunction getState(id: string | null): boolean {\n    if (!id) {\n        return false;\n    }\n    const state = loadState();\n    return state.includes(id);\n}\n\nexport const MenuGroupRenderer = (PrevMenuItem: React.FC): React.FC => {\n    return function MenuGroup() {\n        const { setVisible } = useNavigation();\n        const { menuItem, depth } = useMenuItem();\n        const shouldRender = depth === 0 && menuItem && menuItem.children;\n        const [isExpanded, setExpanded] = useState<boolean>(\n            getState(menuItem ? menuItem.name : null)\n        );\n\n        const hideMenu = useCallback(() => setVisible(false), []);\n\n        const toggleElement = useCallback(() => {\n            if (!menuItem) {\n                return;\n            }\n            const state = loadState();\n            if (isExpanded && state.includes(menuItem.name)) {\n                state.splice(state.indexOf(menuItem.name), 1);\n            }\n\n            if (!isExpanded && !state.includes(menuItem.name)) {\n                state.push(menuItem.name);\n            }\n\n            setExpanded(!isExpanded);\n            storeState(state);\n        }, [isExpanded, setExpanded]);\n\n        if (!shouldRender) {\n            return <PrevMenuItem />;\n        }\n\n        if (!menuItem || !menuItem.children.length) {\n            return null;\n        }\n\n        const withLink = (content: React.ReactNode): React.ReactElement => {\n            return (\n                <Link\n                    to={menuItem.path || \"\"}\n                    data-testid={menuItem.testId}\n                    onClick={menuItem.onClick || hideMenu}\n                >\n                    {content}\n                </Link>\n            );\n        };\n\n        const item = (\n            <List className={classNames(menuTitle, { [menuTitleActive]: isExpanded })}>\n                <ListItem data-testid={menuItem.testId} onClick={toggleElement}>\n                    {menuItem.icon && (\n                        <ListItemGraphic>\n                            <IconButton icon={menuItem.icon} />\n                        </ListItemGraphic>\n                    )}\n\n                    {menuItem.label}\n\n                    {menuItem.children.length ? (\n                        <ListItemMeta>\n                            <IconButton icon={isExpanded ? <UpIcon /> : <DownIcon />} />\n                        </ListItemMeta>\n                    ) : null}\n                </ListItem>\n            </List>\n        );\n\n        return (\n            <Fragment>\n                {menuItem.path ? withLink(item) : item}\n                {menuItem.children ? (\n                    <Transition in={isExpanded} timeout={100} appear unmountOnExit>\n                        {state => (\n                            <div style={{ ...defaultStyle, ...transitionStyles[state] }}>\n                                <MenuItems menuItems={menuItem.children} />\n                            </div>\n                        )}\n                    </Transition>\n                ) : null}\n            </Fragment>\n        );\n    };\n};\n"],"mappings":"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"}

package/modules/Navigation/renderers/MenuLinkRenderer.js

@@ -1,40 +1,57 @@
-import React, { useCallback } from "react";
-import { css } from "emotion";
-import { Link } from "@webiny/react-router";
-import { ListItem, ListItemGraphic } from "@webiny/ui/List";
-import { useMenuItem } from "@webiny/app-admin";
-import { Icon } from "@webiny/ui/Icon";
-import { useNavigation } from "../index";
-var listItemStyle = /*#__PURE__*/css({
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MenuLinkRenderer = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _emotion = require("emotion");
+
+var _reactRouter = require("@webiny/react-router");
+
+var _List = require("@webiny/ui/List");
+
+var _appAdmin = require("@webiny/app-admin");
+
+var _Icon = require("@webiny/ui/Icon");
+
+var _index = require("../index");
+
+var listItemStyle = /*#__PURE__*/(0, _emotion.css)({
   ".mdc-list &.mdc-list-item:hover": {
     cursor: "pointer",
     backgroundColor: "var(--mdc-theme-background)"
   }
 }, "label:listItemStyle;");
-export var MenuLinkRenderer = function MenuLinkRenderer(PrevMenuItem) {
+
+var MenuLinkRenderer = function MenuLinkRenderer(PrevMenuItem) {
   return function MenuLink() {
-    var _useNavigation = useNavigation(),
+    var _useNavigation = (0, _index.useNavigation)(),
         setVisible = _useNavigation.setVisible;
 
-    var _useMenuItem = useMenuItem(),
+    var _useMenuItem = (0, _appAdmin.useMenuItem)(),
         menuItem = _useMenuItem.menuItem,
         depth = _useMenuItem.depth;
 
-    var hideMenu = useCallback(function () {
+    var hideMenu = (0, _react.useCallback)(function () {
       return setVisible(false);
     }, []);
     var shouldRender = depth === 0 && (menuItem ? menuItem.tags || [] : []).includes("footer");
 
     if (!shouldRender) {
-      return /*#__PURE__*/React.createElement(PrevMenuItem, null);
+      return /*#__PURE__*/_react.default.createElement(PrevMenuItem, null);
     } else if (!menuItem) {
       // TODO @ts-refactor check if to return component or null @pavel
       console.log("MenuLinkRenderer returning PrevMenuItem because missing menuItem variable.");
-      return /*#__PURE__*/React.createElement(PrevMenuItem, null);
+      return /*#__PURE__*/_react.default.createElement(PrevMenuItem, null);
     }
 
     var withLink = function withLink(content) {
-      return /*#__PURE__*/React.createElement(Link, {
+      return /*#__PURE__*/_react.default.createElement(_reactRouter.Link, {
         to: menuItem.path || "",
         target: menuItem.target,
         "data-testid": menuItem.testId,
@@ -42,14 +59,17 @@ export var MenuLinkRenderer = function MenuLinkRenderer(PrevMenuItem) {
       }, content);
     };
 
-    var item = /*#__PURE__*/React.createElement(ListItem, {
+    var item = /*#__PURE__*/_react.default.createElement(_List.ListItem, {
       "data-testid": menuItem.testId,
       ripple: false,
       className: listItemStyle,
       onClick: menuItem.onClick || hideMenu
-    }, menuItem.icon ? /*#__PURE__*/React.createElement(ListItemGraphic, null, /*#__PURE__*/React.createElement(Icon, {
+    }, menuItem.icon ? /*#__PURE__*/_react.default.createElement(_List.ListItemGraphic, null, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
       icon: menuItem.icon
     })) : null, menuItem.label);
+
     return menuItem.path ? withLink(item) : item;
   };
-};
+};
+
+exports.MenuLinkRenderer = MenuLinkRenderer;

package/modules/Navigation/renderers/MenuLinkRenderer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["MenuLinkRenderer.tsx"],"names":["React","useCallback","css","Link","ListItem","ListItemGraphic","useMenuItem","Icon","useNavigation","listItemStyle","cursor","backgroundColor","MenuLinkRenderer","PrevMenuItem","MenuLink","setVisible","menuItem","depth","hideMenu","shouldRender","tags","includes","console","log","withLink","content","path","target","testId","onClick","item","icon","label"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,WAAhB,QAAmC,OAAnC;AACA,SAASC,GAAT,QAAoB,SAApB;AACA,SAASC,IAAT,QAAqB,sBAArB;AACA,SAASC,QAAT,EAAmBC,eAAnB,QAA0C,iBAA1C;AACA,SAASC,WAAT,QAA4B,mBAA5B;AACA,SAASC,IAAT,QAAqB,iBAArB;AACA,SAASC,aAAT;AAEA,IAAMC,aAAa,gBAAGP,GAAG,CAAC;AACtB,qCAAmC;AAC/BQ,IAAAA,MAAM,EAAE,SADuB;AAE/BC,IAAAA,eAAe,EAAE;AAFc;AADb,CAAD,yBAAzB;AAOA,OAAO,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,YAAD,EAAsC;AAClE,SAAO,SAASC,QAAT,GAAoB;AACvB,yBAAuBN,aAAa,EAApC;AAAA,QAAQO,UAAR,kBAAQA,UAAR;;AACA,uBAA4BT,WAAW,EAAvC;AAAA,QAAQU,QAAR,gBAAQA,QAAR;AAAA,QAAkBC,KAAlB,gBAAkBA,KAAlB;;AAEA,QAAMC,QAAQ,GAAGjB,WAAW,CAAC;AAAA,aAAMc,UAAU,CAAC,KAAD,CAAhB;AAAA,KAAD,EAA0B,EAA1B,CAA5B;AACA,QAAMI,YAAY,GACdF,KAAK,KAAK,CAAV,IAAe,CAACD,QAAQ,GAAGA,QAAQ,CAACI,IAAT,IAAiB,EAApB,GAAyB,EAAlC,EAAsCC,QAAtC,CAA+C,QAA/C,CADnB;;AAGA,QAAI,CAACF,YAAL,EAAmB;AACf,0BAAO,oBAAC,YAAD,OAAP;AACH,KAFD,MAEO,IAAI,CAACH,QAAL,EAAe;AAClB;AACAM,MAAAA,OAAO,CAACC,GAAR,CACI,4EADJ;AAGA,0BAAO,oBAAC,YAAD,OAAP;AACH;;AAED,QAAMC,QAAQ,GAAG,SAAXA,QAAW,CAACC,OAAD,EAAkD;AAC/D,0BACI,oBAAC,IAAD;AACI,QAAA,EAAE,EAAET,QAAQ,CAACU,IAAT,IAAiB,EADzB;AAEI,QAAA,MAAM,EAAEV,QAAQ,CAACW,MAFrB;AAGI,uBAAaX,QAAQ,CAACY,MAH1B;AAII,QAAA,OAAO,EAAEZ,QAAQ,CAACa,OAAT,IAAoBX;AAJjC,SAMKO,OANL,CADJ;AAUH,KAXD;;AAaA,QAAMK,IAAI,gBACN,oBAAC,QAAD;AACI,qBAAad,QAAQ,CAACY,MAD1B;AAEI,MAAA,MAAM,EAAE,KAFZ;AAGI,MAAA,SAAS,EAAEnB,aAHf;AAII,MAAA,OAAO,EAAEO,QAAQ,CAACa,OAAT,IAAoBX;AAJjC,OAMKF,QAAQ,CAACe,IAAT,gBACG,oBAAC,eAAD,qBACI,oBAAC,IAAD;AAAM,MAAA,IAAI,EAAEf,QAAQ,CAACe;AAArB,MADJ,CADH,GAIG,IAVR,EAWKf,QAAQ,CAACgB,KAXd,CADJ;AAgBA,WAAOhB,QAAQ,CAACU,IAAT,GAAgBF,QAAQ,CAACM,IAAD,CAAxB,GAAiCA,IAAxC;AACH,GAhDD;AAiDH,CAlDM","sourcesContent":["import React, { useCallback } from \"react\";\nimport { css } from \"emotion\";\nimport { Link } from \"@webiny/react-router\";\nimport { ListItem, ListItemGraphic } from \"@webiny/ui/List\";\nimport { useMenuItem } from \"@webiny/app-admin\";\nimport { Icon } from \"@webiny/ui/Icon\";\nimport { useNavigation } from \"../index\";\n\nconst listItemStyle = css({\n    \".mdc-list &.mdc-list-item:hover\": {\n        cursor: \"pointer\",\n        backgroundColor: \"var(--mdc-theme-background)\"\n    }\n});\n\nexport const MenuLinkRenderer = (PrevMenuItem: React.FC): React.FC => {\n    return function MenuLink() {\n        const { setVisible } = useNavigation();\n        const { menuItem, depth } = useMenuItem();\n\n        const hideMenu = useCallback(() => setVisible(false), []);\n        const shouldRender =\n            depth === 0 && (menuItem ? menuItem.tags || [] : []).includes(\"footer\");\n\n        if (!shouldRender) {\n            return <PrevMenuItem />;\n        } else if (!menuItem) {\n            // TODO @ts-refactor check if to return component or null @pavel\n            console.log(\n                \"MenuLinkRenderer returning PrevMenuItem because missing menuItem variable.\"\n            );\n            return <PrevMenuItem />;\n        }\n\n        const withLink = (content: React.ReactNode): React.ReactElement => {\n            return (\n                <Link\n                    to={menuItem.path || \"\"}\n                    target={menuItem.target}\n                    data-testid={menuItem.testId}\n                    onClick={menuItem.onClick || hideMenu}\n                >\n                    {content}\n                </Link>\n            );\n        };\n\n        const item = (\n            <ListItem\n                data-testid={menuItem.testId}\n                ripple={false}\n                className={listItemStyle}\n                onClick={menuItem.onClick || hideMenu}\n            >\n                {menuItem.icon ? (\n                    <ListItemGraphic>\n                        <Icon icon={menuItem.icon} />\n                    </ListItemGraphic>\n                ) : null}\n                {menuItem.label}\n            </ListItem>\n        );\n\n        return menuItem.path ? withLink(item) : item;\n    };\n};\n"]}
+{"version":3,"names":["listItemStyle","css","cursor","backgroundColor","MenuLinkRenderer","PrevMenuItem","MenuLink","useNavigation","setVisible","useMenuItem","menuItem","depth","hideMenu","useCallback","shouldRender","tags","includes","console","log","withLink","content","path","target","testId","onClick","item","icon","label"],"sources":["MenuLinkRenderer.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { css } from \"emotion\";\nimport { Link } from \"@webiny/react-router\";\nimport { ListItem, ListItemGraphic } from \"@webiny/ui/List\";\nimport { useMenuItem } from \"@webiny/app-admin\";\nimport { Icon } from \"@webiny/ui/Icon\";\nimport { useNavigation } from \"../index\";\n\nconst listItemStyle = css({\n    \".mdc-list &.mdc-list-item:hover\": {\n        cursor: \"pointer\",\n        backgroundColor: \"var(--mdc-theme-background)\"\n    }\n});\n\nexport const MenuLinkRenderer = (PrevMenuItem: React.FC): React.FC => {\n    return function MenuLink() {\n        const { setVisible } = useNavigation();\n        const { menuItem, depth } = useMenuItem();\n\n        const hideMenu = useCallback(() => setVisible(false), []);\n        const shouldRender =\n            depth === 0 && (menuItem ? menuItem.tags || [] : []).includes(\"footer\");\n\n        if (!shouldRender) {\n            return <PrevMenuItem />;\n        } else if (!menuItem) {\n            // TODO @ts-refactor check if to return component or null @pavel\n            console.log(\n                \"MenuLinkRenderer returning PrevMenuItem because missing menuItem variable.\"\n            );\n            return <PrevMenuItem />;\n        }\n\n        const withLink = (content: React.ReactNode): React.ReactElement => {\n            return (\n                <Link\n                    to={menuItem.path || \"\"}\n                    target={menuItem.target}\n                    data-testid={menuItem.testId}\n                    onClick={menuItem.onClick || hideMenu}\n                >\n                    {content}\n                </Link>\n            );\n        };\n\n        const item = (\n            <ListItem\n                data-testid={menuItem.testId}\n                ripple={false}\n                className={listItemStyle}\n                onClick={menuItem.onClick || hideMenu}\n            >\n                {menuItem.icon ? (\n                    <ListItemGraphic>\n                        <Icon icon={menuItem.icon} />\n                    </ListItemGraphic>\n                ) : null}\n                {menuItem.label}\n            </ListItem>\n        );\n\n        return menuItem.path ? withLink(item) : item;\n    };\n};\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA,IAAMA,aAAa,gBAAG,IAAAC,YAAA,EAAI;EACtB,mCAAmC;IAC/BC,MAAM,EAAE,SADuB;IAE/BC,eAAe,EAAE;EAFc;AADb,CAAJ,yBAAtB;;AAOO,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,YAAD,EAAsC;EAClE,OAAO,SAASC,QAAT,GAAoB;IACvB,qBAAuB,IAAAC,oBAAA,GAAvB;IAAA,IAAQC,UAAR,kBAAQA,UAAR;;IACA,mBAA4B,IAAAC,qBAAA,GAA5B;IAAA,IAAQC,QAAR,gBAAQA,QAAR;IAAA,IAAkBC,KAAlB,gBAAkBA,KAAlB;;IAEA,IAAMC,QAAQ,GAAG,IAAAC,kBAAA,EAAY;MAAA,OAAML,UAAU,CAAC,KAAD,CAAhB;IAAA,CAAZ,EAAqC,EAArC,CAAjB;IACA,IAAMM,YAAY,GACdH,KAAK,KAAK,CAAV,IAAe,CAACD,QAAQ,GAAGA,QAAQ,CAACK,IAAT,IAAiB,EAApB,GAAyB,EAAlC,EAAsCC,QAAtC,CAA+C,QAA/C,CADnB;;IAGA,IAAI,CAACF,YAAL,EAAmB;MACf,oBAAO,6BAAC,YAAD,OAAP;IACH,CAFD,MAEO,IAAI,CAACJ,QAAL,EAAe;MAClB;MACAO,OAAO,CAACC,GAAR,CACI,4EADJ;MAGA,oBAAO,6BAAC,YAAD,OAAP;IACH;;IAED,IAAMC,QAAQ,GAAG,SAAXA,QAAW,CAACC,OAAD,EAAkD;MAC/D,oBACI,6BAAC,iBAAD;QACI,EAAE,EAAEV,QAAQ,CAACW,IAAT,IAAiB,EADzB;QAEI,MAAM,EAAEX,QAAQ,CAACY,MAFrB;QAGI,eAAaZ,QAAQ,CAACa,MAH1B;QAII,OAAO,EAAEb,QAAQ,CAACc,OAAT,IAAoBZ;MAJjC,GAMKQ,OANL,CADJ;IAUH,CAXD;;IAaA,IAAMK,IAAI,gBACN,6BAAC,cAAD;MACI,eAAaf,QAAQ,CAACa,MAD1B;MAEI,MAAM,EAAE,KAFZ;MAGI,SAAS,EAAEvB,aAHf;MAII,OAAO,EAAEU,QAAQ,CAACc,OAAT,IAAoBZ;IAJjC,GAMKF,QAAQ,CAACgB,IAAT,gBACG,6BAAC,qBAAD,qBACI,6BAAC,UAAD;MAAM,IAAI,EAAEhB,QAAQ,CAACgB;IAArB,EADJ,CADH,GAIG,IAVR,EAWKhB,QAAQ,CAACiB,KAXd,CADJ;;IAgBA,OAAOjB,QAAQ,CAACW,IAAT,GAAgBF,QAAQ,CAACM,IAAD,CAAxB,GAAiCA,IAAxC;EACH,CAhDD;AAiDH,CAlDM"}

package/modules/Navigation/renderers/MenuSectionItemRenderer.js

@@ -1,10 +1,25 @@
-import React, { useCallback } from "react";
-import { css } from "emotion";
-import { Link } from "@webiny/react-router";
-import { List, ListItem } from "@webiny/ui/List";
-import { useNavigation } from "../index";
-import { useMenuItem } from "@webiny/app-admin";
-var linkStyle = /*#__PURE__*/css({
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MenuSectionItemRenderer = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _emotion = require("emotion");
+
+var _reactRouter = require("@webiny/react-router");
+
+var _List = require("@webiny/ui/List");
+
+var _index = require("../index");
+
+var _appAdmin = require("@webiny/app-admin");
+
+var linkStyle = /*#__PURE__*/(0, _emotion.css)({
   color: "var(--mdc-theme-text-primary-on-background)",
   textDecoration: "none",
   display: "flex",
@@ -17,50 +32,51 @@ var linkStyle = /*#__PURE__*/css({
     textDecoration: "none"
   }
 }, "label:linkStyle;");
-var submenuItems = /*#__PURE__*/css({
+var submenuItems = /*#__PURE__*/(0, _emotion.css)({
   ".mdc-drawer &.mdc-list-item": {
     paddingLeft: 0,
     margin: 0,
     padding: 0
   }
 }, "label:submenuItems;");
-var submenuList = /*#__PURE__*/css({
+var submenuList = /*#__PURE__*/(0, _emotion.css)({
   "&.mdc-list": {
     padding: 0
   }
 }, "label:submenuList;");
-export var MenuSectionItemRenderer = function MenuSectionItemRenderer(PrevMenuItem) {
+
+var MenuSectionItemRenderer = function MenuSectionItemRenderer(PrevMenuItem) {
   return function MenuSectionItem() {
-    var _useNavigation = useNavigation(),
+    var _useNavigation = (0, _index.useNavigation)(),
         setVisible = _useNavigation.setVisible;
 
-    var _useMenuItem = useMenuItem(),
+    var _useMenuItem = (0, _appAdmin.useMenuItem)(),
         menuItem = _useMenuItem.menuItem,
         depth = _useMenuItem.depth;
 
-    var hideMenu = useCallback(function () {
+    var hideMenu = (0, _react.useCallback)(function () {
       return setVisible(false);
     }, []);
     var shouldRender = depth > 0 && Boolean(menuItem ? menuItem.path : false);
 
     if (!shouldRender) {
-      return /*#__PURE__*/React.createElement(PrevMenuItem, null);
+      return /*#__PURE__*/_react.default.createElement(PrevMenuItem, null);
     } else if (!menuItem) {
       // TODO @ts-refactor check if to return component or null @pavel
       console.log("MenuSectionItemRenderer returning PrevMenuItem because no menuItem variable.");
-      return /*#__PURE__*/React.createElement(PrevMenuItem, null);
+      return /*#__PURE__*/_react.default.createElement(PrevMenuItem, null);
     }
 
-    return /*#__PURE__*/React.createElement(List, {
+    return /*#__PURE__*/_react.default.createElement(_List.List, {
       className: submenuList
-    }, /*#__PURE__*/React.createElement(ListItem, {
+    }, /*#__PURE__*/_react.default.createElement(_List.ListItem, {
       className: submenuItems,
       "data-testid": menuItem.testId
-    }, menuItem.path ? /*#__PURE__*/React.createElement(Link, {
+    }, menuItem.path ? /*#__PURE__*/_react.default.createElement(_reactRouter.Link, {
       className: linkStyle,
       to: menuItem.path,
       onClick: menuItem.onClick || hideMenu
-    }, menuItem.label) : /*#__PURE__*/React.createElement("span", {
+    }, menuItem.label) : /*#__PURE__*/_react.default.createElement("span", {
       onClick: function onClick() {
         if (!menuItem.onClick) {
           return;
@@ -71,4 +87,6 @@ export var MenuSectionItemRenderer = function MenuSectionItemRenderer(PrevMenuIt
       className: linkStyle
     }, menuItem.label)));
   };
-};
+};
+
+exports.MenuSectionItemRenderer = MenuSectionItemRenderer;

package/modules/Navigation/renderers/MenuSectionItemRenderer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["MenuSectionItemRenderer.tsx"],"names":["React","useCallback","css","Link","List","ListItem","useNavigation","useMenuItem","linkStyle","color","textDecoration","display","alignItems","width","height","outline","paddingLeft","submenuItems","margin","padding","submenuList","MenuSectionItemRenderer","PrevMenuItem","MenuSectionItem","setVisible","menuItem","depth","hideMenu","shouldRender","Boolean","path","console","log","testId","onClick","label"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,WAAhB,QAAmC,OAAnC;AACA,SAASC,GAAT,QAAoB,SAApB;AACA,SAASC,IAAT,QAAqB,sBAArB;AACA,SAASC,IAAT,EAAeC,QAAf,QAA+B,iBAA/B;AACA,SAASC,aAAT;AACA,SAASC,WAAT,QAA4B,mBAA5B;AAEA,IAAMC,SAAS,gBAAGN,GAAG,CAAC;AAClBO,EAAAA,KAAK,EAAE,6CADW;AAElBC,EAAAA,cAAc,EAAE,MAFE;AAGlBC,EAAAA,OAAO,EAAE,MAHS;AAIlBC,EAAAA,UAAU,EAAE,QAJM;AAKlBC,EAAAA,KAAK,EAAE,MALW;AAMlBC,EAAAA,MAAM,EAAE,MANU;AAOlBC,EAAAA,OAAO,EAAE,MAPS;AAQlBC,EAAAA,WAAW,EAAE,EARK;AASlB,aAAW;AACPN,IAAAA,cAAc,EAAE;AADT;AATO,CAAD,qBAArB;AAcA,IAAMO,YAAY,gBAAGf,GAAG,CAAC;AACrB,iCAA+B;AAC3Bc,IAAAA,WAAW,EAAE,CADc;AAE3BE,IAAAA,MAAM,EAAE,CAFmB;AAG3BC,IAAAA,OAAO,EAAE;AAHkB;AADV,CAAD,wBAAxB;AAQA,IAAMC,WAAW,gBAAGlB,GAAG,CAAC;AACpB,gBAAc;AACViB,IAAAA,OAAO,EAAE;AADC;AADM,CAAD,uBAAvB;AAMA,OAAO,IAAME,uBAAuB,GAAG,SAA1BA,uBAA0B,CAACC,YAAD,EAAsC;AACzE,SAAO,SAASC,eAAT,GAA2B;AAC9B,yBAAuBjB,aAAa,EAApC;AAAA,QAAQkB,UAAR,kBAAQA,UAAR;;AACA,uBAA4BjB,WAAW,EAAvC;AAAA,QAAQkB,QAAR,gBAAQA,QAAR;AAAA,QAAkBC,KAAlB,gBAAkBA,KAAlB;;AAEA,QAAMC,QAAQ,GAAG1B,WAAW,CAAC;AAAA,aAAMuB,UAAU,CAAC,KAAD,CAAhB;AAAA,KAAD,EAA0B,EAA1B,CAA5B;AACA,QAAMI,YAAY,GAAGF,KAAK,GAAG,CAAR,IAAaG,OAAO,CAACJ,QAAQ,GAAGA,QAAQ,CAACK,IAAZ,GAAmB,KAA5B,CAAzC;;AAEA,QAAI,CAACF,YAAL,EAAmB;AACf,0BAAO,oBAAC,YAAD,OAAP;AACH,KAFD,MAEO,IAAI,CAACH,QAAL,EAAe;AAClB;AACAM,MAAAA,OAAO,CAACC,GAAR,CACI,8EADJ;AAGA,0BAAO,oBAAC,YAAD,OAAP;AACH;;AAED,wBACI,oBAAC,IAAD;AAAM,MAAA,SAAS,EAAEZ;AAAjB,oBACI,oBAAC,QAAD;AAAU,MAAA,SAAS,EAAEH,YAArB;AAAmC,qBAAaQ,QAAQ,CAACQ;AAAzD,OACKR,QAAQ,CAACK,IAAT,gBACG,oBAAC,IAAD;AACI,MAAA,SAAS,EAAEtB,SADf;AAEI,MAAA,EAAE,EAAEiB,QAAQ,CAACK,IAFjB;AAGI,MAAA,OAAO,EAAEL,QAAQ,CAACS,OAAT,IAAoBP;AAHjC,OAKKF,QAAQ,CAACU,KALd,CADH,gBASG;AACI,MAAA,OAAO,EAAE,mBAAM;AACX,YAAI,CAACV,QAAQ,CAACS,OAAd,EAAuB;AACnB;AACH;;AACDT,QAAAA,QAAQ,CAACS,OAAT;AACH,OANL;AAOI,MAAA,SAAS,EAAE1B;AAPf,OASKiB,QAAQ,CAACU,KATd,CAVR,CADJ,CADJ;AA2BH,GA5CD;AA6CH,CA9CM","sourcesContent":["import React, { useCallback } from \"react\";\nimport { css } from \"emotion\";\nimport { Link } from \"@webiny/react-router\";\nimport { List, ListItem } from \"@webiny/ui/List\";\nimport { useNavigation } from \"../index\";\nimport { useMenuItem } from \"@webiny/app-admin\";\n\nconst linkStyle = css({\n    color: \"var(--mdc-theme-text-primary-on-background)\",\n    textDecoration: \"none\",\n    display: \"flex\",\n    alignItems: \"center\",\n    width: \"100%\",\n    height: \"100%\",\n    outline: \"none\",\n    paddingLeft: 72,\n    \"&:hover\": {\n        textDecoration: \"none\"\n    }\n});\n\nconst submenuItems = css({\n    \".mdc-drawer &.mdc-list-item\": {\n        paddingLeft: 0,\n        margin: 0,\n        padding: 0\n    }\n});\n\nconst submenuList = css({\n    \"&.mdc-list\": {\n        padding: 0\n    }\n});\n\nexport const MenuSectionItemRenderer = (PrevMenuItem: React.FC): React.FC => {\n    return function MenuSectionItem() {\n        const { setVisible } = useNavigation();\n        const { menuItem, depth } = useMenuItem();\n\n        const hideMenu = useCallback(() => setVisible(false), []);\n        const shouldRender = depth > 0 && Boolean(menuItem ? menuItem.path : false);\n\n        if (!shouldRender) {\n            return <PrevMenuItem />;\n        } else if (!menuItem) {\n            // TODO @ts-refactor check if to return component or null @pavel\n            console.log(\n                \"MenuSectionItemRenderer returning PrevMenuItem because no menuItem variable.\"\n            );\n            return <PrevMenuItem />;\n        }\n\n        return (\n            <List className={submenuList}>\n                <ListItem className={submenuItems} data-testid={menuItem.testId}>\n                    {menuItem.path ? (\n                        <Link\n                            className={linkStyle}\n                            to={menuItem.path}\n                            onClick={menuItem.onClick || hideMenu}\n                        >\n                            {menuItem.label}\n                        </Link>\n                    ) : (\n                        <span\n                            onClick={() => {\n                                if (!menuItem.onClick) {\n                                    return;\n                                }\n                                menuItem.onClick();\n                            }}\n                            className={linkStyle}\n                        >\n                            {menuItem.label}\n                        </span>\n                    )}\n                </ListItem>\n            </List>\n        );\n    };\n};\n"]}
+{"version":3,"names":["linkStyle","css","color","textDecoration","display","alignItems","width","height","outline","paddingLeft","submenuItems","margin","padding","submenuList","MenuSectionItemRenderer","PrevMenuItem","MenuSectionItem","useNavigation","setVisible","useMenuItem","menuItem","depth","hideMenu","useCallback","shouldRender","Boolean","path","console","log","testId","onClick","label"],"sources":["MenuSectionItemRenderer.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { css } from \"emotion\";\nimport { Link } from \"@webiny/react-router\";\nimport { List, ListItem } from \"@webiny/ui/List\";\nimport { useNavigation } from \"../index\";\nimport { useMenuItem } from \"@webiny/app-admin\";\n\nconst linkStyle = css({\n    color: \"var(--mdc-theme-text-primary-on-background)\",\n    textDecoration: \"none\",\n    display: \"flex\",\n    alignItems: \"center\",\n    width: \"100%\",\n    height: \"100%\",\n    outline: \"none\",\n    paddingLeft: 72,\n    \"&:hover\": {\n        textDecoration: \"none\"\n    }\n});\n\nconst submenuItems = css({\n    \".mdc-drawer &.mdc-list-item\": {\n        paddingLeft: 0,\n        margin: 0,\n        padding: 0\n    }\n});\n\nconst submenuList = css({\n    \"&.mdc-list\": {\n        padding: 0\n    }\n});\n\nexport const MenuSectionItemRenderer = (PrevMenuItem: React.FC): React.FC => {\n    return function MenuSectionItem() {\n        const { setVisible } = useNavigation();\n        const { menuItem, depth } = useMenuItem();\n\n        const hideMenu = useCallback(() => setVisible(false), []);\n        const shouldRender = depth > 0 && Boolean(menuItem ? menuItem.path : false);\n\n        if (!shouldRender) {\n            return <PrevMenuItem />;\n        } else if (!menuItem) {\n            // TODO @ts-refactor check if to return component or null @pavel\n            console.log(\n                \"MenuSectionItemRenderer returning PrevMenuItem because no menuItem variable.\"\n            );\n            return <PrevMenuItem />;\n        }\n\n        return (\n            <List className={submenuList}>\n                <ListItem className={submenuItems} data-testid={menuItem.testId}>\n                    {menuItem.path ? (\n                        <Link\n                            className={linkStyle}\n                            to={menuItem.path}\n                            onClick={menuItem.onClick || hideMenu}\n                        >\n                            {menuItem.label}\n                        </Link>\n                    ) : (\n                        <span\n                            onClick={() => {\n                                if (!menuItem.onClick) {\n                                    return;\n                                }\n                                menuItem.onClick();\n                            }}\n                            className={linkStyle}\n                        >\n                            {menuItem.label}\n                        </span>\n                    )}\n                </ListItem>\n            </List>\n        );\n    };\n};\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA,IAAMA,SAAS,gBAAG,IAAAC,YAAA,EAAI;EAClBC,KAAK,EAAE,6CADW;EAElBC,cAAc,EAAE,MAFE;EAGlBC,OAAO,EAAE,MAHS;EAIlBC,UAAU,EAAE,QAJM;EAKlBC,KAAK,EAAE,MALW;EAMlBC,MAAM,EAAE,MANU;EAOlBC,OAAO,EAAE,MAPS;EAQlBC,WAAW,EAAE,EARK;EASlB,WAAW;IACPN,cAAc,EAAE;EADT;AATO,CAAJ,qBAAlB;AAcA,IAAMO,YAAY,gBAAG,IAAAT,YAAA,EAAI;EACrB,+BAA+B;IAC3BQ,WAAW,EAAE,CADc;IAE3BE,MAAM,EAAE,CAFmB;IAG3BC,OAAO,EAAE;EAHkB;AADV,CAAJ,wBAArB;AAQA,IAAMC,WAAW,gBAAG,IAAAZ,YAAA,EAAI;EACpB,cAAc;IACVW,OAAO,EAAE;EADC;AADM,CAAJ,uBAApB;;AAMO,IAAME,uBAAuB,GAAG,SAA1BA,uBAA0B,CAACC,YAAD,EAAsC;EACzE,OAAO,SAASC,eAAT,GAA2B;IAC9B,qBAAuB,IAAAC,oBAAA,GAAvB;IAAA,IAAQC,UAAR,kBAAQA,UAAR;;IACA,mBAA4B,IAAAC,qBAAA,GAA5B;IAAA,IAAQC,QAAR,gBAAQA,QAAR;IAAA,IAAkBC,KAAlB,gBAAkBA,KAAlB;;IAEA,IAAMC,QAAQ,GAAG,IAAAC,kBAAA,EAAY;MAAA,OAAML,UAAU,CAAC,KAAD,CAAhB;IAAA,CAAZ,EAAqC,EAArC,CAAjB;IACA,IAAMM,YAAY,GAAGH,KAAK,GAAG,CAAR,IAAaI,OAAO,CAACL,QAAQ,GAAGA,QAAQ,CAACM,IAAZ,GAAmB,KAA5B,CAAzC;;IAEA,IAAI,CAACF,YAAL,EAAmB;MACf,oBAAO,6BAAC,YAAD,OAAP;IACH,CAFD,MAEO,IAAI,CAACJ,QAAL,EAAe;MAClB;MACAO,OAAO,CAACC,GAAR,CACI,8EADJ;MAGA,oBAAO,6BAAC,YAAD,OAAP;IACH;;IAED,oBACI,6BAAC,UAAD;MAAM,SAAS,EAAEf;IAAjB,gBACI,6BAAC,cAAD;MAAU,SAAS,EAAEH,YAArB;MAAmC,eAAaU,QAAQ,CAACS;IAAzD,GACKT,QAAQ,CAACM,IAAT,gBACG,6BAAC,iBAAD;MACI,SAAS,EAAE1B,SADf;MAEI,EAAE,EAAEoB,QAAQ,CAACM,IAFjB;MAGI,OAAO,EAAEN,QAAQ,CAACU,OAAT,IAAoBR;IAHjC,GAKKF,QAAQ,CAACW,KALd,CADH,gBASG;MACI,OAAO,EAAE,mBAAM;QACX,IAAI,CAACX,QAAQ,CAACU,OAAd,EAAuB;UACnB;QACH;;QACDV,QAAQ,CAACU,OAAT;MACH,CANL;MAOI,SAAS,EAAE9B;IAPf,GASKoB,QAAQ,CAACW,KATd,CAVR,CADJ,CADJ;EA2BH,CA5CD;AA6CH,CA9CM"}

package/modules/Navigation/renderers/MenuSectionRenderer.js

@@ -1,45 +1,61 @@
-import React, { Fragment } from "react";
-import { css } from "emotion";
-import { Typography } from "@webiny/ui/Typography";
-import { MenuItems, useMenuItem } from "@webiny/app-admin";
-var menuSectionTitle = /*#__PURE__*/css({
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MenuSectionRenderer = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _emotion = require("emotion");
+
+var _Typography = require("@webiny/ui/Typography");
+
+var _appAdmin = require("@webiny/app-admin");
+
+var menuSectionTitle = /*#__PURE__*/(0, _emotion.css)({
   marginLeft: 20,
   display: "flex",
   alignItems: "center",
   color: "var(--mdc-theme-on-surface)"
 }, "label:menuSectionTitle;");
-var iconWrapper = /*#__PURE__*/css({
+var iconWrapper = /*#__PURE__*/(0, _emotion.css)({
   marginRight: 5,
   color: "var(--mdc-theme-on-surface)"
 }, "label:iconWrapper;");
-export var MenuSectionRenderer = function MenuSectionRenderer(PrevMenuItem) {
+
+var MenuSectionRenderer = function MenuSectionRenderer(PrevMenuItem) {
   return function MenuSection() {
-    var _useMenuItem = useMenuItem(),
+    var _useMenuItem = (0, _appAdmin.useMenuItem)(),
         menuItem = _useMenuItem.menuItem,
         depth = _useMenuItem.depth;
 
     var shouldRender = depth === 1 && menuItem && menuItem.children.length > 0;
 
     if (!shouldRender) {
-      return /*#__PURE__*/React.createElement(PrevMenuItem, null);
+      return /*#__PURE__*/_react.default.createElement(PrevMenuItem, null);
     } else if (!menuItem) {
       // TODO @ts-refactor check if to return component or null @pavel
       console.log("MenuSectionRenderer returning PrevMenuItem because no menuItem variable.");
-      return /*#__PURE__*/React.createElement(PrevMenuItem, null);
+      return /*#__PURE__*/_react.default.createElement(PrevMenuItem, null);
     }
 
     if (!menuItem.children.length) {
       return null;
     }
 
-    return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
       className: menuSectionTitle
-    }, /*#__PURE__*/React.createElement("div", {
+    }, /*#__PURE__*/_react.default.createElement("div", {
       className: iconWrapper
-    }, menuItem.icon), /*#__PURE__*/React.createElement(Typography, {
+    }, menuItem.icon), /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
       use: "overline"
-    }, menuItem.label)), /*#__PURE__*/React.createElement(MenuItems, {
+    }, menuItem.label)), /*#__PURE__*/_react.default.createElement(_appAdmin.MenuItems, {
       menuItems: menuItem.children
     }));
   };
-};
+};
+
+exports.MenuSectionRenderer = MenuSectionRenderer;

package/modules/Navigation/renderers/MenuSectionRenderer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["MenuSectionRenderer.tsx"],"names":["React","Fragment","css","Typography","MenuItems","useMenuItem","menuSectionTitle","marginLeft","display","alignItems","color","iconWrapper","marginRight","MenuSectionRenderer","PrevMenuItem","MenuSection","menuItem","depth","shouldRender","children","length","console","log","icon","label"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,QAAhB,QAAgC,OAAhC;AACA,SAASC,GAAT,QAAoB,SAApB;AACA,SAASC,UAAT,QAA2B,uBAA3B;AACA,SAASC,SAAT,EAAoBC,WAApB,QAAuC,mBAAvC;AAEA,IAAMC,gBAAgB,gBAAGJ,GAAG,CAAC;AACzBK,EAAAA,UAAU,EAAE,EADa;AAEzBC,EAAAA,OAAO,EAAE,MAFgB;AAGzBC,EAAAA,UAAU,EAAE,QAHa;AAIzBC,EAAAA,KAAK,EAAE;AAJkB,CAAD,4BAA5B;AAOA,IAAMC,WAAW,gBAAGT,GAAG,CAAC;AACpBU,EAAAA,WAAW,EAAE,CADO;AAEpBF,EAAAA,KAAK,EAAE;AAFa,CAAD,uBAAvB;AAKA,OAAO,IAAMG,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACC,YAAD,EAAsC;AACrE,SAAO,SAASC,WAAT,GAAuB;AAC1B,uBAA4BV,WAAW,EAAvC;AAAA,QAAQW,QAAR,gBAAQA,QAAR;AAAA,QAAkBC,KAAlB,gBAAkBA,KAAlB;;AAEA,QAAMC,YAAY,GAAGD,KAAK,KAAK,CAAV,IAAeD,QAAf,IAA2BA,QAAQ,CAACG,QAAT,CAAkBC,MAAlB,GAA2B,CAA3E;;AAEA,QAAI,CAACF,YAAL,EAAmB;AACf,0BAAO,oBAAC,YAAD,OAAP;AACH,KAFD,MAEO,IAAI,CAACF,QAAL,EAAe;AAClB;AACAK,MAAAA,OAAO,CAACC,GAAR,CAAY,0EAAZ;AACA,0BAAO,oBAAC,YAAD,OAAP;AACH;;AAED,QAAI,CAACN,QAAQ,CAACG,QAAT,CAAkBC,MAAvB,EAA+B;AAC3B,aAAO,IAAP;AACH;;AAED,wBACI,oBAAC,QAAD,qBACI;AAAK,MAAA,SAAS,EAAEd;AAAhB,oBACI;AAAK,MAAA,SAAS,EAAEK;AAAhB,OAA8BK,QAAQ,CAACO,IAAvC,CADJ,eAEI,oBAAC,UAAD;AAAY,MAAA,GAAG,EAAC;AAAhB,OAA4BP,QAAQ,CAACQ,KAArC,CAFJ,CADJ,eAKI,oBAAC,SAAD;AAAW,MAAA,SAAS,EAAER,QAAQ,CAACG;AAA/B,MALJ,CADJ;AASH,GA1BD;AA2BH,CA5BM","sourcesContent":["import React, { Fragment } from \"react\";\nimport { css } from \"emotion\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { MenuItems, useMenuItem } from \"@webiny/app-admin\";\n\nconst menuSectionTitle = css({\n    marginLeft: 20,\n    display: \"flex\",\n    alignItems: \"center\",\n    color: \"var(--mdc-theme-on-surface)\"\n});\n\nconst iconWrapper = css({\n    marginRight: 5,\n    color: \"var(--mdc-theme-on-surface)\"\n});\n\nexport const MenuSectionRenderer = (PrevMenuItem: React.FC): React.FC => {\n    return function MenuSection() {\n        const { menuItem, depth } = useMenuItem();\n\n        const shouldRender = depth === 1 && menuItem && menuItem.children.length > 0;\n\n        if (!shouldRender) {\n            return <PrevMenuItem />;\n        } else if (!menuItem) {\n            // TODO @ts-refactor check if to return component or null @pavel\n            console.log(\"MenuSectionRenderer returning PrevMenuItem because no menuItem variable.\");\n            return <PrevMenuItem />;\n        }\n\n        if (!menuItem.children.length) {\n            return null;\n        }\n\n        return (\n            <Fragment>\n                <div className={menuSectionTitle}>\n                    <div className={iconWrapper}>{menuItem.icon}</div>\n                    <Typography use=\"overline\">{menuItem.label}</Typography>\n                </div>\n                <MenuItems menuItems={menuItem.children} />\n            </Fragment>\n        );\n    };\n};\n"]}
+{"version":3,"names":["menuSectionTitle","css","marginLeft","display","alignItems","color","iconWrapper","marginRight","MenuSectionRenderer","PrevMenuItem","MenuSection","useMenuItem","menuItem","depth","shouldRender","children","length","console","log","icon","label"],"sources":["MenuSectionRenderer.tsx"],"sourcesContent":["import React, { Fragment } from \"react\";\nimport { css } from \"emotion\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { MenuItems, useMenuItem } from \"@webiny/app-admin\";\n\nconst menuSectionTitle = css({\n    marginLeft: 20,\n    display: \"flex\",\n    alignItems: \"center\",\n    color: \"var(--mdc-theme-on-surface)\"\n});\n\nconst iconWrapper = css({\n    marginRight: 5,\n    color: \"var(--mdc-theme-on-surface)\"\n});\n\nexport const MenuSectionRenderer = (PrevMenuItem: React.FC): React.FC => {\n    return function MenuSection() {\n        const { menuItem, depth } = useMenuItem();\n\n        const shouldRender = depth === 1 && menuItem && menuItem.children.length > 0;\n\n        if (!shouldRender) {\n            return <PrevMenuItem />;\n        } else if (!menuItem) {\n            // TODO @ts-refactor check if to return component or null @pavel\n            console.log(\"MenuSectionRenderer returning PrevMenuItem because no menuItem variable.\");\n            return <PrevMenuItem />;\n        }\n\n        if (!menuItem.children.length) {\n            return null;\n        }\n\n        return (\n            <Fragment>\n                <div className={menuSectionTitle}>\n                    <div className={iconWrapper}>{menuItem.icon}</div>\n                    <Typography use=\"overline\">{menuItem.label}</Typography>\n                </div>\n                <MenuItems menuItems={menuItem.children} />\n            </Fragment>\n        );\n    };\n};\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA,IAAMA,gBAAgB,gBAAG,IAAAC,YAAA,EAAI;EACzBC,UAAU,EAAE,EADa;EAEzBC,OAAO,EAAE,MAFgB;EAGzBC,UAAU,EAAE,QAHa;EAIzBC,KAAK,EAAE;AAJkB,CAAJ,4BAAzB;AAOA,IAAMC,WAAW,gBAAG,IAAAL,YAAA,EAAI;EACpBM,WAAW,EAAE,CADO;EAEpBF,KAAK,EAAE;AAFa,CAAJ,uBAApB;;AAKO,IAAMG,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACC,YAAD,EAAsC;EACrE,OAAO,SAASC,WAAT,GAAuB;IAC1B,mBAA4B,IAAAC,qBAAA,GAA5B;IAAA,IAAQC,QAAR,gBAAQA,QAAR;IAAA,IAAkBC,KAAlB,gBAAkBA,KAAlB;;IAEA,IAAMC,YAAY,GAAGD,KAAK,KAAK,CAAV,IAAeD,QAAf,IAA2BA,QAAQ,CAACG,QAAT,CAAkBC,MAAlB,GAA2B,CAA3E;;IAEA,IAAI,CAACF,YAAL,EAAmB;MACf,oBAAO,6BAAC,YAAD,OAAP;IACH,CAFD,MAEO,IAAI,CAACF,QAAL,EAAe;MAClB;MACAK,OAAO,CAACC,GAAR,CAAY,0EAAZ;MACA,oBAAO,6BAAC,YAAD,OAAP;IACH;;IAED,IAAI,CAACN,QAAQ,CAACG,QAAT,CAAkBC,MAAvB,EAA+B;MAC3B,OAAO,IAAP;IACH;;IAED,oBACI,6BAAC,eAAD,qBACI;MAAK,SAAS,EAAEhB;IAAhB,gBACI;MAAK,SAAS,EAAEM;IAAhB,GAA8BM,QAAQ,CAACO,IAAvC,CADJ,eAEI,6BAAC,sBAAD;MAAY,GAAG,EAAC;IAAhB,GAA4BP,QAAQ,CAACQ,KAArC,CAFJ,CADJ,eAKI,6BAAC,mBAAD;MAAW,SAAS,EAAER,QAAQ,CAACG;IAA/B,EALJ,CADJ;EASH,CA1BD;AA2BH,CA5BM"}