@selfcommunity/react-ui 0.7.50-event.30 → 0.7.50-events.101

package/lib/esm/components/MyEventsWidget/Skeleton.d.ts

@@ -0,0 +1 @@
+export default function MyEventsWidgetSkeleton(): JSX.Element;

package/lib/esm/components/MyEventsWidget/Skeleton.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, CardActions } from '@mui/material';
+import Skeleton from '@mui/material/Skeleton';
+import { styled } from '@mui/material/styles';
+import Widget from '../Widget';
+import { PREFIX } from './constants';
+import { SCEventTemplateType } from '../../types/event';
+import { EventSkeleton } from '../Event';
+const classes = {
+    root: `${PREFIX}-skeleton-root`,
+    calendar: `${PREFIX}-calendar`,
+    content: `${PREFIX}-content`,
+    firstDivider: `${PREFIX}-first-divider`,
+    secondDivider: `${PREFIX}-second-divider`,
+    actions: `${PREFIX}-actions`
+};
+const Root = styled(Widget, {
+    name: PREFIX,
+    slot: 'SkeletonRoot',
+    overridesResolver: (_props, styles) => styles.skeletonRoot
+})(() => ({}));
+export default function MyEventsWidgetSkeleton() {
+    return (_jsxs(Root, Object.assign({ className: classes.root }, { children: [_jsx(Box, Object.assign({ padding: "12px 16px" }, { children: _jsx(Skeleton, { animation: "wave", width: "141px", height: "33px" }) })), _jsx(EventSkeleton, { template: SCEventTemplateType.DETAIL, elevation: 0, square: true, actions: _jsx(_Fragment, {}) }), _jsxs(CardActions, Object.assign({ className: classes.actions }, { children: [_jsx(Skeleton, { animation: "wave", variant: "rounded", width: "14px", height: "14px" }), _jsx(Skeleton, { animation: "wave", width: "52px", height: "20px" }), _jsx(Skeleton, { animation: "wave", variant: "rounded", width: "14px", height: "14px" })] }))] })));
+}

package/lib/esm/components/MyEventsWidget/constants.d.ts

@@ -0,0 +1 @@
+export declare const PREFIX = "SCMyEventsWidget";

package/lib/esm/components/MyEventsWidget/constants.js

@@ -0,0 +1 @@
+export const PREFIX = 'SCMyEventsWidget';

package/lib/esm/components/MyEventsWidget/index.d.ts

@@ -0,0 +1,4 @@
+import MyEventsWidget, { MyEventsWidgetProps } from './MyEventsWidget';
+import MyEventsWidgetSkeleton from './Skeleton';
+export default MyEventsWidget;
+export { MyEventsWidgetSkeleton, type MyEventsWidgetProps };

package/lib/esm/components/MyEventsWidget/index.js

@@ -0,0 +1,4 @@
+import MyEventsWidget from './MyEventsWidget';
+import MyEventsWidgetSkeleton from './Skeleton';
+export default MyEventsWidget;
+export { MyEventsWidgetSkeleton };

package/lib/esm/components/NavigationMenuIconButton/DefaultDrawerContent.js

@@ -1,7 +1,8 @@
 import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Button, ListItem, Typography, Zoom } from '@mui/material';
 import { Link, SCRoutes, useSCFetchCategories, useSCRouting } from '@selfcommunity/react-core';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import Category from '../Category';
 import { FormattedMessage } from 'react-intl';
 import { sortByAttr } from '@selfcommunity/utils';
@@ -52,14 +53,5 @@ export default function DefaultDrawerContent(inProps) {
         onTouchMove: mouseLeave
     });
     //order
-    return (React.createElement(Root, Object.assign({ className: classNames(className, classes.root) }, rest),
-        React.createElement(Typography, { variant: "subtitle1" },
-            React.createElement("span", null,
-                React.createElement(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.category.title", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.category.title" })),
-            ' ',
-            React.createElement(Button, { variant: "text", component: Link, color: "secondary", to: scRoutingContext.url(SCRoutes.CATEGORIES_LIST_ROUTE_NAME, {}) },
-                React.createElement(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.category.seeAll", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.category.seeAll" }))),
-        categoriesOrdered.map((c, index) => (React.createElement(Zoom, { in: true, style: { transform: isHovered[c.id] && 'scale(1.05)' }, key: index },
-            React.createElement(ListItem, { key: c.id },
-                React.createElement(Category, Object.assign({ ButtonBaseProps: { component: Link, to: scRoutingContext.url(SCRoutes.CATEGORY_ROUTE_NAME, c) }, elevation: 0, category: c, actions: null }, CategoryItemProps, getMouseEvents(() => handleMouseEnter(c.id), () => handleMouseLeave(c.id))))))))));
+    return (_jsxs(Root, Object.assign({ className: classNames(className, classes.root) }, rest, { children: [_jsxs(Typography, Object.assign({ variant: "subtitle1" }, { children: [_jsx("span", { children: _jsx(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.category.title", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.category.title" }) }), ' ', _jsx(Button, Object.assign({ variant: "text", component: Link, color: "secondary", to: scRoutingContext.url(SCRoutes.CATEGORIES_LIST_ROUTE_NAME, {}) }, { children: _jsx(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.category.seeAll", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.category.seeAll" }) }))] })), categoriesOrdered.map((c, index) => (_jsx(Zoom, Object.assign({ in: true, style: { transform: isHovered[c.id] && 'scale(1.05)' } }, { children: _jsx(ListItem, { children: _jsx(Category, Object.assign({ ButtonBaseProps: { component: Link, to: scRoutingContext.url(SCRoutes.CATEGORY_ROUTE_NAME, c) }, elevation: 0, category: c, actions: null }, CategoryItemProps, getMouseEvents(() => handleMouseEnter(c.id), () => handleMouseLeave(c.id)))) }, c.id) }), index)))] })));
 }

package/lib/esm/components/NavigationMenuIconButton/DefaultHeaderContent.js

@@ -1,6 +1,7 @@
 import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Link, SCPreferences, SCRoutes, useSCPreferences, useSCRouting } from '@selfcommunity/react-core';
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 import { styled } from '@mui/material/styles';
 import { Box } from '@mui/material';
 import classNames from 'classnames';
@@ -26,7 +27,5 @@ export default function DefaultHeaderContent(inProps) {
     const _logo = useMemo(() => {
         return SCPreferences.LOGO_NAVBAR_LOGO in scPreferences.preferences ? scPreferences.preferences[SCPreferences.LOGO_NAVBAR_LOGO].value : null;
     }, [scPreferences.preferences]);
-    return (React.createElement(Root, Object.assign({ className: classNames(className, classes.root) }, rest),
-        React.createElement(Link, { to: scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}) },
-            React.createElement("img", { src: _logo, alt: "logo" }))));
+    return (_jsx(Root, Object.assign({ className: classNames(className, classes.root) }, rest, { children: _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}) }, { children: _jsx("img", { src: _logo, alt: "logo" }) })) })));
 }

package/lib/esm/components/NavigationMenuIconButton/NavigationMenuIconButton.js

@@ -1,5 +1,6 @@
 import { __rest } from "tslib";
-import React, { useCallback, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { Box, Divider, Drawer, Icon, IconButton, List } from '@mui/material';
 import classNames from 'classnames';
@@ -60,7 +61,7 @@ export default function NavigationMenuIconButton(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { className = null, DrawerProps = { anchor: 'left' }, drawerHeaderContent = React.createElement(DefaultHeaderContent, null), drawerContent = React.createElement(DefaultDrawerContent, null), ScrollContainerProps = {} } = props, rest = __rest(props, ["className", "DrawerProps", "drawerHeaderContent", "drawerContent", "ScrollContainerProps"]);
+    const { className = null, DrawerProps = { anchor: 'left' }, drawerHeaderContent = _jsx(DefaultHeaderContent, {}), drawerContent = _jsx(DefaultDrawerContent, {}), ScrollContainerProps = {} } = props, rest = __rest(props, ["className", "DrawerProps", "drawerHeaderContent", "drawerContent", "ScrollContainerProps"]);
     // STATE
     const [anchorEl, setAnchorEl] = useState(null);
     // CONTEXT
@@ -76,15 +77,5 @@ export default function NavigationMenuIconButton(inProps) {
     if (!preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY].value && !((_a = scUserContext.user) === null || _a === void 0 ? void 0 : _a.id)) {
         return null;
     }
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { onClick: handleOpen }),
-            React.createElement(Icon, null, "menu")),
-        React.createElement(DrawerRoot, Object.assign({ className: classes.drawerRoot }, DrawerProps, { open: Boolean(anchorEl), onClose: handleClose }),
-            React.createElement(Box, { className: classes.drawerHeader },
-                drawerHeaderContent,
-                React.createElement(IconButton, { className: classes.drawerHeaderAction, onClick: handleClose },
-                    React.createElement(Icon, null, "close"))),
-            React.createElement(Divider, null),
-            React.createElement(ScrollContainer, Object.assign({}, ScrollContainerProps),
-                React.createElement(List, { className: classes.drawerContent, onClick: handleClose }, drawerContent)))));
+    return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { onClick: handleOpen }, { children: _jsx(Icon, { children: "menu" }) })), _jsxs(DrawerRoot, Object.assign({ className: classes.drawerRoot }, DrawerProps, { open: Boolean(anchorEl), onClose: handleClose }, { children: [_jsxs(Box, Object.assign({ className: classes.drawerHeader }, { children: [drawerHeaderContent, _jsx(IconButton, Object.assign({ className: classes.drawerHeaderAction, onClick: handleClose }, { children: _jsx(Icon, { children: "close" }) }))] })), _jsx(Divider, {}), _jsx(ScrollContainer, Object.assign({}, ScrollContainerProps, { children: _jsx(List, Object.assign({ className: classes.drawerContent, onClick: handleClose }, { children: drawerContent })) }))] }))] }));
 }

package/lib/esm/components/NavigationSettingsIconButton/NavigationSettingsIconButton.js

@@ -1,5 +1,6 @@
 import { __rest } from "tslib";
-import React, { useMemo, useState } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { Divider, Icon, IconButton, List, ListItem, ListItemButton, Menu, MenuItem, SwipeableDrawer, useMediaQuery, useTheme } from '@mui/material';
 import { Link, SCPreferences, SCRoutes, UserUtils, useSCPreferences, useSCRouting, useSCUser } from '@selfcommunity/react-core';
@@ -106,95 +107,58 @@ export default function NavigationSettingsIconButton(inProps) {
     const renderList = () => {
         if (isMobile) {
             return [
-                React.createElement(ListItem, { className: classes.item, key: "profile" },
-                    React.createElement(ListItemButton, { component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, scUserContext.user) },
-                        React.createElement(FormattedMessage, { id: "ui.navigationSettingsIconButton.profile", defaultMessage: "ui.navigationSettingsIconButton.profile" }))),
-                preferences[SCPreferences.CONFIGURATIONS_FOLLOW_ENABLED] && (React.createElement(ListItem, { className: classes.item, key: "followings" },
-                    React.createElement(ListItemButton, { component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_FOLLOWINGS_ROUTE_NAME, scUserContext.user) },
-                        React.createElement(FormattedMessage, { id: "ui.navigationSettingsIconButton.followings", defaultMessage: "ui.navigationSettingsIconButton.followings" })))),
-                preferences[SCPreferences.CONFIGURATIONS_FOLLOW_ENABLED] && (React.createElement(ListItem, { className: classes.item, key: "followers" },
-                    React.createElement(ListItemButton, { component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_FOLLOWERS_ROUTE_NAME, scUserContext.user) },
-                        React.createElement(FormattedMessage, { id: "ui.navigationSettingsIconButton.followers", defaultMessage: "ui.navigationSettingsIconButton.followers" })))),
-                !preferences[SCPreferences.CONFIGURATIONS_FOLLOW_ENABLED] && (React.createElement(ListItem, { className: classes.item, key: "connections" },
-                    React.createElement(ListItemButton, { component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_CONNECTIONS_ROUTE_NAME, scUserContext.user) },
-                        React.createElement(FormattedMessage, { id: "ui.navigationSettingsIconButton.connections", defaultMessage: "ui.navigationSettingsIconButton.connections" })))),
-                preferences[SCPreferences.ADDONS_LOYALTY_POINTS_COLLECTION] && (React.createElement(ListItem, { className: classes.item, key: "loyaltyProgram" },
-                    React.createElement(ListItemButton, { component: Link, to: scRoutingContext.url(SCRoutes.LOYALTY_ROUTE_NAME, {}) },
-                        React.createElement(FormattedMessage, { id: "ui.navigationSettingsIconButton.loyalty", defaultMessage: "ui.navigationSettingsIconButton.loyalty" })))),
-                preferences[SCPreferences.CONFIGURATIONS_POST_TYPE_ENABLED] && (React.createElement(ListItem, { className: classes.item, key: "followedPosts" },
-                    React.createElement(ListItemButton, { component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_FOLLOWED_POSTS_ROUTE_NAME, scUserContext.user) },
-                        React.createElement(FormattedMessage, { id: "ui.navigationSettingsIconButton.postsFollowed", defaultMessage: "ui.navigationSettingsIconButton.postsFollowed" })))),
-                preferences[SCPreferences.CONFIGURATIONS_DISCUSSION_TYPE_ENABLED] && (React.createElement(ListItem, { className: classes.item, key: "followedDiscussions" },
-                    React.createElement(ListItemButton, { component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_FOLLOWED_DISCUSSIONS_ROUTE_NAME, scUserContext.user) },
-                        React.createElement(FormattedMessage, { id: "ui.navigationSettingsIconButton.discussionsFollowed", defaultMessage: "ui.navigationSettingsIconButton.discussionsFollowed" })))),
-                React.createElement(ListItem, { className: classes.item, key: "privateMessages" },
-                    React.createElement(ListItemButton, { component: Link, to: scRoutingContext.url(SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, {}) },
-                        React.createElement(FormattedMessage, { id: "ui.navigationSettingsIconButton.privateMessages", defaultMessage: "ui.navigationSettingsIconButton.privateMessages" }))),
-                ...items.map((item, index) => (React.createElement(ListItem, { className: classes.item, key: `custom_item_${index}` },
-                    React.createElement(ListItemButton, { component: Link, to: item.href }, item.label)))),
+                _jsx(ListItem, Object.assign({ className: classes.item }, { children: _jsx(ListItemButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, scUserContext.user) }, { children: _jsx(FormattedMessage, { id: "ui.navigationSettingsIconButton.profile", defaultMessage: "ui.navigationSettingsIconButton.profile" }) })) }), "profile"),
+                preferences[SCPreferences.CONFIGURATIONS_FOLLOW_ENABLED] && (_jsx(ListItem, Object.assign({ className: classes.item }, { children: _jsx(ListItemButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_FOLLOWINGS_ROUTE_NAME, scUserContext.user) }, { children: _jsx(FormattedMessage, { id: "ui.navigationSettingsIconButton.followings", defaultMessage: "ui.navigationSettingsIconButton.followings" }) })) }), "followings")),
+                preferences[SCPreferences.CONFIGURATIONS_FOLLOW_ENABLED] && (_jsx(ListItem, Object.assign({ className: classes.item }, { children: _jsx(ListItemButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_FOLLOWERS_ROUTE_NAME, scUserContext.user) }, { children: _jsx(FormattedMessage, { id: "ui.navigationSettingsIconButton.followers", defaultMessage: "ui.navigationSettingsIconButton.followers" }) })) }), "followers")),
+                !preferences[SCPreferences.CONFIGURATIONS_FOLLOW_ENABLED] && (_jsx(ListItem, Object.assign({ className: classes.item }, { children: _jsx(ListItemButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_CONNECTIONS_ROUTE_NAME, scUserContext.user) }, { children: _jsx(FormattedMessage, { id: "ui.navigationSettingsIconButton.connections", defaultMessage: "ui.navigationSettingsIconButton.connections" }) })) }), "connections")),
+                preferences[SCPreferences.ADDONS_LOYALTY_POINTS_COLLECTION] && (_jsx(ListItem, Object.assign({ className: classes.item }, { children: _jsx(ListItemButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.LOYALTY_ROUTE_NAME, {}) }, { children: _jsx(FormattedMessage, { id: "ui.navigationSettingsIconButton.loyalty", defaultMessage: "ui.navigationSettingsIconButton.loyalty" }) })) }), "loyaltyProgram")),
+                preferences[SCPreferences.CONFIGURATIONS_POST_TYPE_ENABLED] && (_jsx(ListItem, Object.assign({ className: classes.item }, { children: _jsx(ListItemButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_FOLLOWED_POSTS_ROUTE_NAME, scUserContext.user) }, { children: _jsx(FormattedMessage, { id: "ui.navigationSettingsIconButton.postsFollowed", defaultMessage: "ui.navigationSettingsIconButton.postsFollowed" }) })) }), "followedPosts")),
+                preferences[SCPreferences.CONFIGURATIONS_DISCUSSION_TYPE_ENABLED] && (_jsx(ListItem, Object.assign({ className: classes.item }, { children: _jsx(ListItemButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_FOLLOWED_DISCUSSIONS_ROUTE_NAME, scUserContext.user) }, { children: _jsx(FormattedMessage, { id: "ui.navigationSettingsIconButton.discussionsFollowed", defaultMessage: "ui.navigationSettingsIconButton.discussionsFollowed" }) })) }), "followedDiscussions")),
+                _jsx(ListItem, Object.assign({ className: classes.item }, { children: _jsx(ListItemButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, {}) }, { children: _jsx(FormattedMessage, { id: "ui.navigationSettingsIconButton.privateMessages", defaultMessage: "ui.navigationSettingsIconButton.privateMessages" }) })) }), "privateMessages"),
+                ...items.map((item, index) => (_jsx(ListItem, Object.assign({ className: classes.item }, { children: _jsx(ListItemButton, Object.assign({ component: Link, to: item.href }, { children: item.label })) }), `custom_item_${index}`))),
                 ...(isAdmin
                     ? [
-                        React.createElement(Divider, { key: "admin_divider" }),
-                        React.createElement(ListItem, { className: classes.item, key: "platform" },
-                            React.createElement(ListItemButton, { onClick: () => fetchPlatform('') },
-                                React.createElement(FormattedMessage, { id: "ui.navigationSettingsIconButton.platform", defaultMessage: "ui.navigationSettingsIconButton.platform" })))
+                        _jsx(Divider, {}, "admin_divider"),
+                        _jsx(ListItem, Object.assign({ className: classes.item }, { children: _jsx(ListItemButton, Object.assign({ onClick: () => fetchPlatform('') }, { children: _jsx(FormattedMessage, { id: "ui.navigationSettingsIconButton.platform", defaultMessage: "ui.navigationSettingsIconButton.platform" }) })) }), "platform")
                     ]
                     : []),
                 ...(isModerator || isAdmin
                     ? [
-                        React.createElement(Divider, { key: "moderation_divider" }),
-                        React.createElement(ListItem, { className: classes.item, key: "moderation" },
-                            React.createElement(ListItemButton, { onClick: () => fetchPlatform('/moderation/flags/') },
-                                React.createElement(FormattedMessage, { id: "ui.navigationSettingsIconButton.moderation", defaultMessage: "ui.navigationSettingsIconButton.moderation" })))
+                        _jsx(Divider, {}, "moderation_divider"),
+                        _jsx(ListItem, Object.assign({ className: classes.item }, { children: _jsx(ListItemButton, Object.assign({ onClick: () => fetchPlatform('/moderation/flags/') }, { children: _jsx(FormattedMessage, { id: "ui.navigationSettingsIconButton.moderation", defaultMessage: "ui.navigationSettingsIconButton.moderation" }) })) }), "moderation")
                     ]
                     : []),
-                React.createElement(ListItem, { className: classes.item, key: "settings" },
-                    React.createElement(ListItemButton, { component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_SETTINGS_ROUTE_NAME, scUserContext.user) },
-                        React.createElement(FormattedMessage, { id: "ui.navigationSettingsIconButton.settings", defaultMessage: "ui.navigationSettingsIconButton.settings" }))),
-                React.createElement(Divider, { key: "divider" }),
-                React.createElement(ListItem, { className: classes.item, key: "logout" },
-                    React.createElement(ListItemButton, { onClick: handleLogout },
-                        React.createElement(FormattedMessage, { id: "ui.navigationSettingsIconButton.logout", defaultMessage: "ui.navigationSettingsIconButton.logout" })))
+                _jsx(ListItem, Object.assign({ className: classes.item }, { children: _jsx(ListItemButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_SETTINGS_ROUTE_NAME, scUserContext.user) }, { children: _jsx(FormattedMessage, { id: "ui.navigationSettingsIconButton.settings", defaultMessage: "ui.navigationSettingsIconButton.settings" }) })) }), "settings"),
+                _jsx(Divider, {}, "divider"),
+                _jsx(ListItem, Object.assign({ className: classes.item }, { children: _jsx(ListItemButton, Object.assign({ onClick: handleLogout }, { children: _jsx(FormattedMessage, { id: "ui.navigationSettingsIconButton.logout", defaultMessage: "ui.navigationSettingsIconButton.logout" }) })) }), "logout")
             ];
         }
         else {
             return [
-                React.createElement(MenuItem, { className: classes.item, key: "profile", component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, scUserContext.user) },
-                    React.createElement(FormattedMessage, { id: "ui.navigationSettingsIconButton.profile", defaultMessage: "ui.navigationSettingsIconButton.profile" })),
-                preferences[SCPreferences.CONFIGURATIONS_FOLLOW_ENABLED] && (React.createElement(MenuItem, { className: classes.item, key: "followings", component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_FOLLOWINGS_ROUTE_NAME, scUserContext.user) },
-                    React.createElement(FormattedMessage, { id: "ui.navigationSettingsIconButton.followings", defaultMessage: "ui.navigationSettingsIconButton.followings" }))),
-                preferences[SCPreferences.CONFIGURATIONS_FOLLOW_ENABLED] && (React.createElement(MenuItem, { className: classes.item, key: "followers", component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_FOLLOWERS_ROUTE_NAME, scUserContext.user) },
-                    React.createElement(FormattedMessage, { id: "ui.navigationSettingsIconButton.followers", defaultMessage: "ui.navigationSettingsIconButton.followers" }))),
-                !preferences[SCPreferences.CONFIGURATIONS_FOLLOW_ENABLED] && (React.createElement(MenuItem, { className: classes.item, key: "connections", component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_CONNECTIONS_ROUTE_NAME, scUserContext.user) },
-                    React.createElement(FormattedMessage, { id: "ui.navigationSettingsIconButton.connections", defaultMessage: "ui.navigationSettingsIconButton.connections" }))),
-                preferences[SCPreferences.ADDONS_LOYALTY_POINTS_COLLECTION] && (React.createElement(MenuItem, { className: classes.item, key: "loyaltyProgram", component: Link, to: scRoutingContext.url(SCRoutes.LOYALTY_ROUTE_NAME, {}) },
-                    React.createElement(FormattedMessage, { id: "ui.navigationSettingsIconButton.loyalty", defaultMessage: "ui.navigationSettingsIconButton.loyalty" }))),
-                preferences[SCPreferences.CONFIGURATIONS_POST_TYPE_ENABLED] && (React.createElement(MenuItem, { className: classes.item, key: "followedPosts", component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_FOLLOWED_POSTS_ROUTE_NAME, scUserContext.user) },
-                    React.createElement(FormattedMessage, { id: "ui.navigationSettingsIconButton.postsFollowed", defaultMessage: "ui.navigationSettingsIconButton.postsFollowed" }))),
-                preferences[SCPreferences.CONFIGURATIONS_DISCUSSION_TYPE_ENABLED] && (React.createElement(MenuItem, { className: classes.item, key: "followedDiscussions", component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_FOLLOWED_DISCUSSIONS_ROUTE_NAME, scUserContext.user) },
-                    React.createElement(FormattedMessage, { id: "ui.navigationSettingsIconButton.discussionsFollowed", defaultMessage: "ui.navigationSettingsIconButton.discussionsFollowed" }))),
-                React.createElement(MenuItem, { className: classes.item, key: "privateMessages", component: Link, to: scRoutingContext.url(SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, {}) },
-                    React.createElement(FormattedMessage, { id: "ui.navigationSettingsIconButton.privateMessages", defaultMessage: "ui.navigationSettingsIconButton.privateMessages" })),
-                ...items.map((item, index) => (React.createElement(MenuItem, { className: classes.item, key: `custom_item_${index}`, component: Link, to: item.href }, item.label))),
+                _jsx(MenuItem, Object.assign({ className: classes.item, component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, scUserContext.user) }, { children: _jsx(FormattedMessage, { id: "ui.navigationSettingsIconButton.profile", defaultMessage: "ui.navigationSettingsIconButton.profile" }) }), "profile"),
+                preferences[SCPreferences.CONFIGURATIONS_FOLLOW_ENABLED] && (_jsx(MenuItem, Object.assign({ className: classes.item, component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_FOLLOWINGS_ROUTE_NAME, scUserContext.user) }, { children: _jsx(FormattedMessage, { id: "ui.navigationSettingsIconButton.followings", defaultMessage: "ui.navigationSettingsIconButton.followings" }) }), "followings")),
+                preferences[SCPreferences.CONFIGURATIONS_FOLLOW_ENABLED] && (_jsx(MenuItem, Object.assign({ className: classes.item, component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_FOLLOWERS_ROUTE_NAME, scUserContext.user) }, { children: _jsx(FormattedMessage, { id: "ui.navigationSettingsIconButton.followers", defaultMessage: "ui.navigationSettingsIconButton.followers" }) }), "followers")),
+                !preferences[SCPreferences.CONFIGURATIONS_FOLLOW_ENABLED] && (_jsx(MenuItem, Object.assign({ className: classes.item, component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_CONNECTIONS_ROUTE_NAME, scUserContext.user) }, { children: _jsx(FormattedMessage, { id: "ui.navigationSettingsIconButton.connections", defaultMessage: "ui.navigationSettingsIconButton.connections" }) }), "connections")),
+                preferences[SCPreferences.ADDONS_LOYALTY_POINTS_COLLECTION] && (_jsx(MenuItem, Object.assign({ className: classes.item, component: Link, to: scRoutingContext.url(SCRoutes.LOYALTY_ROUTE_NAME, {}) }, { children: _jsx(FormattedMessage, { id: "ui.navigationSettingsIconButton.loyalty", defaultMessage: "ui.navigationSettingsIconButton.loyalty" }) }), "loyaltyProgram")),
+                preferences[SCPreferences.CONFIGURATIONS_POST_TYPE_ENABLED] && (_jsx(MenuItem, Object.assign({ className: classes.item, component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_FOLLOWED_POSTS_ROUTE_NAME, scUserContext.user) }, { children: _jsx(FormattedMessage, { id: "ui.navigationSettingsIconButton.postsFollowed", defaultMessage: "ui.navigationSettingsIconButton.postsFollowed" }) }), "followedPosts")),
+                preferences[SCPreferences.CONFIGURATIONS_DISCUSSION_TYPE_ENABLED] && (_jsx(MenuItem, Object.assign({ className: classes.item, component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_FOLLOWED_DISCUSSIONS_ROUTE_NAME, scUserContext.user) }, { children: _jsx(FormattedMessage, { id: "ui.navigationSettingsIconButton.discussionsFollowed", defaultMessage: "ui.navigationSettingsIconButton.discussionsFollowed" }) }), "followedDiscussions")),
+                _jsx(MenuItem, Object.assign({ className: classes.item, component: Link, to: scRoutingContext.url(SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, {}) }, { children: _jsx(FormattedMessage, { id: "ui.navigationSettingsIconButton.privateMessages", defaultMessage: "ui.navigationSettingsIconButton.privateMessages" }) }), "privateMessages"),
+                ...items.map((item, index) => (_jsx(MenuItem, Object.assign({ className: classes.item, component: Link, to: item.href }, { children: item.label }), `custom_item_${index}`))),
                 ...(isAdmin
                     ? [
-                        React.createElement(Divider, { key: "platform_divider" }),
-                        React.createElement(MenuItem, { className: classes.item, key: "platform", onClick: () => fetchPlatform('') },
-                            React.createElement(FormattedMessage, { id: "ui.navigationSettingsIconButton.platform", defaultMessage: "ui.navigationSettingsIconButton.platform" }))
+                        _jsx(Divider, {}, "platform_divider"),
+                        _jsx(MenuItem, Object.assign({ className: classes.item, onClick: () => fetchPlatform('') }, { children: _jsx(FormattedMessage, { id: "ui.navigationSettingsIconButton.platform", defaultMessage: "ui.navigationSettingsIconButton.platform" }) }), "platform")
                     ]
                     : []),
                 ...(isModerator || isAdmin
                     ? [
-                        React.createElement(Divider, { key: "moderation_divider" }),
-                        React.createElement(MenuItem, { className: classes.item, key: "moderation", onClick: () => fetchPlatform('/moderation/flags/') },
-                            React.createElement(FormattedMessage, { id: "ui.navigationSettingsIconButton.moderation", defaultMessage: "ui.navigationSettingsIconButton.moderation" }))
+                        _jsx(Divider, {}, "moderation_divider"),
+                        _jsx(MenuItem, Object.assign({ className: classes.item, onClick: () => fetchPlatform('/moderation/flags/') }, { children: _jsx(FormattedMessage, { id: "ui.navigationSettingsIconButton.moderation", defaultMessage: "ui.navigationSettingsIconButton.moderation" }) }), "moderation")
                     ]
                     : []),
-                React.createElement(MenuItem, { className: classes.item, key: "settings", component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_SETTINGS_ROUTE_NAME, scUserContext.user) },
-                    React.createElement(FormattedMessage, { id: "ui.navigationSettingsIconButton.settings", defaultMessage: "ui.navigationSettingsIconButton.settings" })),
-                React.createElement(Divider, { key: "divider" }),
-                React.createElement(MenuItem, { className: classes.item, key: "logout", onClick: handleLogout },
-                    React.createElement(FormattedMessage, { id: "ui.navigationSettingsIconButton.logout", defaultMessage: "ui.navigationSettingsIconButton.logout" }))
+                _jsx(MenuItem, Object.assign({ className: classes.item, component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_SETTINGS_ROUTE_NAME, scUserContext.user) }, { children: _jsx(FormattedMessage, { id: "ui.navigationSettingsIconButton.settings", defaultMessage: "ui.navigationSettingsIconButton.settings" }) }), "settings"),
+                _jsx(Divider, {}, "divider"),
+                _jsx(MenuItem, Object.assign({ className: classes.item, onClick: handleLogout }, { children: _jsx(FormattedMessage, { id: "ui.navigationSettingsIconButton.logout", defaultMessage: "ui.navigationSettingsIconButton.logout" }) }), "logout")
             ];
         }
     };
@@ -202,9 +166,5 @@ export default function NavigationSettingsIconButton(inProps) {
     if (!scUserContext.user) {
         return null;
     }
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { onClick: handleOpen }),
-            React.createElement(Icon, null, "more_vert")),
-        isMobile ? (React.createElement(SwipeableDrawerRoot, { onClick: () => setAnchorEl(null), className: classes.drawerRoot, anchor: "bottom", open: Boolean(anchorEl), onClose: handleClose, onOpen: handleOpen, PaperProps: { className: classes.paper }, disableSwipeToOpen: true },
-            React.createElement(List, null, renderList()))) : (React.createElement(MenuRoot, { onClick: () => setAnchorEl(null), className: classes.menuRoot, anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose, PaperProps: { className: classes.paper } }, renderList()))));
+    return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { onClick: handleOpen }, { children: _jsx(Icon, { children: "more_vert" }) })), isMobile ? (_jsx(SwipeableDrawerRoot, Object.assign({ onClick: () => setAnchorEl(null), className: classes.drawerRoot, anchor: "bottom", open: Boolean(anchorEl), onClose: handleClose, onOpen: handleOpen, PaperProps: { className: classes.paper }, disableSwipeToOpen: true }, { children: _jsx(List, { children: renderList() }) }))) : (_jsx(MenuRoot, Object.assign({ onClick: () => setAnchorEl(null), className: classes.menuRoot, anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose, PaperProps: { className: classes.paper } }, { children: renderList() })))] }));
 }

package/lib/esm/components/NavigationToolbar/NavigationToolbar.d.ts

@@ -85,6 +85,8 @@ export interface NavigationToolbarProps extends ToolbarProps {
  |navigation|.SCNavigationToolbar-navigation|Styles applied to the navigation container element|
  |home|.SCNavigationToolbar-home|Styles applied to the home button|
  |explore|.SCNavigationToolbar-explore|Styles applied to the explore button|
+ |groups|.SCNavigationToolbar-groups|Styles applied to the group button|
+ |events|.SCNavigationToolbar-events|Styles applied to the event button|
  |search|.SCNavigationToolbar-search|Styles applied to the search component|
  |composer|.SCNavigationToolbar-composer|Styles applied to the composer component|
  |profile|.SCNavigationToolbar-profile|Styles applied to the profile button|

package/lib/esm/components/NavigationToolbar/NavigationToolbar.js

@@ -1,4 +1,5 @@
 import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Avatar, Badge, Box, Button, IconButton, styled, Toolbar, Tooltip } from '@mui/material';
 import React, { useMemo } from 'react';
 import Icon from '@mui/material/Icon';
@@ -22,6 +23,7 @@ const classes = {
     navigation: `${PREFIX}-navigation`,
     home: `${PREFIX}-home`,
     explore: `${PREFIX}-explore`,
+    events: `${PREFIX}-events`,
     groups: `${PREFIX}-groups`,
     search: `${PREFIX}-search`,
     composer: `${PREFIX}-composer`,
@@ -74,6 +76,8 @@ const PREFERENCES = [
  |navigation|.SCNavigationToolbar-navigation|Styles applied to the navigation container element|
  |home|.SCNavigationToolbar-home|Styles applied to the home button|
  |explore|.SCNavigationToolbar-explore|Styles applied to the explore button|
+ |groups|.SCNavigationToolbar-groups|Styles applied to the group button|
+ |events|.SCNavigationToolbar-events|Styles applied to the event button|
  |search|.SCNavigationToolbar-search|Styles applied to the search component|
  |composer|.SCNavigationToolbar-composer|Styles applied to the composer component|
  |profile|.SCNavigationToolbar-profile|Styles applied to the profile button|
@@ -105,6 +109,7 @@ export default function NavigationToolbar(inProps) {
     }, [scPreferences.preferences]);
     const privateMessagingEnabled = useMemo(() => scPreferences.features.includes(SCFeatureName.PRIVATE_MESSAGING), [scPreferences.features]);
     const groupsEnabled = useMemo(() => scPreferences.features && scPreferences.features.includes(SCFeatureName.GROUPING) && scPreferences.features.includes(SCFeatureName.TAGGING), [scPreferences.features]);
+    const eventsEnabled = useMemo(() => scPreferences.features && scPreferences.features.includes(SCFeatureName.EVENT) && scPreferences.features.includes(SCFeatureName.TAGGING), [scPreferences.features]);
     const showComposer = useMemo(() => {
         return (!disableComposer &&
             (!scPreferences.preferences[SCPreferences.CONFIGURATIONS_POST_ONLY_STAFF_ENABLED].value || UserUtils.isStaff(scUserContext.user)));
@@ -122,52 +127,18 @@ export default function NavigationToolbar(inProps) {
     };
     // RENDER
     if (scUserContext.loading) {
-        return React.createElement(NavigationToolbarSkeleton, null);
+        return _jsx(NavigationToolbarSkeleton, {});
     }
-    const _children = children || (React.createElement(Box, { className: classes.navigation },
-        scUserContext.user && (React.createElement(IconButton, { className: classNames(classes.home, { [classes.active]: value.startsWith(scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {})) }), "aria-label": "Home", to: scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}), component: Link },
-            React.createElement(Icon, null, "home"))),
-        preferences[SCPreferences.CONFIGURATIONS_EXPLORE_STREAM_ENABLED] &&
-            (preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY] || scUserContext.user) && (React.createElement(IconButton, { className: classNames(classes.explore, { [classes.active]: value.startsWith(scRoutingContext.url(SCRoutes.EXPLORE_ROUTE_NAME, {})) }), "aria-label": "Explore", to: scRoutingContext.url(SCRoutes.EXPLORE_ROUTE_NAME, {}), component: Link },
-            React.createElement(Icon, null, "explore"))),
-        groupsEnabled && scUserContext.user && (React.createElement(IconButton, { className: classNames(classes.groups, {
-                [classes.active]: value.startsWith(scRoutingContext.url(SCRoutes.GROUPS_SUBSCRIBED_ROUTE_NAME, {})) ||
-                    value.startsWith(scRoutingContext.url(SCRoutes.GROUPS_ROUTE_NAME, {}))
-            }), "aria-label": "Groups", to: scRoutingContext.url(SCRoutes.GROUPS_SUBSCRIBED_ROUTE_NAME, {}), component: Link },
-            React.createElement(Icon, null, "groups")))));
-    return (React.createElement(Root, Object.assign({ className: classNames(className, classes.root) }, rest),
-        React.createElement(NavigationMenuIconButtonComponent, null),
-        React.createElement(Link, { to: scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}), className: classes.logo },
-            React.createElement("img", { src: preferences[SCPreferences.LOGO_NAVBAR_LOGO], alt: "logo" })),
-        !scUserContext.user && !preferences[SCPreferences.ADDONS_CLOSED_COMMUNITY] && (React.createElement(Button, { color: "inherit", component: Link, to: scRoutingContext.url(SCRoutes.SIGNUP_ROUTE_NAME, {}), className: classes.register },
-            React.createElement(FormattedMessage, { id: "ui.appBar.navigation.register", defaultMessage: "ui.appBar.navigation.register" }))),
-        preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_ENABLED] && (React.createElement(React.Fragment, null, preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_TEXT] ? (React.createElement(Tooltip, { title: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_TEXT] },
-            React.createElement(Link, { target: "blank", to: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_URL], className: classes.customItem },
-                React.createElement("img", { src: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_IMAGE], alt: "custom_item" })))) : (React.createElement(Link, { target: "blank", to: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_URL], className: classes.customItem },
-            React.createElement("img", { src: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_IMAGE], alt: "custom_item" }))))),
-        _children,
-        (preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY] || scUserContext.user) && !disableSearch ? (React.createElement(SearchAutocomplete, Object.assign({ className: classes.search, blurOnSelect: true }, SearchAutocompleteProps))) : (React.createElement(Box, { className: classes.search })),
-        startActions,
-        scUserContext.user ? (React.createElement(React.Fragment, null,
-            showComposer && React.createElement(ComposerIconButton, Object.assign({ className: classes.composer }, ComposerIconButtonProps)),
-            React.createElement(Tooltip, { title: scUserContext.user.username },
-                React.createElement(IconButton, { component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, scUserContext.user), "aria-label": "Profile", className: classes.profile },
-                    React.createElement(Avatar, { alt: scUserContext.user.username, src: scUserContext.user.avatar }))),
-            React.createElement(React.Fragment, null,
-                React.createElement(IconButton, { className: classNames(classes.notification, {
-                        [classes.active]: value.startsWith(scRoutingContext.url(SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}))
-                    }), "aria-label": "Notification", onClick: handleOpenNotificationMenu },
-                    React.createElement(Badge, { badgeContent: scUserContext.user.unseen_notification_banners_counter + scUserContext.user.unseen_interactions_counter, color: "secondary" },
-                        React.createElement(Icon, null, "notifications_active"))),
-                React.createElement(NotificationMenu, Object.assign({ className: classes.notificationsMenu, id: "notification-menu", anchorEl: anchorNotification, open: Boolean(anchorNotification), onClose: handleCloseNotificationMenu, onClick: handleCloseNotificationMenu, transformOrigin: { horizontal: 'right', vertical: 'top' }, anchorOrigin: { horizontal: 'right', vertical: 'bottom' } }, NotificationMenuProps))),
-            privateMessagingEnabled && (React.createElement(IconButton, { className: classNames(classes.messages, {
-                    [classes.active]: value.startsWith(scRoutingContext.url(SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, {}))
-                }), "aria-label": "Messages", to: scRoutingContext.url(SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, {}), component: Link },
-                React.createElement(Badge, { badgeContent: 0, color: "secondary" },
-                    React.createElement(Icon, null, "email")))),
-            endActions,
-            React.createElement(NavigationSettingsIconButtonComponent, { className: classes.settings }))) : (React.createElement(React.Fragment, null,
-            endActions,
-            React.createElement(Button, { color: "inherit", component: Link, to: scRoutingContext.url(SCRoutes.SIGNIN_ROUTE_NAME, {}) },
-                React.createElement(FormattedMessage, { id: "ui.appBar.navigation.login", defaultMessage: "ui.appBar.navigation.login" }))))));
+    const _children = children || (_jsxs(Box, Object.assign({ className: classes.navigation }, { children: [scUserContext.user && (_jsx(IconButton, Object.assign({ className: classNames(classes.home, { [classes.active]: value.startsWith(scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {})) }), "aria-label": "Home", to: scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}), component: Link }, { children: _jsx(Icon, { children: "home" }) }))), preferences[SCPreferences.CONFIGURATIONS_EXPLORE_STREAM_ENABLED] &&
+                (preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY] || scUserContext.user) && (_jsx(IconButton, Object.assign({ className: classNames(classes.explore, { [classes.active]: value.startsWith(scRoutingContext.url(SCRoutes.EXPLORE_ROUTE_NAME, {})) }), "aria-label": "Explore", to: scRoutingContext.url(SCRoutes.EXPLORE_ROUTE_NAME, {}), component: Link }, { children: _jsx(Icon, { children: "explore" }) }))), groupsEnabled && scUserContext.user && (_jsx(IconButton, Object.assign({ className: classNames(classes.groups, {
+                    [classes.active]: value.startsWith(scRoutingContext.url(SCRoutes.GROUPS_SUBSCRIBED_ROUTE_NAME, {})) ||
+                        value.startsWith(scRoutingContext.url(SCRoutes.GROUPS_ROUTE_NAME, {}))
+                }), "aria-label": "Groups", to: scRoutingContext.url(SCRoutes.GROUPS_SUBSCRIBED_ROUTE_NAME, {}), component: Link }, { children: _jsx(Icon, { children: "groups" }) }))), eventsEnabled && (_jsx(IconButton, Object.assign({ className: classNames(classes.events, {
+                    [classes.active]: value.startsWith(scRoutingContext.url(SCRoutes.EVENTS_ROUTE_NAME, {}))
+                }), "aria-label": "Groups", to: scRoutingContext.url(SCRoutes.EVENTS_ROUTE_NAME, {}), component: Link }, { children: _jsx(Icon, { children: "CalendarIcon" }) })))] })));
+    return (_jsxs(Root, Object.assign({ className: classNames(className, classes.root) }, rest, { children: [_jsx(NavigationMenuIconButtonComponent, {}), _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}), className: classes.logo }, { children: _jsx("img", { src: preferences[SCPreferences.LOGO_NAVBAR_LOGO], alt: "logo" }) })), !scUserContext.user && !preferences[SCPreferences.ADDONS_CLOSED_COMMUNITY] && (_jsx(Button, Object.assign({ color: "inherit", component: Link, to: scRoutingContext.url(SCRoutes.SIGNUP_ROUTE_NAME, {}), className: classes.register }, { children: _jsx(FormattedMessage, { id: "ui.appBar.navigation.register", defaultMessage: "ui.appBar.navigation.register" }) }))), preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_ENABLED] && (_jsx(_Fragment, { children: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_TEXT] ? (_jsx(Tooltip, Object.assign({ title: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_TEXT] }, { children: _jsx(Link, Object.assign({ target: "blank", to: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_URL], className: classes.customItem }, { children: _jsx("img", { src: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_IMAGE], alt: "custom_item" }) })) }))) : (_jsx(Link, Object.assign({ target: "blank", to: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_URL], className: classes.customItem }, { children: _jsx("img", { src: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_IMAGE], alt: "custom_item" }) }))) })), _children, (preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY] || scUserContext.user) && !disableSearch ? (_jsx(SearchAutocomplete, Object.assign({ className: classes.search, blurOnSelect: true }, SearchAutocompleteProps))) : (_jsx(Box, { className: classes.search })), startActions, scUserContext.user ? (_jsxs(_Fragment, { children: [showComposer && _jsx(ComposerIconButton, Object.assign({ className: classes.composer }, ComposerIconButtonProps)), _jsx(Tooltip, Object.assign({ title: scUserContext.user.username }, { children: _jsx(IconButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, scUserContext.user), "aria-label": "Profile", className: classes.profile }, { children: _jsx(Avatar, { alt: scUserContext.user.username, src: scUserContext.user.avatar }) })) })), _jsxs(_Fragment, { children: [_jsx(IconButton, Object.assign({ className: classNames(classes.notification, {
+                                    [classes.active]: value.startsWith(scRoutingContext.url(SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}))
+                                }), "aria-label": "Notification", onClick: handleOpenNotificationMenu }, { children: _jsx(Badge, Object.assign({ badgeContent: scUserContext.user.unseen_notification_banners_counter + scUserContext.user.unseen_interactions_counter, color: "secondary" }, { children: _jsx(Icon, { children: "notifications_active" }) })) })), _jsx(NotificationMenu, Object.assign({ className: classes.notificationsMenu, id: "notification-menu", anchorEl: anchorNotification, open: Boolean(anchorNotification), onClose: handleCloseNotificationMenu, onClick: handleCloseNotificationMenu, transformOrigin: { horizontal: 'right', vertical: 'top' }, anchorOrigin: { horizontal: 'right', vertical: 'bottom' } }, NotificationMenuProps))] }), privateMessagingEnabled && (_jsx(IconButton, Object.assign({ className: classNames(classes.messages, {
+                            [classes.active]: value.startsWith(scRoutingContext.url(SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, {}))
+                        }), "aria-label": "Messages", to: scRoutingContext.url(SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, {}), component: Link }, { children: _jsx(Badge, Object.assign({ badgeContent: 0, color: "secondary" }, { children: _jsx(Icon, { children: "email" }) })) }))), endActions, _jsx(NavigationSettingsIconButtonComponent, { className: classes.settings })] })) : (_jsxs(_Fragment, { children: [endActions, _jsx(Button, Object.assign({ color: "inherit", component: Link, to: scRoutingContext.url(SCRoutes.SIGNIN_ROUTE_NAME, {}) }, { children: _jsx(FormattedMessage, { id: "ui.appBar.navigation.login", defaultMessage: "ui.appBar.navigation.login" }) }))] }))] })));
 }

package/lib/esm/components/NavigationToolbar/NotificationMenu.js

@@ -1,8 +1,8 @@
 import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Button, Menu, styled } from '@mui/material';
 import { Link, SCRoutes, useSCRouting } from '@selfcommunity/react-core';
 import { FormattedMessage } from 'react-intl';
-import React from 'react';
 import { useThemeProps } from '@mui/system';
 import SnippetNotifications from '../SnippetNotifications';
 import { PREFIX } from './constants';
@@ -28,8 +28,5 @@ export default function NotificationMenu(inProps) {
     return (
     // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
     // @ts-ignore
-    React.createElement(Root, Object.assign({ className: classes.root, PaperProps: PaperProps, MenuListProps: MenuListProps }, rest),
-        React.createElement(SnippetNotifications, Object.assign({ className: classes.notifications }, SnippetNotificationsProps)),
-        React.createElement(Button, { className: classes.link, component: Link, to: scRoutingContext.url(SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}), variant: "text" },
-            React.createElement(FormattedMessage, { id: "ui.header.notifications.button.seeMore", defaultMessage: "ui.header.notifications.button.seeMore" }))));
+    _jsxs(Root, Object.assign({ className: classes.root, PaperProps: PaperProps, MenuListProps: MenuListProps }, rest, { children: [_jsx(SnippetNotifications, Object.assign({ className: classes.notifications }, SnippetNotificationsProps)), _jsx(Button, Object.assign({ className: classes.link, component: Link, to: scRoutingContext.url(SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}), variant: "text" }, { children: _jsx(FormattedMessage, { id: "ui.header.notifications.button.seeMore", defaultMessage: "ui.header.notifications.button.seeMore" }) }))] })));
 }

package/lib/esm/components/NavigationToolbar/Skeleton.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Toolbar } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import Skeleton from '@mui/material/Skeleton';
@@ -37,8 +37,5 @@ const Root = styled(Toolbar, {
  *
  */
 export default function NavigationToolbarSkeleton() {
-    return (React.createElement(Root, { className: classes.root },
-        React.createElement(Skeleton, { className: classes.logo, animation: "wave", variant: "rectangular" }),
-        React.createElement(Skeleton, { className: classes.navigation, animation: "wave", variant: "rectangular" }),
-        React.createElement(Skeleton, { className: classes.avatar, animation: "wave", variant: "rounded" })));
+    return (_jsxs(Root, Object.assign({ className: classes.root }, { children: [_jsx(Skeleton, { className: classes.logo, animation: "wave", variant: "rectangular" }), _jsx(Skeleton, { className: classes.navigation, animation: "wave", variant: "rectangular" }), _jsx(Skeleton, { className: classes.avatar, animation: "wave", variant: "rounded" })] })));
 }

package/lib/esm/components/NavigationToolbarMobile/NavigationToolbarMobile.js

@@ -1,7 +1,8 @@
 import { __rest } from "tslib";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Badge, Button, IconButton, styled, Toolbar } from '@mui/material';
-import React, { useCallback, useMemo, useState } from 'react';
-import { Link, SCPreferences, SCRoutes, useSCPreferences, useSCRouting, useSCUser } from '@selfcommunity/react-core';
+import { useCallback, useMemo, useState } from 'react';
+import { Link, SCPreferences, SCRoutes, UserUtils, useSCPreferences, useSCRouting, useSCUser } from '@selfcommunity/react-core';
 import Icon from '@mui/material/Icon';
 import { useThemeProps } from '@mui/system';
 import classNames from 'classnames';
@@ -12,6 +13,7 @@ import NavigationSettingsIconButton from '../NavigationSettingsIconButton';
 import NavigationMenuIconButton from '../NavigationMenuIconButton';
 import { PREFIX } from './constants';
 import { SCFeatureName } from '@selfcommunity/types';
+import ComposerIconButton from '../ComposerIconButton';
 const classes = {
     root: `${PREFIX}-root`,
     logo: `${PREFIX}-logo`,
@@ -77,6 +79,10 @@ export default function NavigationToolbarMobile(inProps) {
     const [searchOpen, setSearchOpen] = useState(false);
     // MEMO
     const groupsEnabled = useMemo(() => features && features.includes(SCFeatureName.GROUPING) && features.includes(SCFeatureName.TAGGING), [features]);
+    const eventsEnabled = useMemo(() => features && features.includes(SCFeatureName.EVENT) && features.includes(SCFeatureName.TAGGING), [features]);
+    const exploreStreamEnabled = preferences[SCPreferences.CONFIGURATIONS_EXPLORE_STREAM_ENABLED].value;
+    const postOnlyStaffEnabled = preferences[SCPreferences.CONFIGURATIONS_POST_ONLY_STAFF_ENABLED].value;
+    const contentAvailable = preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY].value;
     // HANDLERS
     const handleOpenSearch = useCallback(() => {
         setSearchOpen(true);
@@ -86,26 +92,14 @@ export default function NavigationToolbarMobile(inProps) {
     }, []);
     // RENDER
     if (scUserContext.loading) {
-        return React.createElement(NavigationToolbarMobileSkeleton, null);
+        return _jsx(NavigationToolbarMobileSkeleton, {});
     }
-    const _children = children || (React.createElement(React.Fragment, null,
-        React.createElement(NavigationMenuIconButtonComponent, null),
-        React.createElement(Link, { to: scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}), className: classNames(className, classes.logo, {
-                [classes.logoFlex]: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_URL].value
-            }) }, !preserveDesktopLogo ? (React.createElement("img", { src: preferences[SCPreferences.LOGO_NAVBAR_LOGO_MOBILE].value, alt: "logo" })) : (React.createElement("img", { src: preferences[SCPreferences.LOGO_NAVBAR_LOGO].value, alt: "logo" }))),
-        preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_ENABLED].value && (React.createElement(Link, { target: "blank", to: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_URL].value, className: classes.customItem },
-            React.createElement("img", { src: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_IMAGE].value, alt: "custom_item" })))));
-    return (React.createElement(Root, Object.assign({ className: classNames(className, classes.root) }, rest),
-        _children,
-        startActions,
-        (preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY].value || scUserContext.user) && !disableSearch && (React.createElement(React.Fragment, null,
-            React.createElement(IconButton, { className: classes.search, onClick: handleOpenSearch },
-                React.createElement(Icon, null, "search")),
-            React.createElement(SearchDialog, { className: classes.searchDialog, fullScreen: true, open: searchOpen, SearchAutocompleteProps: Object.assign(Object.assign({}, SearchAutocompleteProps), { onClear: handleCloseSearch }) }))),
-        endActions,
-        scUserContext.user && groupsEnabled && (React.createElement(IconButton, { className: classes.notifications, component: Link, to: scRoutingContext.url(SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}) },
-            React.createElement(Badge, { badgeContent: scUserContext.user.unseen_notification_banners_counter + scUserContext.user.unseen_interactions_counter, color: "secondary" },
-                React.createElement(Icon, null, "notifications_active")))),
-        scUserContext.user ? (React.createElement(NavigationSettingsIconButtonComponent, { className: classes.settings })) : (React.createElement(Button, { className: classes.login, color: "inherit", component: Link, to: scRoutingContext.url(SCRoutes.SIGNIN_ROUTE_NAME, {}) },
-            React.createElement(FormattedMessage, { id: "ui.appBar.navigation.login", defaultMessage: "ui.appBar.navigation.login" })))));
+    const _children = children || (_jsxs(_Fragment, { children: [_jsx(NavigationMenuIconButtonComponent, {}), _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}), className: classNames(className, classes.logo, {
+                    [classes.logoFlex]: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_URL].value
+                }) }, { children: !preserveDesktopLogo ? (_jsx("img", { src: preferences[SCPreferences.LOGO_NAVBAR_LOGO_MOBILE].value, alt: "logo" })) : (_jsx("img", { src: preferences[SCPreferences.LOGO_NAVBAR_LOGO].value, alt: "logo" })) })), preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_ENABLED].value && (_jsx(Link, Object.assign({ target: "blank", to: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_URL].value, className: classes.customItem }, { children: _jsx("img", { src: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_IMAGE].value, alt: "custom_item" }) })))] }));
+    return (_jsxs(Root, Object.assign({ className: classNames(className, classes.root) }, rest, { children: [_children, startActions, (contentAvailable || scUserContext.user) && !disableSearch && (_jsxs(_Fragment, { children: [_jsx(IconButton, Object.assign({ className: classes.search, onClick: handleOpenSearch }, { children: _jsx(Icon, { children: "search" }) })), _jsx(SearchDialog, { className: classes.searchDialog, fullScreen: true, open: searchOpen, SearchAutocompleteProps: Object.assign(Object.assign({}, SearchAutocompleteProps), { onClear: handleCloseSearch }) })] })), endActions, (!postOnlyStaffEnabled || (UserUtils.isStaff(scUserContext.user) && postOnlyStaffEnabled)) &&
+                groupsEnabled &&
+                eventsEnabled &&
+                (scUserContext.user || contentAvailable) &&
+                exploreStreamEnabled && _jsx(ComposerIconButton, {}), scUserContext.user && (groupsEnabled || eventsEnabled) && (_jsx(IconButton, Object.assign({ className: classes.notifications, component: Link, to: scRoutingContext.url(SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}) }, { children: _jsx(Badge, Object.assign({ badgeContent: scUserContext.user.unseen_notification_banners_counter + scUserContext.user.unseen_interactions_counter, color: "secondary" }, { children: _jsx(Icon, { children: "notifications_active" }) })) }))), scUserContext.user ? (_jsx(NavigationSettingsIconButtonComponent, { className: classes.settings })) : (_jsx(Button, Object.assign({ className: classes.login, color: "inherit", component: Link, to: scRoutingContext.url(SCRoutes.SIGNIN_ROUTE_NAME, {}) }, { children: _jsx(FormattedMessage, { id: "ui.appBar.navigation.login", defaultMessage: "ui.appBar.navigation.login" }) })))] })));
 }

package/lib/esm/components/NavigationToolbarMobile/Skeleton.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Toolbar } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import Skeleton from '@mui/material/Skeleton';
@@ -33,6 +33,5 @@ const Root = styled(Toolbar, {
  *
  */
 export default function NavigationToolbarMobileSkeleton() {
-    return (React.createElement(Root, { className: classes.root },
-        React.createElement(Skeleton, { className: classes.logo, animation: "wave", variant: "rectangular" })));
+    return (_jsx(Root, Object.assign({ className: classes.root }, { children: _jsx(Skeleton, { className: classes.logo, animation: "wave", variant: "rectangular" }) })));
 }