grep-components 1.15.0-grepf-1694.1 → 1.15.0-grepf-1792.1

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

@@ -1,14 +1,3 @@
 import * as React from 'react';
-export declare const useToolbarStyles: (params: void, styleOverrides?: {
-    props: {
-        classes?: Record<string, string> | undefined;
-    } & Record<string, unknown>;
-    ownerState?: Record<string, unknown> | undefined;
-} | undefined) => {
-    classes: Record<"toolbar", string>;
-    theme: import("@mui/material").Theme;
-    css: import("tss-react").Css;
-    cx: import("tss-react").Cx;
-};
 declare const _default: React.ComponentType<{}>;
 export default _default;

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

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { IAuthorizedPage, UserMenuItem, v0colors } from './types';
+declare type AppBarProps = {
+    isProd: boolean;
+    username: string;
+    currentPath: string;
+    appTitle: string;
+    userMenuItems: UserMenuItem[];
+    menuItems: IAuthorizedPage[];
+    userRole?: string;
+    colors: v0colors;
+};
+declare const AppBar: React.FunctionComponent<AppBarProps>;
+export default AppBar;

package/dist/components/AppBarNew/MainAppStyles.d.ts

@@ -0,0 +1,37 @@
+/// <reference types="react" />
+import { Theme, MUIStyledCommonProps } from '@mui/system';
+import { v0colors } from './types';
+export declare const dimensions: {
+    breadcrumbsFontSize: number;
+    contentWidth: number;
+    footerHeight: number;
+    inputBoxHeight: number;
+    toolbarHeight: number;
+    toolbarHeightMobile: number;
+    toolbarWidth: number;
+    toolbarMenuWidth: number;
+    toolbarMenuHeight: number;
+};
+export declare const ToolbarTitle: import("@emotion/styled").StyledComponent<import("react-router-dom").NavLinkProps<unknown> & import("react").RefAttributes<HTMLAnchorElement> & MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const EnvironmentTitle: import("@emotion/styled").StyledComponent<MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Toolbar: import("@emotion/styled").StyledComponent<MUIStyledCommonProps<import("@mui/material").Theme> & {
+    colors: v0colors;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ToolbarFixer: import("@emotion/styled").StyledComponent<MUIStyledCommonProps<import("@mui/material").Theme> & {
+    colors: v0colors;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ToolbarInner: import("@emotion/styled").StyledComponent<MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ToolbarLeft: import("@emotion/styled").StyledComponent<MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ToolbarRight: import("@emotion/styled").StyledComponent<MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const UserContainer: import("@emotion/styled").StyledComponent<MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const AccountName: import("@emotion/styled").StyledComponent<MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const ToolbarMenu: import("@emotion/styled").StyledComponent<MUIStyledCommonProps<import("@mui/material").Theme> & {
+    colors: v0colors;
+} & MUIStyledCommonProps<Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const MobileToolbarMenu: import("@emotion/styled").StyledComponent<MUIStyledCommonProps<import("@mui/material").Theme> & {
+    colors: v0colors;
+} & MUIStyledCommonProps<Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ToolbarMenuInner: import("@emotion/styled").StyledComponent<MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ToolbarMenuItem: import("@emotion/styled").StyledComponent<import("react-router-dom").NavLinkProps<unknown> & import("react").RefAttributes<HTMLAnchorElement> & MUIStyledCommonProps<import("@mui/material").Theme> & {
+    colors: v0colors;
+}, {}, {}>;

package/dist/components/AppBarNew/MobileAppBar.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { IAuthorizedPage, UserMenuItem, v0colors } from './types';
+declare type Props = {
+    userMenuItems: UserMenuItem[];
+    menuItems: IAuthorizedPage[];
+    colors: v0colors;
+};
+declare const MobileAppBar: React.FunctionComponent<Props>;
+export default MobileAppBar;

package/dist/components/AppBarNew/stories/NewAppBarStory.stories.d.ts

@@ -0,0 +1,15 @@
+export declare const v0colors: {
+    primary: string;
+    secondary: string;
+    body: string;
+    headerBackgroundColor: string;
+    borderColor: string;
+    primaryFade: string;
+    greyText: string;
+    placeholderText: string;
+    textColor: string;
+    textColorFade: string;
+    textColorMoreFade: string;
+    white: string;
+    lightGrey: string;
+};

package/dist/components/AppBarNew/types.d.ts

@@ -0,0 +1,30 @@
+export declare type UserMenuItem = {
+    id: string;
+    label: string;
+    action: () => void;
+};
+export interface IAuthorizedPage {
+    name: string;
+    translatedTextRef?: string;
+    accessTextRef?: string;
+    redirectUrl?: string;
+    path: string;
+    exact?: boolean;
+    link?: boolean;
+    accessLink?: boolean;
+}
+export declare type v0colors = {
+    body: string;
+    headerBackgroundColor: string;
+    borderColor: string;
+    primaryFade: string;
+    greyText: string;
+    placeholderText: string;
+    textColor: string;
+    textColorFade: string;
+    textColorMoreFade: string;
+    white: string;
+    lightGrey: string;
+    primary: string;
+    secondary: string;
+};

package/dist/index.d.ts

@@ -28,6 +28,7 @@ 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 NewAppBar } from './components/AppBarNew/AppBar';
 export { ParseableDate } from './utils/dateHelper';
 export { Utils };
 export * from './components';

package/dist/index.js

@@ -5,15 +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 { Toolbar as Toolbar$1, 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, AppBar as AppBar$3, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions } from '@mui/material';
+import AppBar$2 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 { useHistory, Prompt } from 'react-router-dom';
+import { useHistory, NavLink, Prompt } from 'react-router-dom';
 import MenuIcon from '@mui/icons-material/Menu';
 import IconExpand from '@mui/icons-material/ExpandMore';
-import { ArrowForward, Info, ExpandMore, ExpandLess } from '@mui/icons-material';
+import { ArrowForward, Info, ExpandMore, ExpandLess, Menu as Menu$1 } 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';
@@ -40,6 +40,9 @@ 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 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);
@@ -4058,7 +4061,7 @@ var makeStyles = (_a = tssReact.createMakeAndWithStyles({
     //"useTheme": useTheme as (()=> MyTheme)
 }), _a.makeStyles), withStyles = _a.withStyles;
 
-var StyledAppBar = withStyles(AppBar$1, {
+var StyledAppBar = withStyles(AppBar$2, {
     root: {
         backgroundColor: 'transparant',
     },
@@ -4068,21 +4071,6 @@ var StyledAppBar = withStyles(AppBar$1, {
     },
 });
 
-var useToolbarStyles = makeStyles()(function (_a) {
-    var _b;
-    var breakpoints = _a.breakpoints;
-    return ({
-        toolbar: (_b = {},
-            _b[breakpoints.down('lg')] = {
-                height: '40px',
-                minHeight: '40px',
-            },
-            _b[breakpoints.up('lg')] = {
-                height: '80px',
-            },
-            _b),
-    });
-});
 var HideOnScroll = function (_a) {
     var children = _a.children;
     // Note that you normally won't need to set the window ref as useScrollTrigger
@@ -4092,13 +4080,11 @@ var HideOnScroll = function (_a) {
     var trigger = useScrollTrigger();
     return (React.createElement(Slide, { appear: false, direction: "down", in: !trigger }, children));
 };
-var AppBar = function (props) {
-    var classes = useToolbarStyles().classes;
-    return (React.createElement(React.Fragment, null,
-        React.createElement(HideOnScroll, __assign({}, props),
-            React.createElement(StyledAppBar, { color: "inherit", elevation: 0 },
-                React.createElement(Toolbar, { className: classes.toolbar }, props.children)))));
-};
+var AppBar$1 = function (props) { return (React.createElement(React.Fragment, null,
+    React.createElement(HideOnScroll, __assign({}, props),
+        React.createElement(StyledAppBar, { color: "inherit", elevation: 0 },
+            React.createElement(Toolbar$1, null, props.children))),
+    React.createElement(Toolbar$1, null))); };
 
 var useStyles$i = makeStyles()(function (_a) {
     var palette = _a.palette;
@@ -21749,6 +21735,317 @@ 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 medium',
+    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 colors = _a.colors;
+    return ({
+        display: 'flex',
+        flexDirection: 'column',
+        backgroundColor: "".concat(colors.headerBackgroundColor),
+        height: "".concat(dimensions.toolbarMenuHeight + dimensions.toolbarHeight, "px"),
+        minHeight: "".concat(dimensions.toolbarMenuHeight + dimensions.toolbarHeight, "px"),
+        maxHeight: "".concat(dimensions.toolbarMenuHeight + dimensions.toolbarHeight, "px"),
+    });
+});
+var ToolbarFixer = styled('div')(function (_a) {
+    var colors = _a.colors;
+    return ({
+        display: 'flex',
+        flexDirection: 'column',
+        backgroundColor: "".concat(colors.headerBackgroundColor),
+        height: "".concat(dimensions.toolbarMenuHeight + dimensions.toolbarHeight, "px"),
+        minHeight: "".concat(dimensions.toolbarMenuHeight + dimensions.toolbarHeight, "px"),
+        maxHeight: "".concat(dimensions.toolbarMenuHeight + dimensions.toolbarHeight, "px"),
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        right: 0,
+        zIndex: 101,
+    });
+});
+var ToolbarInner = styled('div')(function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = {
+            alignItems: 'center',
+            display: 'flex',
+            margin: '0 auto',
+            width: '100%',
+            padding: 0
+        },
+        _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, colors = _a.colors;
+    if (!theme) {
+        return {};
+    }
+    return _b = {
+            backgroundColor: "".concat(colors.primary),
+            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, colors = _a.colors;
+    if (!theme) {
+        return {};
+    }
+    return _b = {
+            backgroundColor: "".concat(colors.primary),
+            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',
+            width: '100%'
+        },
+        _b[theme.breakpoints.down('md')] = {
+            padding: '0 24px',
+        },
+        _b[theme.breakpoints.up('md')] = {
+            padding: 0,
+        },
+        _b);
+});
+var menuItemHoverGreen = '#B9E1CC';
+var ToolbarMenuItem = styled(NavLink)(function (_a) {
+    var colors = _a.colors;
+    return ({
+        alignItems: 'center',
+        borderRight: '1px solid #696868',
+        color: colors.white,
+        cursor: 'pointer',
+        display: 'flex',
+        fontSize: '1.1rem',
+        padding: '0 17px',
+        height: '100%',
+        textTransform: 'capitalize',
+        userSelect: 'none',
+        position: 'relative',
+        textDecoration: 'none',
+        ':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(colors.secondary),
+            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 MobileAppBar = function (_a) {
+    var userMenuItems = _a.userMenuItems, menuItems = _a.menuItems, colors = _a.colors;
+    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, { colors: colors, style: { flexGrow: 1 } },
+        React.createElement(AppBar$3, { 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(NavLink, { key: page.name, to: page.redirectUrl || '' },
+                    React.createElement(MenuItem, { 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) { return (React.createElement(MenuItem, { key: i.id, onClick: function () {
+                        handleCloseMenu();
+                        i.action();
+                    } }, i.label)); }))))));
+};
+
+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, colors: colors }, page === null || page === void 0 ? void 0 : page.translatedTextRef));
+    };
+    return (React.createElement(Toolbar, { colors: colors },
+        React.createElement(ToolbarFixer, { colors: colors },
+            React.createElement(ToolbarInner, null,
+                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) {
+                        return (React.createElement(MenuItem$1, { key: i.id, onClick: function () {
+                                setUserMenuAnchor(null);
+                                i.action();
+                            } }, i.label));
+                    })))),
+            React.createElement(ToolbarMenu, { colors: colors },
+                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];
@@ -22644,5 +22941,5 @@ var GrepTableOfContent = function (_a) {
 };
 GrepTableOfContent.displayName = 'Grep.ToC';
 
-export { AppBar, AppBarNavList, AppBarProfile, BodyLayout, CircularLoading, Colors, ConfirmationServiceProvider, ContainedLinkList, DatePicker, DropdownMenu, EditorContext, Footer, GDPR, GrepCrumbs, DatePicker as GrepDatePicker, GrepDateRange, GrepDialogServiceProvider, GrepEditor, GrepInput, GrepSelect, GrepTable, GrepTableCard, GrepTableOfContent, GrepTableRow, GreyCover, InfoContainer, LinkList, LoadingOverlay, MainLayout, NavGuard, OverflowTooltip, ProfileInfo, SearchBar, ServiceMessage, Sidebar, SortableTable, UpdateStyle, index as Utils, convert2html, convert2txt, convertToRgba, createState, filterElements as filterContentElements, hex2rgb, hex2rgba, makeStyles, parseContent, parseContentState, useConfirmation, useContentElements, useDate, useDebounce, useGrepDialog, useStyles$d as useStyles, useToolbarStyles, withStyles };
+export { AppBar$1 as AppBar, AppBarNavList, AppBarProfile, BodyLayout, CircularLoading, Colors, ConfirmationServiceProvider, ContainedLinkList, DatePicker, DropdownMenu, EditorContext, Footer, GDPR, GrepCrumbs, DatePicker as GrepDatePicker, GrepDateRange, GrepDialogServiceProvider, GrepEditor, GrepInput, GrepSelect, GrepTable, GrepTableCard, GrepTableOfContent, GrepTableRow, GreyCover, InfoContainer, LinkList, LoadingOverlay, MainLayout, NavGuard, AppBar as NewAppBar, OverflowTooltip, ProfileInfo, SearchBar, ServiceMessage, Sidebar, SortableTable, UpdateStyle, index as Utils, convert2html, convert2txt, convertToRgba, createState, filterElements as filterContentElements, hex2rgb, hex2rgba, makeStyles, parseContent, parseContentState, useConfirmation, useContentElements, useDate, useDebounce, useGrepDialog, useStyles$d as useStyles, withStyles };
 //# sourceMappingURL=index.js.map