grep-components 1.15.0-grepf-1792.11 → 1.15.0

package/dist/components/AppBar/index.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+declare const _default: React.ComponentType<{}>;
+export default _default;

package/dist/components/AppBar/stories/AppBar.stories.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/AppBar/styles/index.d.ts

@@ -0,0 +1 @@
+export declare const StyledAppBar: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material/AppBar").AppBarTypeMap<{}, "header">>;

package/dist/components/AppBarNavList/stories/AppBarNavList.stories.d.ts

@@ -3,6 +3,4 @@ export declare const navbarPages: {
     label: string;
     onClick: (url: string) => void;
     toUrl: string;
-    name: string;
-    path: string;
 }[];

package/dist/components/DropdownMenu/components/tooltip-menu-item.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { MenuItemProps } from '@mui/material';
-declare type Props = Pick<MenuItemProps, 'className' | 'onMouseOver'> & {
+declare type Props = MenuItemProps & {
     tooltipText: string;
 };
 export declare const TooltipMenuItem: React.FC<Props>;

package/dist/components/index.d.ts

@@ -1,4 +1,4 @@
-export * from './AppBar/AppBar';
+export * from './AppBar';
 export * from './AppBarProfile';
 export * from './AppBarNavList';
 export * from './BodyLayout';
@@ -28,7 +28,7 @@ export * from './GrepEditor';
 export * from './ConfirmationDialog';
 export * from './GrepDialog';
 export * from './ToC';
-export { default as AppBar } from './AppBar/AppBar';
+export { default as AppBar } from './AppBar';
 export { default as AppBarProfile } from './AppBarProfile';
 export { default as AppBarNavList } from './AppBarNavList';
 export { default as BodyLayout } from './BodyLayout';

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import * as Utils from './utils';
 export { default as Colors } from './styling/Colors';
+export { default as AppBar } from './components/AppBar';
 export { default as AppBarProfile } from './components/AppBarProfile';
 export { default as AppBarNavList } from './components/AppBarNavList';
 export { default as BodyLayout } from './components/BodyLayout';
@@ -27,7 +28,6 @@ export { default as Sidebar } from './components/Sidebar';
 export { default as ServiceMessage } from './components/ServiceMessage';
 export { default as SortableTable } from './components/SortableTable';
 export { default as GrepEditor } from './components/GrepEditor';
-export { default as AppBar } from './components/AppBar/AppBar';
 export { ParseableDate } from './utils/dateHelper';
 export { Utils };
 export * from './components';

package/dist/index.js

@@ -5,14 +5,15 @@ import isBetweenPlugin from 'dayjs/plugin/isBetween';
 import { red, pink, purple, deepPurple, indigo, blue, lightBlue, cyan, teal, green, lightGreen, lime, yellow, amber, orange, deepOrange, brown, grey, blueGrey } from '@mui/material/colors';
 import * as React from 'react';
 import React__default, { useContext, forwardRef, createElement, createContext, Fragment, useRef, useLayoutEffect, useState, useCallback as useCallback$1, useEffect, useMemo as useMemo$1 } from 'react';
+import { Toolbar, useScrollTrigger, Slide, Button, Box, Typography, IconButton, Menu, MenuItem, Tabs, Tab, Collapse, MenuList, Tooltip, Container, List, ListItem, ListItemText, ListItemIcon, Divider, styled, TableCell, TableRow, TableSortLabel, TableHead, TablePagination, TableContainer, Table, TableBody, TableFooter, CircularProgress, Link, TextField, FormControl, InputLabel, Select, OutlinedInput, Input, Checkbox, FormHelperText, Grid, ToggleButtonGroup, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions } from '@mui/material';
+import AppBar$1 from '@mui/material/AppBar';
+import { useTheme as useTheme$1 } from '@mui/material/styles';
 import AccountCircle from '@mui/icons-material/AccountCircle';
 import ArrowDropdown from '@mui/icons-material/ArrowDropDown';
-import { Button, Box, Typography, IconButton, Menu, MenuItem, Tabs, Tab, Collapse, MenuList, Tooltip, Container, List, ListItem, ListItemText, ListItemIcon, Divider, styled, TableCell, TableRow, TableSortLabel, TableHead, TablePagination, TableContainer, Table, TableBody, TableFooter, CircularProgress, Link, TextField, FormControl, InputLabel, Select, OutlinedInput, Input, Checkbox, FormHelperText, Grid, ToggleButtonGroup, AppBar as AppBar$1, Toolbar as Toolbar$1, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions } from '@mui/material';
-import { useTheme as useTheme$1 } from '@mui/material/styles';
-import { useHistory, NavLink, Prompt } from 'react-router-dom';
+import { useHistory, Prompt } from 'react-router-dom';
 import MenuIcon from '@mui/icons-material/Menu';
 import IconExpand from '@mui/icons-material/ExpandMore';
-import { ArrowForward, Info, ExpandMore, ExpandLess, Menu as Menu$1 } from '@mui/icons-material';
+import { ArrowForward, Info, ExpandMore, ExpandLess } from '@mui/icons-material';
 import ListItemIcon$1 from '@mui/material/ListItemIcon';
 import MoreVert from '@mui/icons-material/MoreVert';
 import { useDispatch, connect, Provider as Provider$1, useSelector } from 'react-redux';
@@ -39,10 +40,6 @@ export { ContentState } from 'draft-js';
 import ToggleButton from '@mui/material/ToggleButton';
 import FormatBold from '@mui/icons-material/FormatBold';
 import FormatItalic from '@mui/icons-material/FormatItalic';
-import Divider$1 from '@mui/material/Divider';
-import Menu$2 from '@mui/material/Menu';
-import MenuItem$1 from '@mui/material/MenuItem';
-import Button$1 from '@mui/material/Button';
 import Link$1 from '@mui/material/Link';
 
 dayjs.extend(isBetweenPlugin);
@@ -4061,6 +4058,31 @@ var makeStyles = (_a = tssReact.createMakeAndWithStyles({
     //"useTheme": useTheme as (()=> MyTheme)
 }), _a.makeStyles), withStyles = _a.withStyles;
 
+var StyledAppBar = withStyles(AppBar$1, {
+    root: {
+        backgroundColor: 'transparant',
+    },
+    positionFixed: {
+        left: 'unset',
+        right: 'unset',
+    },
+});
+
+var HideOnScroll = function (_a) {
+    var children = _a.children;
+    // Note that you normally won't need to set the window ref as useScrollTrigger
+    // will default to window.
+    // This is only being set here because the demo is in an iframe.
+    // const trigger = useScrollTrigger({ target: window ? window() : undefined });
+    var trigger = useScrollTrigger();
+    return (React.createElement(Slide, { appear: false, direction: "down", in: !trigger }, children));
+};
+var AppBar = function (props) { return (React.createElement(React.Fragment, null,
+    React.createElement(HideOnScroll, __assign({}, props),
+        React.createElement(StyledAppBar, { color: "inherit", elevation: 0 },
+            React.createElement(Toolbar, null, props.children))),
+    React.createElement(Toolbar, null))); };
+
 var useStyles$i = makeStyles()(function (_a) {
     var palette = _a.palette;
     return ({
@@ -4215,10 +4237,10 @@ var CollapsableMenu = function (_a) {
 };
 
 var TooltipMenuItem = function (_a) {
-    var children = _a.children, tooltipText = _a.tooltipText, props = __rest$1(_a, ["children", "tooltipText"]);
+    var children = _a.children, tooltipText = _a.tooltipText, disabled = _a.disabled, props = __rest$1(_a, ["children", "tooltipText", "disabled"]);
     return (React__default.createElement(Tooltip, { title: tooltipText },
         React__default.createElement("span", null,
-            React__default.createElement(MenuItem, __assign({ disabled: true }, props), children))));
+            React__default.createElement(MenuItem, __assign({ role: "menuitem", disabled: disabled }, props), children))));
 };
 
 var useStyles$g = makeStyles()(function (_a, _b) {
@@ -4273,7 +4295,7 @@ var CollapsableMenuStatusEvent = /** @class */ (function () {
     return CollapsableMenuStatusEvent;
 }());
 var CollapsableMenuItem = function (_a) {
-    var items = _a.items, onClick = _a.onClick, children = _a.children; _a.onClose; var tooltipText = _a.tooltipText, props = __rest$1(_a, ["items", "onClick", "children", "onClose", "tooltipText"]);
+    var items = _a.items, onClick = _a.onClick, children = _a.children; _a.onClose; var tooltipText = _a.tooltipText, disabled = _a.disabled, props = __rest$1(_a, ["items", "onClick", "children", "onClose", "tooltipText", "disabled"]);
     var listItemRef = useRef(null);
     var _b = __read(useState(false), 2), open = _b[0], setOpen = _b[1];
     var onStatusChange = useCallback$1(function (type) { return new CollapsableMenuStatusEvent(type, listItemRef); }, [listItemRef]);
@@ -4327,7 +4349,7 @@ var CollapsableMenuItem = function (_a) {
                     return window.dispatchEvent(new Event('resize'));
                 });
             } }, items)))); };
-    return !!tooltipText && props.disabled ? (React__default.createElement(TooltipMenuItem, { className: classes.root, tooltipText: tooltipText, onMouseOver: function (e) { return e.currentTarget.focus(); } }, renderInner())) : (React__default.createElement(MenuItem, __assign({ className: classes.root, ref: listItemRef, selected: open, onClick: handleClick, onKeyDown: handleKey }, props), renderInner()));
+    return tooltipText ? (React__default.createElement(TooltipMenuItem, { className: classes.root, tooltipText: tooltipText, onMouseOver: function (e) { return e.currentTarget.focus(); }, disabled: disabled, selected: open, onClick: handleClick, onKeyDown: handleKey }, renderInner())) : (React__default.createElement(MenuItem, __assign({ className: classes.root, ref: listItemRef, selected: open, onClick: handleClick, onKeyDown: handleKey }, props), renderInner()));
 };
 
 var useStyles$f = makeStyles()(function (_a) {
@@ -21710,355 +21732,6 @@ var GrepEditor = function (_a) {
         React__default.createElement(EditorComponent, __assign({}, props))));
 };
 
-var dimensions = {
-    breadcrumbsFontSize: 16,
-    contentWidth: 1028,
-    footerHeight: 50,
-    inputBoxHeight: 61,
-    toolbarHeight: 80,
-    toolbarHeightMobile: 40,
-    toolbarWidth: 1260,
-    toolbarMenuWidth: 1028,
-    toolbarMenuHeight: 50,
-};
-var ToolbarTitle = styled(NavLink)(function () { return ({
-    display: 'flex',
-    fontSize: '24px',
-    color: '#303030',
-    fontFamily: 'Montserrat',
-    fontWeight: 500,
-    textDecoration: 'none',
-    ':hover': {
-        textDecoration: 'none',
-    },
-}); });
-var EnvironmentTitle = styled('div')(function () { return ({
-    color: 'rgba(0, 0, 0, 0.33)',
-    marginLeft: '17px',
-}); });
-var Toolbar = styled('div')(function (_a) {
-    var _b;
-    var theme = _a.theme;
-    return (_b = {
-            display: 'flex',
-            flexDirection: 'column'
-        },
-        _b[theme.breakpoints.down('sm')] = {
-            height: "".concat(dimensions.toolbarMenuHeight + dimensions.toolbarHeightMobile, "px"),
-            minHeight: "".concat(dimensions.toolbarMenuHeight + dimensions.toolbarHeightMobile, "px"),
-            maxHeight: "".concat(dimensions.toolbarMenuHeight + dimensions.toolbarHeightMobile, "px"),
-        },
-        _b[theme.breakpoints.up('sm')] = {
-            height: "".concat(dimensions.toolbarMenuHeight + dimensions.toolbarHeight, "px"),
-            minHeight: "".concat(dimensions.toolbarMenuHeight + dimensions.toolbarHeight, "px"),
-            maxHeight: "".concat(dimensions.toolbarMenuHeight + dimensions.toolbarHeight, "px"),
-        },
-        _b);
-});
-var ToolbarFixer = styled('div')(function (_a) {
-    var _b;
-    var theme = _a.theme;
-    return (_b = {
-            display: 'flex',
-            flexDirection: 'column',
-            position: 'fixed',
-            top: 0,
-            left: 0,
-            right: 0,
-            zIndex: 101
-        },
-        _b[theme.breakpoints.down('sm')] = {
-            height: "".concat(dimensions.toolbarMenuHeight + dimensions.toolbarHeightMobile, "px"),
-            minHeight: "".concat(dimensions.toolbarMenuHeight + dimensions.toolbarHeightMobile, "px"),
-            maxHeight: "".concat(dimensions.toolbarMenuHeight + dimensions.toolbarHeightMobile, "px"),
-        },
-        _b[theme.breakpoints.up('sm')] = {
-            height: "".concat(dimensions.toolbarMenuHeight + dimensions.toolbarHeight, "px"),
-            minHeight: "".concat(dimensions.toolbarMenuHeight + dimensions.toolbarHeight, "px"),
-            maxHeight: "".concat(dimensions.toolbarMenuHeight + dimensions.toolbarHeight, "px"),
-        },
-        _b);
-});
-var ToolbarInner = styled('div')(function (_a) {
-    var _b;
-    var colors = _a.colors, theme = _a.theme;
-    if (!theme) {
-        return {};
-    }
-    return _b = {
-            alignItems: 'center',
-            display: 'flex',
-            margin: '0 auto',
-            width: '100%',
-            padding: 0,
-            backgroundColor: colors.headerBackgroundColor
-        },
-        _b[theme.breakpoints.down('sm')] = {
-            height: "".concat(dimensions.toolbarHeightMobile, "px"),
-            minHeight: "".concat(dimensions.toolbarHeightMobile, "px"),
-        },
-        _b[theme.breakpoints.up('sm')] = {
-            padding: 0,
-            height: "".concat(dimensions.toolbarHeight, "px"),
-            minHeight: "".concat(dimensions.toolbarHeight, "px"),
-        },
-        _b;
-});
-var ToolbarLeft = styled('div')(function () { return ({
-    alignItems: 'center',
-    display: 'flex',
-    marginLeft: '40px',
-}); });
-var ToolbarRight = styled('div')(function (_a) {
-    var _b;
-    var theme = _a.theme;
-    return (_b = {
-            alignItems: 'center',
-            display: 'flex',
-            marginLeft: 'auto',
-            marginRight: '40px'
-        },
-        _b[theme.breakpoints.down('sm')] = {
-            display: 'none',
-        },
-        _b[theme.breakpoints.up('sm')] = {
-            display: 'flex',
-        },
-        _b);
-});
-var UserContainer = styled('div')(function () { return ({
-    display: 'flex',
-    flexDirection: 'column',
-    margin: '0 17px',
-    textAlign: 'left',
-    textTransform: 'none',
-    fontWeight: '400',
-    color: 'rgba(0, 0, 0, 0.87)',
-}); });
-var AccountName = styled('span')(function () { return ({
-    fontSize: '18px',
-    lineHeight: '25px',
-}); });
-var ToolbarMenu = styled('div')(function (_a) {
-    var _b;
-    var theme = _a.theme;
-    return _b = {
-            backgroundColor: theme.palette.primary.main,
-            height: "".concat(dimensions.toolbarMenuHeight, "px"),
-            maxHeight: "".concat(dimensions.toolbarMenuHeight, "px"),
-            minHeight: "".concat(dimensions.toolbarMenuHeight, "px"),
-            width: '100%',
-            display: 'flex',
-            alignItems: 'center',
-            fontFamily: 'MontSerrat, Helvetica Neue, Helvetica, Arial, sans-serif',
-            boxShadow: '0 3px 5px 0 rgba(0, 0, 0, 0.3)'
-        },
-        _b[theme.breakpoints.down('sm')] = {
-            display: 'none',
-        },
-        _b[theme.breakpoints.up('sm')] = {
-            display: 'flex',
-        },
-        _b;
-});
-var MobileToolbarMenu = styled('div')(function (_a) {
-    var _b;
-    var theme = _a.theme;
-    return (_b = {
-            backgroundColor: theme.palette.primary.main,
-            height: "".concat(dimensions.toolbarMenuHeight, "px"),
-            maxHeight: "".concat(dimensions.toolbarMenuHeight, "px"),
-            minHeight: "".concat(dimensions.toolbarMenuHeight, "px"),
-            width: '100%',
-            flexGrow: 1,
-            alignItems: 'center',
-            fontFamily: 'MontSerrat, Helvetica Neue, Helvetica, Arial, sans-serif',
-            boxShadow: '0 3px 5px 0 rgba(0, 0, 0, 0.3)'
-        },
-        _b[theme.breakpoints.down('sm')] = {
-            display: 'flex',
-        },
-        _b[theme.breakpoints.up('sm')] = {
-            display: 'none',
-        },
-        _b);
-});
-var ToolbarMenuInner = styled('div')(function (_a) {
-    var _b;
-    var theme = _a.theme;
-    return (_b = {
-            display: 'flex',
-            height: 'fit-content',
-            maxWidth: "".concat(dimensions.toolbarMenuWidth, "px"),
-            margin: '0 auto'
-        },
-        _b[theme.breakpoints.down('lg')] = {
-            padding: '0 24px',
-        },
-        _b[theme.breakpoints.up('lg')] = {
-            padding: 0,
-        },
-        _b);
-});
-var menuItemHoverGreen = '#B9E1CC';
-var ToolbarMenuItem = styled(NavLink)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        alignItems: 'center',
-        borderRight: '1px solid #696868',
-        color: theme.palette.background.default,
-        cursor: 'pointer',
-        display: 'flex',
-        fontSize: '16px',
-        padding: '0 17px',
-        height: '100%',
-        textTransform: 'capitalize',
-        userSelect: 'none',
-        position: 'relative',
-        textDecoration: 'none',
-        fontWeight: 500,
-        ':first-child': {
-            paddingLeft: 0,
-            ':after': {
-                marginLeft: '-24px',
-            },
-        },
-        ':last-child': {
-            borderRight: 'none',
-        },
-        ':after': {
-            position: 'absolute',
-            bottom: 0,
-            left: '50%',
-            width: '32px',
-            marginLeft: '-16px',
-            borderBottom: "2px solid ".concat(theme.palette.secondary.main),
-            opacity: 0,
-            content: '""',
-            transition: 'all 0.3s ease',
-            pointerEvents: 'none',
-        },
-        ':focus': {
-            outline: 'none',
-        },
-        ':hover': {
-            textDecoration: 'none',
-            color: menuItemHoverGreen,
-        },
-        '.active:after, :hover:after, focus:after': {
-            bottom: '-4px',
-            opacity: '1',
-        },
-    });
-});
-var MobileToolbarMenuItem = styled(NavLink)(function () { return ({
-    alignItems: 'center',
-    color: 'black',
-    cursor: 'pointer',
-    display: 'flex',
-    height: '100%',
-    textTransform: 'capitalize',
-    userSelect: 'none',
-    position: 'relative',
-    textDecoration: 'none',
-}); });
-
-var MobileAppBar = function (_a) {
-    var userMenuItems = _a.userMenuItems, menuItems = _a.menuItems;
-    var _b = __read(React.useState(null), 2), anchorElNav = _b[0], setAnchorElNav = _b[1];
-    var openNav = Boolean(anchorElNav);
-    var handleClickNav = function (event) {
-        setAnchorElNav(event.currentTarget);
-    };
-    var handleCloseNav = function () {
-        setAnchorElNav(null);
-    };
-    var _c = __read(React.useState(null), 2), anchorElMenu = _c[0], setAnchorElMenu = _c[1];
-    var openMenu = Boolean(anchorElMenu);
-    var handleClickMenu = function (event) {
-        setAnchorElMenu(event.currentTarget);
-    };
-    var handleCloseMenu = function () {
-        setAnchorElMenu(null);
-    };
-    return (React.createElement(MobileToolbarMenu, { style: { flexGrow: 1 } },
-        React.createElement(AppBar$1, { position: "static" },
-            React.createElement(Toolbar$1, { style: { minHeight: '50px' } },
-                React.createElement(IconButton, { size: "medium", edge: "start", color: "inherit", "aria-label": "menu", style: { marginRight: 2 }, onClick: handleClickNav },
-                    React.createElement(Menu$1, { sx: { color: 'white' } })),
-                React.createElement(Menu, { id: "basic-menu", anchorEl: anchorElNav, open: openNav, onClose: handleCloseNav, MenuListProps: {
-                        'aria-labelledby': 'basic-button',
-                    } }, menuItems.map(function (page) { return (React.createElement(MobileToolbarMenuItem, { key: page.name, to: page.redirectUrl || '' },
-                    React.createElement(MenuItem, { sx: {
-                            width: '100%',
-                        }, key: page.name }, page.translatedTextRef))); })),
-                React.createElement(IconButton, { size: "medium", edge: "end", color: "inherit", "aria-label": "menu", style: { marginLeft: 'auto' }, onClick: handleClickMenu },
-                    React.createElement(MoreVert, { sx: { color: 'white' } })),
-                React.createElement(Menu, { id: "basic-menu", anchorEl: anchorElMenu, open: openMenu, onClose: handleCloseMenu, MenuListProps: {
-                        'aria-labelledby': 'basic-button',
-                    } }, userMenuItems.map(function (i, index) { return (React.createElement(Box, { key: i.id },
-                    React.createElement(MenuItem, { key: i.id, onClick: function () {
-                            handleCloseMenu();
-                            i.action && i.action();
-                        } }, i.isAnchor ? (React.createElement("a", { style: {
-                            textDecoration: 'inherit',
-                            color: 'inherit',
-                        }, rel: "noreferrer", href: i.href }, i.label)) : (i.label)),
-                    userMenuItems.length > index + 1 && React.createElement(Divider, null))); }))))));
-};
-
-var AppBar = function (_a) {
-    var username = _a.username, currentPath = _a.currentPath, isProd = _a.isProd, appTitle = _a.appTitle, userMenuItems = _a.userMenuItems, menuItems = _a.menuItems, userRole = _a.userRole, colors = _a.colors;
-    var _b = __read(React.useState(null), 2), userMenuAnchor = _b[0], setUserMenuAnchor = _b[1];
-    var _handleIconButtonClick = function (event) {
-        event.preventDefault();
-        setUserMenuAnchor(event.currentTarget);
-    };
-    var _handleCloseUserMenu = function () {
-        setUserMenuAnchor(null);
-    };
-    var _renderToolbarMenuItem = function (page) {
-        var isActive = (page === null || page === void 0 ? void 0 : page.exact)
-            ? currentPath === page.redirectUrl
-            : currentPath.includes(page.redirectUrl || '');
-        return (React.createElement(ToolbarMenuItem, { className: isActive ? 'active' : '', to: page.redirectUrl || '', key: page.name, tabIndex: 0 }, page === null || page === void 0 ? void 0 : page.translatedTextRef));
-    };
-    return (React.createElement(Toolbar, null,
-        React.createElement(ToolbarFixer, null,
-            React.createElement(ToolbarInner, { colors: colors },
-                React.createElement(ToolbarLeft, null,
-                    React.createElement(ToolbarTitle, { to: '/' },
-                        appTitle,
-                        !isProd && (React.createElement(EnvironmentTitle, null, process.env.REACT_APP_HOST)))),
-                React.createElement(ToolbarRight, null,
-                    React.createElement(Button$1, { onClick: _handleIconButtonClick },
-                        React.createElement(AccountCircle, { color: "primary", fontSize: "large" }),
-                        React.createElement(UserContainer, null,
-                            React.createElement(AccountName, null, username),
-                            userRole && (React.createElement(Box, { sx: { fontSize: '14px', lineHeight: '20px' } }, userRole))),
-                        React.createElement(ArrowDropdown, { color: "primary" })),
-                    React.createElement(Menu$2, { open: Boolean(userMenuAnchor), anchorEl: userMenuAnchor, onClose: _handleCloseUserMenu, anchorOrigin: {
-                            vertical: 'bottom',
-                            horizontal: 'center',
-                        }, transformOrigin: {
-                            vertical: 'top',
-                            horizontal: 'center',
-                        } }, userMenuItems.map(function (i, index) {
-                        return (React.createElement(Box, { key: i.id },
-                            React.createElement(MenuItem$1, { key: i.id, onClick: function () {
-                                    setUserMenuAnchor(null);
-                                    i.action && i.action();
-                                } }, i.isAnchor ? (React.createElement("a", { style: {
-                                    textDecoration: 'inherit',
-                                    color: 'inherit',
-                                }, rel: "noreferrer", href: i.href }, i.label)) : (i.label)),
-                            userMenuItems.length > index + 1 && React.createElement(Divider$1, null)));
-                    })))),
-            React.createElement(ToolbarMenu, null,
-                React.createElement(ToolbarMenuInner, null, menuItems.map(function (page) { return _renderToolbarMenuItem(page); }))),
-            React.createElement(MobileAppBar, { menuItems: menuItems, userMenuItems: userMenuItems, colors: colors }))));
-};
-
 var NavGuard = function (_a) {
     var when = _a.when, title = _a.title, txt = _a.txt, txtSave = _a.txtSave, txtCancel = _a.txtCancel, txtDiscard = _a.txtDiscard, onSave = _a.onSave, onCancel = _a.onCancel, onDiscard = _a.onDiscard;
     var _b = __read(React.useState(false), 2), open = _b[0], setOpen = _b[1];