grep-components 1.15.0-grepf-1792.1 → 1.15.0-grepf-1792.3

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import { Theme, MUIStyledCommonProps } from '@mui/system';
 import { v0colors } from './types';
 export declare const dimensions: {
     breadcrumbsFontSize: number;
@@ -12,26 +11,21 @@ export declare const dimensions: {
     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> & {
+export declare const ToolbarTitle: import("@emotion/styled").StyledComponent<import("react-router-dom").NavLinkProps<unknown> & import("react").RefAttributes<HTMLAnchorElement> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const EnvironmentTitle: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Toolbar: import("@emotion/styled").StyledComponent<import("@mui/system").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> & {
+export declare const ToolbarFixer: import("@emotion/styled").StyledComponent<import("@mui/system").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;
-}, {}, {}>;
+export declare const ToolbarInner: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ToolbarLeft: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ToolbarRight: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const UserContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const AccountName: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const ToolbarMenu: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const MobileToolbarMenu: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ToolbarMenuInner: import("@emotion/styled").StyledComponent<import("@mui/system").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> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const MobileToolbarMenuItem: import("@emotion/styled").StyledComponent<import("react-router-dom").NavLinkProps<unknown> & import("react").RefAttributes<HTMLAnchorElement> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/dist/index.js

@@ -40,6 +40,7 @@ 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';
@@ -21765,7 +21766,7 @@ var Toolbar = styled('div')(function (_a) {
     return ({
         display: 'flex',
         flexDirection: 'column',
-        backgroundColor: "".concat(colors.headerBackgroundColor),
+        backgroundColor: colors.headerBackgroundColor,
         height: "".concat(dimensions.toolbarMenuHeight + dimensions.toolbarHeight, "px"),
         minHeight: "".concat(dimensions.toolbarMenuHeight + dimensions.toolbarHeight, "px"),
         maxHeight: "".concat(dimensions.toolbarMenuHeight + dimensions.toolbarHeight, "px"),
@@ -21776,7 +21777,7 @@ var ToolbarFixer = styled('div')(function (_a) {
     return ({
         display: 'flex',
         flexDirection: 'column',
-        backgroundColor: "".concat(colors.headerBackgroundColor),
+        backgroundColor: colors.headerBackgroundColor,
         height: "".concat(dimensions.toolbarMenuHeight + dimensions.toolbarHeight, "px"),
         minHeight: "".concat(dimensions.toolbarMenuHeight + dimensions.toolbarHeight, "px"),
         maxHeight: "".concat(dimensions.toolbarMenuHeight + dimensions.toolbarHeight, "px"),
@@ -21845,12 +21846,9 @@ var AccountName = styled('span')(function () { return ({
 }); });
 var ToolbarMenu = styled('div')(function (_a) {
     var _b;
-    var theme = _a.theme, colors = _a.colors;
-    if (!theme) {
-        return {};
-    }
+    var theme = _a.theme;
     return _b = {
-            backgroundColor: "".concat(colors.primary),
+            backgroundColor: theme.palette.primary.main,
             height: "".concat(dimensions.toolbarMenuHeight, "px"),
             maxHeight: "".concat(dimensions.toolbarMenuHeight, "px"),
             minHeight: "".concat(dimensions.toolbarMenuHeight, "px"),
@@ -21870,12 +21868,9 @@ var ToolbarMenu = styled('div')(function (_a) {
 });
 var MobileToolbarMenu = styled('div')(function (_a) {
     var _b;
-    var theme = _a.theme, colors = _a.colors;
-    if (!theme) {
-        return {};
-    }
-    return _b = {
-            backgroundColor: "".concat(colors.primary),
+    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"),
@@ -21891,7 +21886,7 @@ var MobileToolbarMenu = styled('div')(function (_a) {
         _b[theme.breakpoints.up('sm')] = {
             display: 'none',
         },
-        _b;
+        _b);
 });
 var ToolbarMenuInner = styled('div')(function (_a) {
     var _b;
@@ -21913,11 +21908,11 @@ var ToolbarMenuInner = styled('div')(function (_a) {
 });
 var menuItemHoverGreen = '#B9E1CC';
 var ToolbarMenuItem = styled(NavLink)(function (_a) {
-    var colors = _a.colors;
+    var theme = _a.theme;
     return ({
         alignItems: 'center',
         borderRight: '1px solid #696868',
-        color: colors.white,
+        color: theme.palette.background.default,
         cursor: 'pointer',
         display: 'flex',
         fontSize: '1.1rem',
@@ -21942,7 +21937,7 @@ var ToolbarMenuItem = styled(NavLink)(function (_a) {
             left: '50%',
             width: '32px',
             marginLeft: '-16px',
-            borderBottom: "2px solid ".concat(colors.secondary),
+            borderBottom: "2px solid ".concat(theme.palette.secondary.main),
             opacity: 0,
             content: '""',
             transition: 'all 0.3s ease',
@@ -21960,10 +21955,21 @@ var ToolbarMenuItem = styled(NavLink)(function (_a) {
             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, colors = _a.colors;
+    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) {
@@ -21980,23 +21986,27 @@ var MobileAppBar = function (_a) {
     var handleCloseMenu = function () {
         setAnchorElMenu(null);
     };
-    return (React.createElement(MobileToolbarMenu, { colors: colors, style: { flexGrow: 1 } },
+    return (React.createElement(MobileToolbarMenu, { 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))); })),
+                    } }, 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) { return (React.createElement(MenuItem, { key: i.id, onClick: function () {
-                        handleCloseMenu();
-                        i.action();
-                    } }, i.label)); }))))));
+                    } }, userMenuItems.map(function (i, index) { return (React.createElement(Box, { key: i.id },
+                    React.createElement(MenuItem, { key: i.id, onClick: function () {
+                            handleCloseMenu();
+                            i.action();
+                        } }, i.label),
+                    userMenuItems.length > index + 1 && React.createElement(Divider, null))); }))))));
 };
 
 var AppBar = function (_a) {
@@ -22013,7 +22023,7 @@ var AppBar = function (_a) {
         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(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, { colors: colors },
         React.createElement(ToolbarFixer, { colors: colors },
@@ -22035,13 +22045,15 @@ var AppBar = function (_a) {
                         }, 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));
+                        } }, 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.label),
+                            userMenuItems.length > index + 1 && React.createElement(Divider$1, null)));
                     })))),
-            React.createElement(ToolbarMenu, { colors: colors },
+            React.createElement(ToolbarMenu, null,
                 React.createElement(ToolbarMenuInner, null, menuItems.map(function (page) { return _renderToolbarMenuItem(page); }))),
             React.createElement(MobileAppBar, { menuItems: menuItems, userMenuItems: userMenuItems, colors: colors }))));
 };