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

package/modules/Navigation/index.js

@@ -1,71 +1,53 @@
 "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.NavigationImpl = exports.Navigation = void 0;
 exports.useNavigation = useNavigation;
-
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _react = _interopRequireWildcard(require("react"));
-
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _Drawer = require("@webiny/ui/Drawer");
-
 var _appAdmin = require("@webiny/app-admin");
-
 var _Hamburger = _interopRequireDefault(require("./Hamburger"));
-
 var _MenuGroupRenderer = require("./renderers/MenuGroupRenderer");
-
 var _MenuSectionItemRenderer = require("./renderers/MenuSectionItemRenderer");
-
 var _MenuSectionRenderer = require("./renderers/MenuSectionRenderer");
-
 var _MenuLinkRenderer = require("./renderers/MenuLinkRenderer");
-
 var _MenuElementRenderer = require("./renderers/MenuElementRenderer");
-
 var _List = require("@webiny/ui/List");
-
 var _Styled = require("./Styled");
-
 var _config = require("@webiny/app/config");
-
 var _Typography = require("@webiny/ui/Typography");
-
+var AutoWidthDrawer = /*#__PURE__*/(0, _styled.default)(_Drawer.Drawer, {
+  label: "AutoWidthDrawer",
+  target: "e17n5u7b0"
+})("width:auto;");
 var NavigationContext = /*#__PURE__*/_react.default.createContext({
   visible: false,
   setVisible: function setVisible() {
     return void 0;
   }
 });
-
 NavigationContext.displayName = "NavigationContext";
-
 function useNavigation() {
   return (0, _react.useContext)(NavigationContext);
 }
-
 var BrandImpl = function BrandImpl(Brand) {
   return function BrandWithHamburger() {
     return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_Hamburger.default, null), /*#__PURE__*/_react.default.createElement(Brand, null));
   };
 };
-
 var NavigationProvider = function NavigationProvider(Component) {
   return function NavigationProvider(props) {
     var _useState = (0, _react.useState)(false),
-        _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-        visible = _useState2[0],
-        setVisible = _useState2[1];
-
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      visible = _useState2[0],
+      setVisible = _useState2[1];
     var context = (0, _react.useMemo)(function () {
       return {
         visible: visible,
@@ -77,16 +59,13 @@ var NavigationProvider = function NavigationProvider(Component) {
     }, /*#__PURE__*/_react.default.createElement(Component, props));
   };
 };
-
 var NavigationImpl = function NavigationImpl() {
   return function Navigation() {
     var _useAdminNavigation = (0, _appAdmin.useNavigation)(),
-        menuItems = _useAdminNavigation.menuItems;
-
+      menuItems = _useAdminNavigation.menuItems;
     var _useNavigation = useNavigation(),
-        visible = _useNavigation.visible,
-        setVisible = _useNavigation.setVisible;
-
+      visible = _useNavigation.visible,
+      setVisible = _useNavigation.setVisible;
     var hideDrawer = (0, _react.useCallback)(function () {
       setVisible(false);
     }, []);
@@ -100,10 +79,8 @@ var NavigationImpl = function NavigationImpl() {
         return (m.tags || []).includes("footer");
       });
     }, [menuItems]);
-
     var wbyVersion = _config.config.getKey("WEBINY_VERSION", process.env.REACT_APP_WEBINY_VERSION);
-
-    return /*#__PURE__*/_react.default.createElement(_Drawer.Drawer, {
+    return /*#__PURE__*/_react.default.createElement(AutoWidthDrawer, {
       modal: true,
       open: visible,
       onClose: hideDrawer
@@ -125,25 +102,19 @@ var NavigationImpl = function NavigationImpl() {
     }, "Webiny v", wbyVersion)))));
   };
 };
-
 exports.NavigationImpl = NavigationImpl;
-
 var menuSorter = function menuSorter(a, b) {
   if (a.pin === b.pin) {
     return (a.label || "").localeCompare(b.label || "");
   }
-
   if (a.pin) {
     return a.pin === "first" ? -1 : 1;
   }
-
   if (b.pin) {
     return b.pin === "first" ? 1 : -1;
   }
-
   return (a.label || "").localeCompare(b.label || "");
 };
-
 var SortedMenuItems = function SortedMenuItems(MenuItems) {
   return function SortedMenuItems(_ref) {
     var menuItems = _ref.menuItems;
@@ -152,7 +123,6 @@ var SortedMenuItems = function SortedMenuItems(MenuItems) {
     });
   };
 };
-
 var Navigation = function Navigation() {
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_appAdmin.Provider, {
     hoc: NavigationProvider
@@ -170,5 +140,4 @@ var Navigation = function Navigation() {
     with: [_MenuGroupRenderer.MenuGroupRenderer, _MenuSectionItemRenderer.MenuSectionItemRenderer, _MenuSectionRenderer.MenuSectionRenderer, _MenuLinkRenderer.MenuLinkRenderer, _MenuElementRenderer.MenuElementRenderer]
   }));
 };
-
 exports.Navigation = Navigation;

package/modules/Navigation/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["NavigationContext","React","createContext","visible","setVisible","displayName","useNavigation","useContext","BrandImpl","Brand","BrandWithHamburger","NavigationProvider","Component","props","useState","context","useMemo","NavigationImpl","Navigation","useAdminNavigation","menuItems","hideDrawer","useCallback","mainMenu","filter","m","tags","includes","footerMenu","wbyVersion","appConfig","getKey","process","env","REACT_APP_WEBINY_VERSION","navHeader","navContent","subFooter","menuSorter","a","b","pin","label","localeCompare","SortedMenuItems","MenuItems","sort","NavigationSpec","BrandSpec","MenuItemRenderer","MenuGroupRenderer","MenuSectionItemRenderer","MenuSectionRenderer","MenuLinkRenderer","MenuElementRenderer"],"sources":["index.tsx"],"sourcesContent":["import React, { Fragment, useCallback, useContext, useMemo, useState } from \"react\";\nimport { Drawer, DrawerContent, DrawerHeader } from \"@webiny/ui/Drawer\";\nimport {\n    Compose,\n    Provider,\n    NavigationRenderer as NavigationSpec,\n    MenuItems,\n    MenuItemRenderer,\n    Brand as BrandSpec,\n    useNavigation as useAdminNavigation,\n    MenuData,\n    MenuItemsProps,\n    HigherOrderComponent\n} from \"@webiny/app-admin\";\nimport Hamburger from \"./Hamburger\";\nimport { MenuGroupRenderer } from \"./renderers/MenuGroupRenderer\";\nimport { MenuSectionItemRenderer } from \"./renderers/MenuSectionItemRenderer\";\nimport { MenuSectionRenderer } from \"./renderers/MenuSectionRenderer\";\nimport { MenuLinkRenderer } from \"./renderers/MenuLinkRenderer\";\nimport { MenuElementRenderer } from \"./renderers/MenuElementRenderer\";\nimport { List, ListItem } from \"@webiny/ui/List\";\nimport { MenuFooter, subFooter, MenuHeader, navHeader, navContent } from \"./Styled\";\nimport { config as appConfig } from \"@webiny/app/config\";\nimport { Typography } from \"@webiny/ui/Typography\";\n\ninterface NavigationContext {\n    visible: boolean;\n    setVisible(visible: boolean): void;\n}\n\nconst NavigationContext = React.createContext<NavigationContext>({\n    visible: false,\n    setVisible: () => {\n        return void 0;\n    }\n});\nNavigationContext.displayName = \"NavigationContext\";\n\nexport function useNavigation(): NavigationContext {\n    return useContext(NavigationContext);\n}\n\nconst BrandImpl: HigherOrderComponent = Brand => {\n    return function BrandWithHamburger() {\n        return (\n            <Fragment>\n                <Hamburger />\n                <Brand />\n            </Fragment>\n        );\n    };\n};\n\nconst NavigationProvider = (Component: React.FC): React.FC => {\n    return function NavigationProvider(props) {\n        const [visible, setVisible] = useState(false);\n\n        const context = useMemo(() => ({ visible, setVisible }), [visible]);\n\n        return (\n            <NavigationContext.Provider value={context}>\n                <Component {...props} />\n            </NavigationContext.Provider>\n        );\n    };\n};\n\nexport const NavigationImpl = (): React.FC => {\n    return function Navigation() {\n        const { menuItems } = useAdminNavigation();\n        const { visible, setVisible } = useNavigation();\n\n        const hideDrawer = useCallback(() => {\n            setVisible(false);\n        }, []);\n\n        const mainMenu = useMemo(\n            () => menuItems.filter(m => !(m.tags || []).includes(\"footer\")),\n            [menuItems]\n        );\n\n        const footerMenu = useMemo(\n            () => menuItems.filter(m => (m.tags || []).includes(\"footer\")),\n            [menuItems]\n        );\n\n        const wbyVersion = appConfig.getKey(\"WEBINY_VERSION\", process.env.REACT_APP_WEBINY_VERSION);\n\n        return (\n            <Drawer modal open={visible} onClose={hideDrawer}>\n                <DrawerHeader className={navHeader}>\n                    <MenuHeader>\n                        <BrandSpec />\n                    </MenuHeader>\n                </DrawerHeader>\n                <DrawerContent className={navContent}>\n                    <MenuItems menuItems={mainMenu} />\n                </DrawerContent>\n                <MenuFooter>\n                    <List nonInteractive>\n                        <MenuItems menuItems={footerMenu} />\n                        <ListItem ripple={false} className={subFooter}>\n                            <Typography use={\"body2\"}>Webiny v{wbyVersion}</Typography>\n                        </ListItem>\n                    </List>\n                </MenuFooter>\n            </Drawer>\n        );\n    };\n};\n\nconst menuSorter = (a: MenuData, b: MenuData): number => {\n    if (a.pin === b.pin) {\n        return (a.label || \"\").localeCompare(b.label || \"\");\n    }\n\n    if (a.pin) {\n        return a.pin === \"first\" ? -1 : 1;\n    }\n\n    if (b.pin) {\n        return b.pin === \"first\" ? 1 : -1;\n    }\n\n    return (a.label || \"\").localeCompare(b.label || \"\");\n};\n\nconst SortedMenuItems: HigherOrderComponent<MenuItemsProps> = MenuItems => {\n    return function SortedMenuItems({ menuItems }) {\n        return <MenuItems menuItems={[...menuItems].sort(menuSorter)} />;\n    };\n};\n\nexport const Navigation: React.FC = () => {\n    return (\n        <Fragment>\n            <Provider hoc={NavigationProvider} />\n            <Compose component={NavigationSpec} with={NavigationImpl} />\n            <Compose component={MenuItems} with={SortedMenuItems} />\n            <Compose component={BrandSpec} with={BrandImpl} />\n            <Compose\n                component={MenuItemRenderer}\n                with={[\n                    MenuGroupRenderer,\n                    MenuSectionItemRenderer,\n                    MenuSectionRenderer,\n                    MenuLinkRenderer,\n                    MenuElementRenderer\n                ]}\n            />\n        </Fragment>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["AutoWidthDrawer","styled","Drawer","NavigationContext","React","createContext","visible","setVisible","displayName","useNavigation","useContext","BrandImpl","Brand","BrandWithHamburger","NavigationProvider","Component","props","useState","context","useMemo","NavigationImpl","Navigation","useAdminNavigation","menuItems","hideDrawer","useCallback","mainMenu","filter","m","tags","includes","footerMenu","wbyVersion","appConfig","getKey","process","env","REACT_APP_WEBINY_VERSION","navHeader","navContent","subFooter","menuSorter","a","b","pin","label","localeCompare","SortedMenuItems","MenuItems","sort","NavigationSpec","BrandSpec","MenuItemRenderer","MenuGroupRenderer","MenuSectionItemRenderer","MenuSectionRenderer","MenuLinkRenderer","MenuElementRenderer"],"sources":["index.tsx"],"sourcesContent":["import React, { Fragment, useCallback, useContext, useMemo, useState } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { Drawer, DrawerContent, DrawerHeader } from \"@webiny/ui/Drawer\";\nimport {\n    Compose,\n    Provider,\n    NavigationRenderer as NavigationSpec,\n    MenuItems,\n    MenuItemRenderer,\n    Brand as BrandSpec,\n    useNavigation as useAdminNavigation,\n    MenuData,\n    MenuItemsProps,\n    HigherOrderComponent\n} from \"@webiny/app-admin\";\nimport Hamburger from \"./Hamburger\";\nimport { MenuGroupRenderer } from \"./renderers/MenuGroupRenderer\";\nimport { MenuSectionItemRenderer } from \"./renderers/MenuSectionItemRenderer\";\nimport { MenuSectionRenderer } from \"./renderers/MenuSectionRenderer\";\nimport { MenuLinkRenderer } from \"./renderers/MenuLinkRenderer\";\nimport { MenuElementRenderer } from \"./renderers/MenuElementRenderer\";\nimport { List, ListItem } from \"@webiny/ui/List\";\nimport { MenuFooter, subFooter, MenuHeader, navHeader, navContent } from \"./Styled\";\nimport { config as appConfig } from \"@webiny/app/config\";\nimport { Typography } from \"@webiny/ui/Typography\";\n\nconst AutoWidthDrawer = styled(Drawer)`\n    width: auto;\n`;\n\ninterface NavigationContext {\n    visible: boolean;\n    setVisible(visible: boolean): void;\n}\n\nconst NavigationContext = React.createContext<NavigationContext>({\n    visible: false,\n    setVisible: () => {\n        return void 0;\n    }\n});\nNavigationContext.displayName = \"NavigationContext\";\n\nexport function useNavigation(): NavigationContext {\n    return useContext(NavigationContext);\n}\n\nconst BrandImpl: HigherOrderComponent = Brand => {\n    return function BrandWithHamburger() {\n        return (\n            <Fragment>\n                <Hamburger />\n                <Brand />\n            </Fragment>\n        );\n    };\n};\n\nconst NavigationProvider = (Component: React.FC): React.FC => {\n    return function NavigationProvider(props) {\n        const [visible, setVisible] = useState(false);\n\n        const context = useMemo(() => ({ visible, setVisible }), [visible]);\n\n        return (\n            <NavigationContext.Provider value={context}>\n                <Component {...props} />\n            </NavigationContext.Provider>\n        );\n    };\n};\n\nexport const NavigationImpl = (): React.FC => {\n    return function Navigation() {\n        const { menuItems } = useAdminNavigation();\n        const { visible, setVisible } = useNavigation();\n\n        const hideDrawer = useCallback(() => {\n            setVisible(false);\n        }, []);\n\n        const mainMenu = useMemo(\n            () => menuItems.filter(m => !(m.tags || []).includes(\"footer\")),\n            [menuItems]\n        );\n\n        const footerMenu = useMemo(\n            () => menuItems.filter(m => (m.tags || []).includes(\"footer\")),\n            [menuItems]\n        );\n\n        const wbyVersion = appConfig.getKey(\"WEBINY_VERSION\", process.env.REACT_APP_WEBINY_VERSION);\n\n        return (\n            <AutoWidthDrawer modal open={visible} onClose={hideDrawer}>\n                <DrawerHeader className={navHeader}>\n                    <MenuHeader>\n                        <BrandSpec />\n                    </MenuHeader>\n                </DrawerHeader>\n                <DrawerContent className={navContent}>\n                    <MenuItems menuItems={mainMenu} />\n                </DrawerContent>\n                <MenuFooter>\n                    <List nonInteractive>\n                        <MenuItems menuItems={footerMenu} />\n                        <ListItem ripple={false} className={subFooter}>\n                            <Typography use={\"body2\"}>Webiny v{wbyVersion}</Typography>\n                        </ListItem>\n                    </List>\n                </MenuFooter>\n            </AutoWidthDrawer>\n        );\n    };\n};\n\nconst menuSorter = (a: MenuData, b: MenuData): number => {\n    if (a.pin === b.pin) {\n        return (a.label || \"\").localeCompare(b.label || \"\");\n    }\n\n    if (a.pin) {\n        return a.pin === \"first\" ? -1 : 1;\n    }\n\n    if (b.pin) {\n        return b.pin === \"first\" ? 1 : -1;\n    }\n\n    return (a.label || \"\").localeCompare(b.label || \"\");\n};\n\nconst SortedMenuItems: HigherOrderComponent<MenuItemsProps> = MenuItems => {\n    return function SortedMenuItems({ menuItems }) {\n        return <MenuItems menuItems={[...menuItems].sort(menuSorter)} />;\n    };\n};\n\nexport const Navigation: React.FC = () => {\n    return (\n        <Fragment>\n            <Provider hoc={NavigationProvider} />\n            <Compose component={NavigationSpec} with={NavigationImpl} />\n            <Compose component={MenuItems} with={SortedMenuItems} />\n            <Compose component={BrandSpec} with={BrandImpl} />\n            <Compose\n                component={MenuItemRenderer}\n                with={[\n                    MenuGroupRenderer,\n                    MenuSectionItemRenderer,\n                    MenuSectionRenderer,\n                    MenuLinkRenderer,\n                    MenuElementRenderer\n                ]}\n            />\n        </Fragment>\n    );\n};\n"],"mappings":"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"}

package/modules/Navigation/renderers/MenuElementRenderer.js

@@ -1,27 +1,20 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MenuElementRenderer = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _appAdmin = require("@webiny/app-admin");
-
 var MenuElementRenderer = function MenuElementRenderer(PrevMenuItem) {
   return function MenuComponent() {
     var _useMenuItem = (0, _appAdmin.useMenuItem)(),
-        menuItem = _useMenuItem.menuItem;
-
+      menuItem = _useMenuItem.menuItem;
     if (!menuItem || !menuItem.element) {
       return /*#__PURE__*/_react.default.createElement(PrevMenuItem, null);
     }
-
     return menuItem.element;
   };
 };
-
 exports.MenuElementRenderer = MenuElementRenderer;

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

@@ -1 +1 @@
-{"version":3,"names":["MenuElementRenderer","PrevMenuItem","MenuComponent","useMenuItem","menuItem","element"],"sources":["MenuElementRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { useMenuItem } from \"@webiny/app-admin\";\n\nexport const MenuElementRenderer = (PrevMenuItem: React.FC): React.FC => {\n    return function MenuComponent() {\n        const { menuItem } = useMenuItem();\n        if (!menuItem || !menuItem.element) {\n            return <PrevMenuItem />;\n        }\n\n        return menuItem.element;\n    };\n};\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEO,IAAMA,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACC,YAAD,EAAsC;EACrE,OAAO,SAASC,aAAT,GAAyB;IAC5B,mBAAqB,IAAAC,qBAAA,GAArB;IAAA,IAAQC,QAAR,gBAAQA,QAAR;;IACA,IAAI,CAACA,QAAD,IAAa,CAACA,QAAQ,CAACC,OAA3B,EAAoC;MAChC,oBAAO,6BAAC,YAAD,OAAP;IACH;;IAED,OAAOD,QAAQ,CAACC,OAAhB;EACH,CAPD;AAQH,CATM"}
+{"version":3,"names":["MenuElementRenderer","PrevMenuItem","MenuComponent","useMenuItem","menuItem","element"],"sources":["MenuElementRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { useMenuItem } from \"@webiny/app-admin\";\n\nexport const MenuElementRenderer = (PrevMenuItem: React.FC): React.FC => {\n    return function MenuComponent() {\n        const { menuItem } = useMenuItem();\n        if (!menuItem || !menuItem.element) {\n            return <PrevMenuItem />;\n        }\n\n        return menuItem.element;\n    };\n};\n"],"mappings":";;;;;;;AAAA;AACA;AAEO,IAAMA,mBAAmB,GAAG,SAAtBA,mBAAmB,CAAIC,YAAsB,EAAe;EACrE,OAAO,SAASC,aAAa,GAAG;IAC5B,mBAAqB,IAAAC,qBAAW,GAAE;MAA1BC,QAAQ,gBAARA,QAAQ;IAChB,IAAI,CAACA,QAAQ,IAAI,CAACA,QAAQ,CAACC,OAAO,EAAE;MAChC,oBAAO,6BAAC,YAAY,OAAG;IAC3B;IAEA,OAAOD,QAAQ,CAACC,OAAO;EAC3B,CAAC;AACL,CAAC;AAAC"}

package/modules/Navigation/renderers/MenuGroupRenderer.js

@@ -1,44 +1,26 @@
 "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,
@@ -75,40 +57,31 @@ var menuTitleActive = /*#__PURE__*/(0, _emotion.css)({
   backgroundColor: "var(--mdc-theme-background)"
 }, "label:menuTitleActive;");
 var LOCAL_STORAGE_KEY = "webiny_navigation_groups";
-
 function loadState() {
   return (_store.default.get(LOCAL_STORAGE_KEY) || "").split(",").filter(Boolean);
 }
-
 function storeState(state) {
   _store.default.set(LOCAL_STORAGE_KEY, state.join(","));
 }
-
 function getState(id) {
   if (!id) {
     return false;
   }
-
   var state = loadState();
   return state.includes(id);
 }
-
 var MenuGroupRenderer = function MenuGroupRenderer(PrevMenuItem) {
   return function MenuGroup() {
     var _useNavigation = (0, _index.useNavigation)(),
-        setVisible = _useNavigation.setVisible;
-
+      setVisible = _useNavigation.setVisible;
     var _useMenuItem = (0, _appAdmin.useMenuItem)(),
-        menuItem = _useMenuItem.menuItem,
-        depth = _useMenuItem.depth;
-
+      menuItem = _useMenuItem.menuItem,
+      depth = _useMenuItem.depth;
     var shouldRender = depth === 0 && menuItem && menuItem.children;
-
     var _useState = (0, _react.useState)(getState(menuItem ? menuItem.name : null)),
-        _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-        isExpanded = _useState2[0],
-        setExpanded = _useState2[1];
-
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isExpanded = _useState2[0],
+      setExpanded = _useState2[1];
     var hideMenu = (0, _react.useCallback)(function () {
       return setVisible(false);
     }, []);
@@ -116,29 +89,22 @@ var MenuGroupRenderer = function MenuGroupRenderer(PrevMenuItem) {
       if (!menuItem) {
         return;
       }
-
       var state = loadState();
-
       if (isExpanded && state.includes(menuItem.name)) {
         state.splice(state.indexOf(menuItem.name), 1);
       }
-
       if (!isExpanded && !state.includes(menuItem.name)) {
         state.push(menuItem.name);
       }
-
       setExpanded(!isExpanded);
       storeState(state);
     }, [isExpanded, setExpanded]);
-
     if (!shouldRender) {
       return /*#__PURE__*/_react.default.createElement(PrevMenuItem, null);
     }
-
     if (!menuItem || !menuItem.children.length) {
       return null;
     }
-
     var withLink = function withLink(content) {
       return /*#__PURE__*/_react.default.createElement(_reactRouter.Link, {
         to: menuItem.path || "",
@@ -146,7 +112,6 @@ var MenuGroupRenderer = function MenuGroupRenderer(PrevMenuItem) {
         onClick: menuItem.onClick || hideMenu
       }, content);
     };
-
     var item = /*#__PURE__*/_react.default.createElement(_List.List, {
       className: (0, _classnames.default)(menuTitle, (0, _defineProperty2.default)({}, menuTitleActive, isExpanded))
     }, /*#__PURE__*/_react.default.createElement(_List.ListItem, {
@@ -157,7 +122,6 @@ var MenuGroupRenderer = function MenuGroupRenderer(PrevMenuItem) {
     })), 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.default.createElement(_react.Fragment, null, menuItem.path ? withLink(item) : item, menuItem.children ? /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.Transition, {
       in: isExpanded,
       timeout: 100,
@@ -172,5 +136,4 @@ var MenuGroupRenderer = function MenuGroupRenderer(PrevMenuItem) {
     }) : null);
   };
 };
-
 exports.MenuGroupRenderer = MenuGroupRenderer;

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

@@ -1 +1 @@
-{"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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"}
+{"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,42 +1,29 @@
 "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)("font-weight:400 !important;.mdc-list &.mdc-list-item:hover{cursor:pointer;background-color:var(--mdc-theme-background);}label:listItemStyle;");
-
 var MenuLinkRenderer = function MenuLinkRenderer(PrevMenuItem) {
   return function MenuLink() {
     var _useNavigation = (0, _index.useNavigation)(),
-        setVisible = _useNavigation.setVisible;
-
+      setVisible = _useNavigation.setVisible;
     var _useMenuItem = (0, _appAdmin.useMenuItem)(),
-        menuItem = _useMenuItem.menuItem,
-        depth = _useMenuItem.depth;
-
+      menuItem = _useMenuItem.menuItem,
+      depth = _useMenuItem.depth;
     var hideMenu = (0, _react.useCallback)(function () {
       return setVisible(false);
     }, []);
     var shouldRender = depth === 0 && (menuItem ? menuItem.tags || [] : []).includes("footer");
-
     if (!shouldRender) {
       return /*#__PURE__*/_react.default.createElement(PrevMenuItem, null);
     } else if (!menuItem) {
@@ -44,7 +31,6 @@ var MenuLinkRenderer = function MenuLinkRenderer(PrevMenuItem) {
       console.log("MenuLinkRenderer returning PrevMenuItem because missing menuItem variable.");
       return /*#__PURE__*/_react.default.createElement(PrevMenuItem, null);
     }
-
     var withLink = function withLink(content) {
       return /*#__PURE__*/_react.default.createElement(_reactRouter.Link, {
         to: menuItem.path || "",
@@ -53,7 +39,6 @@ var MenuLinkRenderer = function MenuLinkRenderer(PrevMenuItem) {
         onClick: menuItem.onClick || hideMenu
       }, content);
     };
-
     var item = /*#__PURE__*/_react.default.createElement(_List.ListItem, {
       "data-testid": menuItem.testId,
       ripple: false,
@@ -62,9 +47,7 @@ var MenuLinkRenderer = function MenuLinkRenderer(PrevMenuItem) {
     }, 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,"names":["listItemStyle","css","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    font-weight: 400 !important;\n\n    .mdc-list &.mdc-list-item:hover {\n        cursor: pointer;\n        background-color: 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,oBAAGC,YAAH,iJAAnB;;AASO,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,EAAErB,aAHf;MAII,OAAO,EAAEQ,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"}
+{"version":3,"names":["listItemStyle","css","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    font-weight: 400 !important;\n\n    .mdc-list &.mdc-list-item:hover {\n        cursor: pointer;\n        background-color: 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,oBAAGC,YAAG,iJAOxB;AAEM,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgB,CAAIC,YAAsB,EAAe;EAClE,OAAO,SAASC,QAAQ,GAAG;IACvB,qBAAuB,IAAAC,oBAAa,GAAE;MAA9BC,UAAU,kBAAVA,UAAU;IAClB,mBAA4B,IAAAC,qBAAW,GAAE;MAAjCC,QAAQ,gBAARA,QAAQ;MAAEC,KAAK,gBAALA,KAAK;IAEvB,IAAMC,QAAQ,GAAG,IAAAC,kBAAW,EAAC;MAAA,OAAML,UAAU,CAAC,KAAK,CAAC;IAAA,GAAE,EAAE,CAAC;IACzD,IAAMM,YAAY,GACdH,KAAK,KAAK,CAAC,IAAI,CAACD,QAAQ,GAAGA,QAAQ,CAACK,IAAI,IAAI,EAAE,GAAG,EAAE,EAAEC,QAAQ,CAAC,QAAQ,CAAC;IAE3E,IAAI,CAACF,YAAY,EAAE;MACf,oBAAO,6BAAC,YAAY,OAAG;IAC3B,CAAC,MAAM,IAAI,CAACJ,QAAQ,EAAE;MAClB;MACAO,OAAO,CAACC,GAAG,CACP,4EAA4E,CAC/E;MACD,oBAAO,6BAAC,YAAY,OAAG;IAC3B;IAEA,IAAMC,QAAQ,GAAG,SAAXA,QAAQ,CAAIC,OAAwB,EAAyB;MAC/D,oBACI,6BAAC,iBAAI;QACD,EAAE,EAAEV,QAAQ,CAACW,IAAI,IAAI,EAAG;QACxB,MAAM,EAAEX,QAAQ,CAACY,MAAO;QACxB,eAAaZ,QAAQ,CAACa,MAAO;QAC7B,OAAO,EAAEb,QAAQ,CAACc,OAAO,IAAIZ;MAAS,GAErCQ,OAAO,CACL;IAEf,CAAC;IAED,IAAMK,IAAI,gBACN,6BAAC,cAAQ;MACL,eAAaf,QAAQ,CAACa,MAAO;MAC7B,MAAM,EAAE,KAAM;MACd,SAAS,EAAErB,aAAc;MACzB,OAAO,EAAEQ,QAAQ,CAACc,OAAO,IAAIZ;IAAS,GAErCF,QAAQ,CAACgB,IAAI,gBACV,6BAAC,qBAAe,qBACZ,6BAAC,UAAI;MAAC,IAAI,EAAEhB,QAAQ,CAACgB;IAAK,EAAG,CACf,GAClB,IAAI,EACPhB,QAAQ,CAACiB,KAAK,CAEtB;IAED,OAAOjB,QAAQ,CAACW,IAAI,GAAGF,QAAQ,CAACM,IAAI,CAAC,GAAGA,IAAI;EAChD,CAAC;AACL,CAAC;AAAC"}

package/modules/Navigation/renderers/MenuSectionItemRenderer.js

@@ -1,24 +1,16 @@
 "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",
@@ -45,21 +37,17 @@ var submenuList = /*#__PURE__*/(0, _emotion.css)({
     padding: 0
   }
 }, "label:submenuList;");
-
 var MenuSectionItemRenderer = function MenuSectionItemRenderer(PrevMenuItem) {
   return function MenuSectionItem() {
     var _useNavigation = (0, _index.useNavigation)(),
-        setVisible = _useNavigation.setVisible;
-
+      setVisible = _useNavigation.setVisible;
     var _useMenuItem = (0, _appAdmin.useMenuItem)(),
-        menuItem = _useMenuItem.menuItem,
-        depth = _useMenuItem.depth;
-
+      menuItem = _useMenuItem.menuItem,
+      depth = _useMenuItem.depth;
     var hideMenu = (0, _react.useCallback)(function () {
       return setVisible(false);
     }, []);
     var shouldRender = depth > 0 && Boolean(menuItem ? menuItem.path : false);
-
     if (!shouldRender) {
       return /*#__PURE__*/_react.default.createElement(PrevMenuItem, null);
     } else if (!menuItem) {
@@ -67,7 +55,6 @@ var MenuSectionItemRenderer = function MenuSectionItemRenderer(PrevMenuItem) {
       console.log("MenuSectionItemRenderer returning PrevMenuItem because no menuItem variable.");
       return /*#__PURE__*/_react.default.createElement(PrevMenuItem, null);
     }
-
     return /*#__PURE__*/_react.default.createElement(_List.List, {
       className: submenuList
     }, /*#__PURE__*/_react.default.createElement(_List.ListItem, {
@@ -82,12 +69,10 @@ var MenuSectionItemRenderer = function MenuSectionItemRenderer(PrevMenuItem) {
         if (!menuItem.onClick) {
           return;
         }
-
         menuItem.onClick();
       },
       className: linkStyle
     }, menuItem.label)));
   };
 };
-
 exports.MenuSectionItemRenderer = MenuSectionItemRenderer;