grep-components 1.16.0-grepf-1693.2 → 1.16.0

package/dist/index.js

@@ -5,15 +5,14 @@ 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 { useHistory, Prompt } from 'react-router-dom';
+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 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 +39,10 @@ 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);
@@ -4058,31 +4061,6 @@ 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 ({
@@ -4391,7 +4369,7 @@ var DropdownMenu = function (_a) {
 };
 
 var useFooterStyles = makeStyles()(function (theme) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
     return ({
         footer: (_a = {
                 bottom: 0,
@@ -4401,48 +4379,81 @@ var useFooterStyles = makeStyles()(function (theme) {
                 alignItems: 'center',
                 backgroundColor: theme.palette.primary.main
             },
-            _a[theme.breakpoints.down('lg')] = {
+            _a[theme.breakpoints.down('md')] = {
                 minHeight: 'unset',
             },
             _a[theme.breakpoints.up('md')] = {
-                minHeight: 50,
+                minHeight: '100px',
             },
+            _a.fontFamily = 'Montserrat',
+            _a.fontWeight = 600,
+            _a.fontSize = '14px',
             _a),
-        list: (_b = {
+        content: (_b = {
                 display: 'flex',
-                justifyContent: 'center'
+                width: '100%'
             },
-            _b[theme.breakpoints.down('lg')] = {
+            _b[theme.breakpoints.down('md')] = {
                 flexDirection: 'column',
+                padding: '0',
+                a: {
+                    width: '150px',
+                    margin: '40px auto 40px auto',
+                },
             },
             _b[theme.breakpoints.up('md')] = {
                 flexDirection: 'row',
+                padding: '0 12px 0 12px',
+                a: {
+                    marginLeft: '28px',
+                },
             },
             _b),
-        item: (_c = {
+        serviceNameText: (_c = {
                 color: Colors.white,
-                width: 'fit-content',
-                height: '10px'
-            },
-            _c[theme.breakpoints.down('lg')] = {
-                margin: '0 auto',
                 textAlign: 'center',
-                height: 'min-content',
+                display: 'block'
+            },
+            _c[theme.breakpoints.down('md')] = {
+                marginBottom: '30px',
+            },
+            _c),
+        list: (_d = {
+                display: 'flex',
+                flexDirection: 'row',
+                justifyContent: 'center'
+            },
+            _d[theme.breakpoints.down('md')] = {
+                marginBottom: '40px',
+                flexWrap: 'wrap',
+                height: '64px',
             },
-            _c[theme.breakpoints.up('md')] = {
+            _d),
+        item: (_e = {
+                color: Colors.white,
+                width: 'fit-content',
                 margin: '0',
-                borderRight: '1px solid',
-                height: '0',
+                height: '10px',
+                gap: '10px',
+                borderRight: "1px solid ".concat(theme.palette.divider)
+            },
+            _e[theme.breakpoints.down('md')] = {
+                textAlign: 'center',
+                width: 'filter-content',
             },
-            _c['&:last-child'] = {
+            _e['&:last-child'] = {
                 border: '0 !important',
             },
-            _c),
+            _e),
         itemText: {
             padding: 0,
             margin: '0 auto',
+            fontFamily: 'Montserrat',
+            fontWeight: 400,
+            fontSize: '14px',
         },
         itemBtn: {
+            textDecoration: 'underline',
             '&:hover': {
                 backgroundColor: 'unset',
             },
@@ -4451,18 +4462,28 @@ var useFooterStyles = makeStyles()(function (theme) {
 });
 
 var Footer = function (_a) {
-    var items = _a.items;
+    var items = _a.items, serviceNameText = _a.serviceNameText, udirLink = _a.udirLink, udirLogo = _a.udirLogo;
     var classes = useFooterStyles().classes;
-    var renderItem = function (text) { return (React__default.createElement(ListItemText, { className: classes.itemText, primary: text, primaryTypographyProps: { style: { fontSize: 14 } } })); };
-    return (React__default.createElement("div", { className: classes.footer },
-        React__default.createElement(Container, null,
-            React__default.createElement(List, { className: classes.list }, items.map(function (_a, i) {
-                var label = _a.label, render = _a.render, onClickItem = _a.onClickItem;
-                return (React__default.createElement(ListItem, { key: i, classes: {
-                        root: classes.item,
-                        button: onClickItem ? classes.itemBtn : undefined,
-                    }, onClick: onClickItem, button: !!onClickItem }, render ? render(function () { return renderItem(label); }) : renderItem(label)));
-            })))));
+    var renderItem = function (text) { return (React__default.createElement(ListItemText, { className: classes.itemText, primary: text, primaryTypographyProps: {
+            style: { fontSize: 14, fontFamily: 'Montserrat', fontWeight: 400 },
+        } })); };
+    return (React__default.createElement(Box, { className: classes.footer },
+        React__default.createElement(Box, { className: classes.content },
+            React__default.createElement("a", { href: udirLink },
+                React__default.createElement("img", { src: udirLogo, alt: "Utdanningsdirektoratet logo", style: { height: '43px', width: '150px' } })),
+            React__default.createElement(Container, { sx: {
+                    maxWidth: '100% !important',
+                    paddingLeft: '16px !important',
+                    paddingRight: '16px !important',
+                } },
+                React__default.createElement("span", { className: classes.serviceNameText }, serviceNameText),
+                React__default.createElement(List, { className: classes.list }, items.map(function (_a, i) {
+                    var label = _a.label, render = _a.render, onClickItem = _a.onClickItem;
+                    return (React__default.createElement(ListItem, { key: i, classes: {
+                            root: classes.item,
+                            button: onClickItem ? classes.itemBtn : undefined,
+                        }, onClick: onClickItem, button: !!onClickItem }, render ? render(function () { return renderItem(label); }) : renderItem(label)));
+                }))))));
 };
 
 var LinkList = function (props) { return (React.createElement(Box, { width: "100%", flexDirection: "column" },
@@ -5624,7 +5645,7 @@ var useContentElements = function (container, selector, options) {
 };
 
 var DatePicker = function (_a) {
-    var id = _a.id, label = _a.label, value = _a.value, variant = _a.variant, onChange = _a.onChange, errorMessage = _a.errorMessage, placeholder = _a.placeholder, fullWidth = _a.fullWidth, required = _a.required, onFocus = _a.onFocus, margin = _a.margin, sx = _a.sx, props = __rest$1(_a, ["id", "label", "value", "variant", "onChange", "errorMessage", "placeholder", "fullWidth", "required", "onFocus", "margin", "sx"]);
+    var id = _a.id, label = _a.label, value = _a.value, variant = _a.variant, onChange = _a.onChange, errorMessage = _a.errorMessage, placeholder = _a.placeholder, fullWidth = _a.fullWidth, required = _a.required, onFocus = _a.onFocus, props = __rest$1(_a, ["id", "label", "value", "variant", "onChange", "errorMessage", "placeholder", "fullWidth", "required", "onFocus"]);
     var _b = __read(useDate(value), 2), date = _b[0], setDate = _b[1];
     var _c = __read(useState(), 2), error = _c[0], setError = _c[1];
     var helperText = errorMessage || error || props.helperText;
@@ -5652,7 +5673,7 @@ var DatePicker = function (_a) {
                     default:
                         setError(undefined);
                 }
-            }, value: date, onChange: setDate, renderInput: function (params) { return (React__default.createElement(TextField, __assign({ id: id }, params, { label: label, variant: variant, onFocus: onFocus, required: required, fullWidth: fullWidth, placeholder: placeholder, sx: sx, margin: margin, error: !!error || !!errorMessage }, (helperText && { helperText: helperText })))); } }, props))));
+            }, value: date, onChange: setDate, renderInput: function (params) { return (React__default.createElement(TextField, __assign({ id: id }, params, { label: label, variant: variant, onFocus: onFocus, required: required, fullWidth: fullWidth, placeholder: placeholder, error: !!error || !!errorMessage }, (helperText && { helperText: helperText })))); } }, props))));
 };
 
 var GrepDateRange = function (_a) {
@@ -21732,6 +21753,355 @@ 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];
@@ -22627,5 +22997,7 @@ 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, withStyles };
+var utdanningsdirektoratetLogoRgbNeg = "41017f048e09b7d9.png";
+
+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, utdanningsdirektoratetLogoRgbNeg as UdirLogo, 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