@selfcommunity/react-ui 0.11.0-alpha.7 → 0.11.0-alpha.71

package/lib/cjs/components/NavigationMenuIconButton/NavigationMenuDrawer.js

@@ -2,8 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const styles_1 = require("@mui/material/styles");
+const react_1 = tslib_1.__importDefault(require("react"));
 const material_1 = require("@mui/material");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const system_1 = require("@mui/system");
@@ -11,7 +10,6 @@ const ScrollContainer_1 = tslib_1.__importDefault(require("../../shared/ScrollCo
 const DefaultDrawerContent_1 = tslib_1.__importDefault(require("./DefaultDrawerContent"));
 const DefaultHeaderContent_1 = tslib_1.__importDefault(require("./DefaultHeaderContent"));
 const CreateLiveStreamButton_1 = tslib_1.__importDefault(require("../CreateLiveStreamButton"));
-const react_core_1 = require("@selfcommunity/react-core");
 const PREFIX = 'SCNavigationMenuDrawer';
 const classes = {
     root: `${PREFIX}-root`,
@@ -24,21 +22,29 @@ const classes = {
     drawerFooterLiveStream: `${PREFIX}-drawer-footer-live`,
     drawerFooterLiveStreamButton: `${PREFIX}-drawer-footer-live-button`
 };
-const Root = (0, styles_1.styled)(material_1.Drawer, {
+const Root = (0, material_1.styled)(material_1.Drawer, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => styles.root
 })(({ theme }) => ({}));
 function NavigationMenuDrawer(inProps) {
-    var _a;
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
         name: PREFIX
     });
-    const { className = null, showDrawerHeader = true, drawerHeaderContent = (0, jsx_runtime_1.jsx)(DefaultHeaderContent_1.default, {}), drawerContent = (0, jsx_runtime_1.jsx)(DefaultDrawerContent_1.default, {}), showDrawerFooterContent = true, drawerFooterContent = null, ScrollContainerProps = { hideTracksWhenNotNeeded: true }, CreateLiveStreamButtonComponentProps = {}, open, onClose } = props, rest = tslib_1.__rest(props, ["className", "showDrawerHeader", "drawerHeaderContent", "drawerContent", "showDrawerFooterContent", "drawerFooterContent", "ScrollContainerProps", "CreateLiveStreamButtonComponentProps", "open", "onClose"]);
-    const scUserContext = (0, react_core_1.useSCUser)();
-    const canCreateLiveStream = (0, react_1.useMemo)(() => { var _a, _b; return (_b = (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission) === null || _b === void 0 ? void 0 : _b.create_live_stream; }, [(_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission]);
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ anchor: "left", className: (0, classnames_1.default)(classes.root, className), open: open, onClose: onClose }, rest, { children: [showDrawerHeader && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.drawerHeader }, { children: [drawerHeaderContent, (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.drawerHeaderAction, onClick: onClose }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) }))] })), (0, jsx_runtime_1.jsx)(material_1.Divider, {})] })), (0, jsx_runtime_1.jsx)(ScrollContainer_1.default, Object.assign({}, ScrollContainerProps, { children: (0, jsx_runtime_1.jsx)(material_1.List, Object.assign({ className: classes.drawerContent, onClick: onClose }, { children: drawerContent })) })), showDrawerFooterContent && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.drawerFooter }, { children: drawerFooterContent ? (drawerFooterContent) : ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.drawerFooterLiveStream }, { children: (0, jsx_runtime_1.jsx)(CreateLiveStreamButton_1.default, Object.assign({ color: "primary", className: classes.drawerFooterLiveStreamButton, fullWidth: true }, CreateLiveStreamButtonComponentProps)) }))) })) }))] })));
+    const { className = null, showDrawerHeader = true, defaultDrawerContentProps = null, drawerHeaderContent = (0, jsx_runtime_1.jsx)(DefaultHeaderContent_1.default, {}), drawerContent = (0, jsx_runtime_1.jsx)(DefaultDrawerContent_1.default, Object.assign({}, defaultDrawerContentProps)), showDrawerFooterContent = true, drawerFooterContent = null, ScrollContainerProps = { hideTracksWhenNotNeeded: true }, CreateLiveStreamButtonComponentProps = {}, open, onClose } = props, rest = tslib_1.__rest(props, ["className", "showDrawerHeader", "defaultDrawerContentProps", "drawerHeaderContent", "drawerContent", "showDrawerFooterContent", "drawerFooterContent", "ScrollContainerProps", "CreateLiveStreamButtonComponentProps", "open", "onClose"]);
+    const footerContent = (() => {
+        if (typeof drawerFooterContent === 'function') {
+            return drawerFooterContent({ handleCloseMenuDrawer: onClose });
+        }
+        if (react_1.default.isValidElement(drawerFooterContent)) {
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            return react_1.default.cloneElement(drawerFooterContent, { handleCloseMenuDrawer: onClose });
+        }
+        return drawerFooterContent;
+    })();
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ anchor: "left", className: (0, classnames_1.default)(classes.root, className), open: open, onClose: onClose }, rest, { children: [showDrawerHeader && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.drawerHeader }, { children: [drawerHeaderContent, (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.drawerHeaderAction, onClick: onClose }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) }))] })), (0, jsx_runtime_1.jsx)(material_1.Divider, {})] })), (0, jsx_runtime_1.jsx)(ScrollContainer_1.default, Object.assign({}, ScrollContainerProps, { children: (0, jsx_runtime_1.jsx)(material_1.List, Object.assign({ className: classes.drawerContent, onClick: onClose }, { children: drawerContent })) })), showDrawerFooterContent && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ component: "div", className: classes.drawerFooter }, { children: footerContent || ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.drawerFooterLiveStream }, { children: (0, jsx_runtime_1.jsx)(CreateLiveStreamButton_1.default, Object.assign({ color: "primary", className: classes.drawerFooterLiveStreamButton, fullWidth: true }, CreateLiveStreamButtonComponentProps)) }))) })) }))] })));
 }
 exports.default = NavigationMenuDrawer;

package/lib/cjs/components/NavigationMenuIconButton/NavigationMenuIconButton.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const system_1 = require("@mui/system");
@@ -13,7 +12,7 @@ const PREFIX = 'SCNavigationMenuIconButton';
 const classes = {
     root: `${PREFIX}-root`
 };
-const Root = (0, styles_1.styled)(material_1.IconButton, {
+const Root = (0, material_1.styled)(material_1.IconButton, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => styles.root

package/lib/cjs/components/NavigationSettingsIconButton/NavigationSettingsIconButton.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const react_core_1 = require("@selfcommunity/react-core");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
@@ -21,17 +20,17 @@ const classes = {
     paper: `${PREFIX}-paper`,
     item: `${PREFIX}-item`
 };
-const Root = (0, styles_1.styled)(material_1.IconButton, {
+const Root = (0, material_1.styled)(material_1.IconButton, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => styles.root
 })(() => ({}));
-const SwipeableDrawerRoot = (0, styles_1.styled)(material_1.SwipeableDrawer, {
+const SwipeableDrawerRoot = (0, material_1.styled)(material_1.SwipeableDrawer, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => styles.drawerRoot
 })(() => ({}));
-const MenuRoot = (0, styles_1.styled)(material_1.Menu, {
+const MenuRoot = (0, material_1.styled)(material_1.Menu, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => styles.menuRoot
@@ -42,7 +41,9 @@ const PREFERENCES = [
     react_core_1.SCPreferences.CONFIGURATIONS_DISCUSSION_TYPE_ENABLED,
     react_core_1.SCPreferences.ADDONS_LOYALTY_POINTS_COLLECTION,
     react_core_1.SCPreferences.CONFIGURATIONS_ONBOARDING_ENABLED,
-    react_core_1.SCPreferences.CONFIGURATIONS_ONBOARDING_HIDDEN
+    react_core_1.SCPreferences.CONFIGURATIONS_ONBOARDING_HIDDEN,
+    react_core_1.SCPreferences.ADDONS_PRIVATE_MESSAGES_ENABLED,
+    react_core_1.SCPreferences.CONFIGURATIONS_SCHEDULED_POSTS_ENABLED
 ];
 /**
  * > API documentation for the Community-JS Navigation Settings Icon Button component. Learn about the available props and the CSS API.
@@ -92,6 +93,9 @@ function NavigationSettingsIconButton(inProps) {
         PREFERENCES.map((p) => (_preferences[p] = p in scPreferences.preferences ? scPreferences.preferences[p].value : null));
         return _preferences;
     }, [scPreferences.preferences]);
+    const { isPaymentsEnabled } = (0, react_core_1.useSCPaymentsEnabled)();
+    const connectionEnabled = react_core_1.SCPreferences.CONFIGURATIONS_CONNECTION_ENABLED in scPreferences.preferences &&
+        scPreferences.preferences[react_core_1.SCPreferences.CONFIGURATIONS_CONNECTION_ENABLED].value;
     // HANDLERS
     const handleOpen = (event) => {
         setAnchorEl(event.currentTarget);
@@ -139,11 +143,17 @@ function NavigationSettingsIconButton(inProps) {
                 (0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ className: classes.item }, { children: (0, jsx_runtime_1.jsx)(material_1.ListItemButton, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, scUserContext.user) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.profile", defaultMessage: "ui.navigationSettingsIconButton.profile" }) })) }), "profile"),
                 preferences[react_core_1.SCPreferences.CONFIGURATIONS_FOLLOW_ENABLED] && ((0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ className: classes.item }, { children: (0, jsx_runtime_1.jsx)(material_1.ListItemButton, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_FOLLOWINGS_ROUTE_NAME, scUserContext.user) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.followings", defaultMessage: "ui.navigationSettingsIconButton.followings" }) })) }), "followings")),
                 preferences[react_core_1.SCPreferences.CONFIGURATIONS_FOLLOW_ENABLED] && ((0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ className: classes.item }, { children: (0, jsx_runtime_1.jsx)(material_1.ListItemButton, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_FOLLOWERS_ROUTE_NAME, scUserContext.user) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.followers", defaultMessage: "ui.navigationSettingsIconButton.followers" }) })) }), "followers")),
-                !preferences[react_core_1.SCPreferences.CONFIGURATIONS_FOLLOW_ENABLED] && ((0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ className: classes.item }, { children: (0, jsx_runtime_1.jsx)(material_1.ListItemButton, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_CONNECTIONS_ROUTE_NAME, scUserContext.user) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.connections", defaultMessage: "ui.navigationSettingsIconButton.connections" }) })) }), "connections")),
+                connectionEnabled && ((0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ className: classes.item }, { children: (0, jsx_runtime_1.jsx)(material_1.ListItemButton, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_CONNECTIONS_ROUTE_NAME, scUserContext.user) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.connections", defaultMessage: "ui.navigationSettingsIconButton.connections" }) })) }), "connections")),
                 preferences[react_core_1.SCPreferences.ADDONS_LOYALTY_POINTS_COLLECTION] && ((0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ className: classes.item }, { children: (0, jsx_runtime_1.jsx)(material_1.ListItemButton, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.LOYALTY_ROUTE_NAME, {}) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.loyalty", defaultMessage: "ui.navigationSettingsIconButton.loyalty" }) })) }), "loyaltyProgram")),
+                preferences[react_core_1.SCPreferences.CONFIGURATIONS_POST_TYPE_ENABLED] &&
+                    preferences[react_core_1.SCPreferences.CONFIGURATIONS_SCHEDULED_POSTS_ENABLED] &&
+                    (react_core_1.UserUtils.isStaff(scUserContext.user) || react_core_1.UserUtils.isPublisher(scUserContext.user)) && ((0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ className: classes.item }, { children: (0, jsx_runtime_1.jsx)(material_1.ListItemButton, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_SCHEDULED_POSTS_ROUTE_NAME, scUserContext.user) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.postsScheduled", defaultMessage: "ui.navigationSettingsIconButton.postsScheduled" }) })) }), "scheduledPosts")),
                 preferences[react_core_1.SCPreferences.CONFIGURATIONS_POST_TYPE_ENABLED] && ((0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ className: classes.item }, { children: (0, jsx_runtime_1.jsx)(material_1.ListItemButton, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_FOLLOWED_POSTS_ROUTE_NAME, scUserContext.user) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.postsFollowed", defaultMessage: "ui.navigationSettingsIconButton.postsFollowed" }) })) }), "followedPosts")),
+                preferences[react_core_1.SCPreferences.CONFIGURATIONS_DISCUSSION_TYPE_ENABLED] &&
+                    preferences[react_core_1.SCPreferences.CONFIGURATIONS_SCHEDULED_POSTS_ENABLED] &&
+                    (react_core_1.UserUtils.isStaff(scUserContext.user) || react_core_1.UserUtils.isPublisher(scUserContext.user)) && ((0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ className: classes.item }, { children: (0, jsx_runtime_1.jsx)(material_1.ListItemButton, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_SCHEDULED_DISCUSSIONS_ROUTE_NAME, scUserContext.user) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.discussionsScheduled", defaultMessage: "ui.navigationSettingsIconButton.discussionsScheduled" }) })) }), "scheduledDiscussions")),
                 preferences[react_core_1.SCPreferences.CONFIGURATIONS_DISCUSSION_TYPE_ENABLED] && ((0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ className: classes.item }, { children: (0, jsx_runtime_1.jsx)(material_1.ListItemButton, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_FOLLOWED_DISCUSSIONS_ROUTE_NAME, scUserContext.user) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.discussionsFollowed", defaultMessage: "ui.navigationSettingsIconButton.discussionsFollowed" }) })) }), "followedDiscussions")),
-                (0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ className: classes.item }, { children: (0, jsx_runtime_1.jsx)(material_1.ListItemButton, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, {}) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.privateMessages", defaultMessage: "ui.navigationSettingsIconButton.privateMessages" }) })) }), "privateMessages"),
+                preferences[react_core_1.SCPreferences.ADDONS_PRIVATE_MESSAGES_ENABLED] && ((0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ className: classes.item }, { children: (0, jsx_runtime_1.jsx)(material_1.ListItemButton, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, {}) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.privateMessages", defaultMessage: "ui.navigationSettingsIconButton.privateMessages" }) })) }), "privateMessages")),
                 ...items.map((item, index) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ className: classes.item }, { children: (0, jsx_runtime_1.jsx)(material_1.ListItemButton, Object.assign({ component: react_core_1.Link, to: item.href }, { children: item.label })) }), `custom_item_${index}`))),
                 ...(isAdmin
                     ? [
@@ -161,6 +171,13 @@ function NavigationSettingsIconButton(inProps) {
                     ]
                     : []),
                 (0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ className: classes.item }, { children: (0, jsx_runtime_1.jsx)(material_1.ListItemButton, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_SETTINGS_ROUTE_NAME, scUserContext.user) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.settings", defaultMessage: "ui.navigationSettingsIconButton.settings" }) })) }), "settings"),
+                ...(isPaymentsEnabled
+                    ? [
+                        (0, jsx_runtime_1.jsx)(material_1.Divider, {}, "payments_divider"),
+                        (0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ className: classes.item }, { children: (0, jsx_runtime_1.jsx)(material_1.ListItemButton, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PAYMENTS_HISTORY_ORDERS_ROUTE_NAME, scUserContext.user) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.historyOrders", defaultMessage: "ui.navigationSettingsIconButton.historyOrders" }) })) }), "paymentsHistoryOrder"),
+                        (0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ className: classes.item }, { children: (0, jsx_runtime_1.jsx)(material_1.ListItemButton, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PAYMENT_METHODS_ROUTE_NAME, scUserContext.user) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.myPaymentMethods", defaultMessage: "ui.navigationSettingsIconButton.myPaymentMethods" }) })) }), "myPaymentMethods")
+                    ]
+                    : []),
                 (0, jsx_runtime_1.jsx)(material_1.Divider, {}, "divider"),
                 (0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ className: classes.item }, { children: (0, jsx_runtime_1.jsx)(material_1.ListItemButton, Object.assign({ onClick: handleLogout }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.logout", defaultMessage: "ui.navigationSettingsIconButton.logout" }) })) }), "logout")
             ];
@@ -170,11 +187,17 @@ function NavigationSettingsIconButton(inProps) {
                 (0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ className: classes.item, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, scUserContext.user) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.profile", defaultMessage: "ui.navigationSettingsIconButton.profile" }) }), "profile"),
                 preferences[react_core_1.SCPreferences.CONFIGURATIONS_FOLLOW_ENABLED] && ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ className: classes.item, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_FOLLOWINGS_ROUTE_NAME, scUserContext.user) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.followings", defaultMessage: "ui.navigationSettingsIconButton.followings" }) }), "followings")),
                 preferences[react_core_1.SCPreferences.CONFIGURATIONS_FOLLOW_ENABLED] && ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ className: classes.item, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_FOLLOWERS_ROUTE_NAME, scUserContext.user) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.followers", defaultMessage: "ui.navigationSettingsIconButton.followers" }) }), "followers")),
-                !preferences[react_core_1.SCPreferences.CONFIGURATIONS_FOLLOW_ENABLED] && ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ className: classes.item, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_CONNECTIONS_ROUTE_NAME, scUserContext.user) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.connections", defaultMessage: "ui.navigationSettingsIconButton.connections" }) }), "connections")),
+                connectionEnabled && ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ className: classes.item, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_CONNECTIONS_ROUTE_NAME, scUserContext.user) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.connections", defaultMessage: "ui.navigationSettingsIconButton.connections" }) }), "connections")),
                 preferences[react_core_1.SCPreferences.ADDONS_LOYALTY_POINTS_COLLECTION] && ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ className: classes.item, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.LOYALTY_ROUTE_NAME, {}) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.loyalty", defaultMessage: "ui.navigationSettingsIconButton.loyalty" }) }), "loyaltyProgram")),
+                preferences[react_core_1.SCPreferences.CONFIGURATIONS_POST_TYPE_ENABLED] &&
+                    preferences[react_core_1.SCPreferences.CONFIGURATIONS_SCHEDULED_POSTS_ENABLED] &&
+                    (react_core_1.UserUtils.isStaff(scUserContext.user) || react_core_1.UserUtils.isPublisher(scUserContext.user)) && ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ className: classes.item, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_SCHEDULED_POSTS_ROUTE_NAME, scUserContext.user) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.postsScheduled", defaultMessage: "ui.navigationSettingsIconButton.postsScheduled" }) }), "scheduledPosts")),
                 preferences[react_core_1.SCPreferences.CONFIGURATIONS_POST_TYPE_ENABLED] && ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ className: classes.item, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_FOLLOWED_POSTS_ROUTE_NAME, scUserContext.user) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.postsFollowed", defaultMessage: "ui.navigationSettingsIconButton.postsFollowed" }) }), "followedPosts")),
+                preferences[react_core_1.SCPreferences.CONFIGURATIONS_DISCUSSION_TYPE_ENABLED] &&
+                    preferences[react_core_1.SCPreferences.CONFIGURATIONS_SCHEDULED_POSTS_ENABLED] &&
+                    (react_core_1.UserUtils.isStaff(scUserContext.user) || react_core_1.UserUtils.isPublisher(scUserContext.user)) && ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ className: classes.item, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_SCHEDULED_DISCUSSIONS_ROUTE_NAME, scUserContext.user) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.discussionsScheduled", defaultMessage: "ui.navigationSettingsIconButton.discussionsScheduled" }) }), "scheduledDiscussions")),
                 preferences[react_core_1.SCPreferences.CONFIGURATIONS_DISCUSSION_TYPE_ENABLED] && ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ className: classes.item, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_FOLLOWED_DISCUSSIONS_ROUTE_NAME, scUserContext.user) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.discussionsFollowed", defaultMessage: "ui.navigationSettingsIconButton.discussionsFollowed" }) }), "followedDiscussions")),
-                (0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ className: classes.item, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, {}) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.privateMessages", defaultMessage: "ui.navigationSettingsIconButton.privateMessages" }) }), "privateMessages"),
+                preferences[react_core_1.SCPreferences.ADDONS_PRIVATE_MESSAGES_ENABLED] && ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ className: classes.item, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, {}) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.privateMessages", defaultMessage: "ui.navigationSettingsIconButton.privateMessages" }) }), "privateMessages")),
                 ...items.map((item, index) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ className: classes.item, component: react_core_1.Link, to: item.href }, { children: item.label }), `custom_item_${index}`))),
                 ...(isAdmin
                     ? [
@@ -192,6 +215,13 @@ function NavigationSettingsIconButton(inProps) {
                     ]
                     : []),
                 (0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ className: classes.item, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_SETTINGS_ROUTE_NAME, scUserContext.user) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.settings", defaultMessage: "ui.navigationSettingsIconButton.settings" }) }), "settings"),
+                ...(isPaymentsEnabled
+                    ? [
+                        (0, jsx_runtime_1.jsx)(material_1.Divider, {}, "payments_divider"),
+                        (0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ className: classes.item, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PAYMENTS_HISTORY_ORDERS_ROUTE_NAME, scUserContext.user) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.historyOrders", defaultMessage: "ui.navigationSettingsIconButton.historyOrders" }) }), "historyOrders"),
+                        (0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ className: classes.item, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PAYMENT_METHODS_ROUTE_NAME, scUserContext.user) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.myPaymentMethods", defaultMessage: "ui.navigationSettingsIconButton.myPaymentMethods" }) }), "myPaymentMethods")
+                    ]
+                    : []),
                 (0, jsx_runtime_1.jsx)(material_1.Divider, {}, "divider"),
                 (0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ className: classes.item, onClick: handleLogout }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.logout", defaultMessage: "ui.navigationSettingsIconButton.logout" }) }), "logout")
             ];

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

@@ -17,7 +17,7 @@ export interface NavigationToolbarProps extends ToolbarProps {
     /**
      * Searchbar props
      */
-    SearchAutocompleteProps?: SearchAutocompleteProps;
+    SearchAutocompleteComponentProps?: SearchAutocompleteProps;
     /**
      * The navigation path
      */

package/lib/cjs/components/NavigationToolbar/NavigationToolbar.js

@@ -4,7 +4,6 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const react_1 = tslib_1.__importStar(require("react"));
-const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
 const system_1 = require("@mui/system");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
@@ -27,6 +26,7 @@ const classes = {
     explore: `${constants_1.PREFIX}-explore`,
     events: `${constants_1.PREFIX}-events`,
     groups: `${constants_1.PREFIX}-groups`,
+    courses: `${constants_1.PREFIX}-courses`,
     search: `${constants_1.PREFIX}-search`,
     composer: `${constants_1.PREFIX}-composer`,
     profile: `${constants_1.PREFIX}-profile`,
@@ -48,7 +48,8 @@ const PREFERENCES = [
     react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_ENABLED,
     react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_URL,
     react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_IMAGE,
-    react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_TEXT
+    react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_TEXT,
+    react_core_1.SCPreferences.ADDONS_PRIVATE_MESSAGES_ENABLED
 ];
 /**
  * > API documentation for the Community-JS NavigationToolbar component. Learn about the available props and the CSS API.
@@ -98,7 +99,7 @@ function NavigationToolbar(inProps) {
         props: inProps,
         name: constants_1.PREFIX
     });
-    const { value = '', className = '', disableSearch = false, disableComposer = false, SearchAutocompleteProps = {}, startActions = null, endActions = null, NavigationSettingsIconButtonComponent = NavigationSettingsIconButton_1.default, NavigationMenuIconButtonComponentProps = {}, NavigationMenuIconButtonComponent = NavigationMenuIconButton_1.default, children = null, NotificationMenuProps = {}, ComposerIconButtonProps = {}, onOpenNotificationMenu, onCloseNotificationMenu } = props, rest = tslib_1.__rest(props, ["value", "className", "disableSearch", "disableComposer", "SearchAutocompleteProps", "startActions", "endActions", "NavigationSettingsIconButtonComponent", "NavigationMenuIconButtonComponentProps", "NavigationMenuIconButtonComponent", "children", "NotificationMenuProps", "ComposerIconButtonProps", "onOpenNotificationMenu", "onCloseNotificationMenu"]);
+    const { value = '', className = '', disableSearch = false, disableComposer = false, SearchAutocompleteComponentProps = {}, startActions = null, endActions = null, NavigationSettingsIconButtonComponent = NavigationSettingsIconButton_1.default, NavigationMenuIconButtonComponentProps = {}, NavigationMenuIconButtonComponent = NavigationMenuIconButton_1.default, children = null, NotificationMenuProps = {}, ComposerIconButtonProps = {}, onOpenNotificationMenu, onCloseNotificationMenu } = props, rest = tslib_1.__rest(props, ["value", "className", "disableSearch", "disableComposer", "SearchAutocompleteComponentProps", "startActions", "endActions", "NavigationSettingsIconButtonComponent", "NavigationMenuIconButtonComponentProps", "NavigationMenuIconButtonComponent", "children", "NotificationMenuProps", "ComposerIconButtonProps", "onOpenNotificationMenu", "onCloseNotificationMenu"]);
     // CONTEXT
     const scUserContext = (0, react_core_1.useSCUser)();
     const scRoutingContext = (0, react_core_1.useSCRouting)();
@@ -109,7 +110,9 @@ function NavigationToolbar(inProps) {
         PREFERENCES.map((p) => (_preferences[p] = p in scPreferences.preferences ? scPreferences.preferences[p].value : null));
         return _preferences;
     }, [scPreferences.preferences]);
-    const privateMessagingEnabled = (0, react_1.useMemo)(() => scPreferences.features.includes(types_1.SCFeatureName.PRIVATE_MESSAGING), [scPreferences.features]);
+    const privateMessagingEnabled = (0, react_1.useMemo)(() => scPreferences.preferences &&
+        react_core_1.SCPreferences.ADDONS_PRIVATE_MESSAGES_ENABLED in scPreferences.preferences &&
+        scPreferences.preferences[react_core_1.SCPreferences.ADDONS_PRIVATE_MESSAGES_ENABLED].value, [scPreferences.preferences]);
     const groupsEnabled = (0, react_1.useMemo)(() => scPreferences.preferences &&
         scPreferences.features &&
         scPreferences.features.includes(types_1.SCFeatureName.TAGGING) &&
@@ -122,9 +125,16 @@ function NavigationToolbar(inProps) {
         scPreferences.features.includes(types_1.SCFeatureName.EVENT) &&
         react_core_1.SCPreferences.CONFIGURATIONS_EVENTS_ENABLED in scPreferences.preferences &&
         scPreferences.preferences[react_core_1.SCPreferences.CONFIGURATIONS_EVENTS_ENABLED].value, [scPreferences.preferences, scPreferences.features]);
+    const coursesEnabled = (0, react_1.useMemo)(() => scPreferences.preferences &&
+        scPreferences.features &&
+        scPreferences.features.includes(types_1.SCFeatureName.COURSE) &&
+        react_core_1.SCPreferences.CONFIGURATIONS_COURSES_ENABLED in scPreferences.preferences &&
+        scPreferences.preferences[react_core_1.SCPreferences.CONFIGURATIONS_COURSES_ENABLED].value, [scPreferences.preferences, scPreferences.features]);
     const showComposer = (0, react_1.useMemo)(() => {
         return (!disableComposer &&
-            (!scPreferences.preferences[react_core_1.SCPreferences.CONFIGURATIONS_POST_ONLY_STAFF_ENABLED].value || react_core_1.UserUtils.isStaff(scUserContext.user)));
+            (!scPreferences.preferences[react_core_1.SCPreferences.CONFIGURATIONS_POST_ONLY_STAFF_ENABLED].value ||
+                react_core_1.UserUtils.isStaff(scUserContext.user) ||
+                react_core_1.UserUtils.isPublisher(scUserContext.user)));
     }, [preferences, disableComposer, scUserContext.user]);
     // STATE
     const [anchorNotification, setAnchorNotification] = react_1.default.useState(null);
@@ -141,17 +151,22 @@ function NavigationToolbar(inProps) {
     if (scUserContext.loading) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
     }
-    const _children = children || ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.navigation }, { children: [scUserContext.user && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: (0, classnames_1.default)(classes.home, { [classes.active]: value.startsWith(scRoutingContext.url(react_core_1.SCRoutes.HOME_ROUTE_NAME, {})) }), "aria-label": "Home", to: scRoutingContext.url(react_core_1.SCRoutes.HOME_ROUTE_NAME, {}), component: react_core_1.Link }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "home" }) }))), preferences[react_core_1.SCPreferences.CONFIGURATIONS_EXPLORE_STREAM_ENABLED] &&
-                (preferences[react_core_1.SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY] || scUserContext.user) && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: (0, classnames_1.default)(classes.explore, { [classes.active]: value.startsWith(scRoutingContext.url(react_core_1.SCRoutes.EXPLORE_ROUTE_NAME, {})) }), "aria-label": "Explore", to: scRoutingContext.url(react_core_1.SCRoutes.EXPLORE_ROUTE_NAME, {}), component: react_core_1.Link }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "explore" }) }))), groupsEnabled && scUserContext.user && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: (0, classnames_1.default)(classes.groups, {
+    const _children = children || ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.navigation }, { children: [scUserContext.user && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: (0, classnames_1.default)(classes.home, { [classes.active]: value.startsWith(scRoutingContext.url(react_core_1.SCRoutes.HOME_ROUTE_NAME, {})) }), "aria-label": "Home", to: scRoutingContext.url(react_core_1.SCRoutes.HOME_ROUTE_NAME, {}), component: react_core_1.Link }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "home" }) }))), preferences[react_core_1.SCPreferences.CONFIGURATIONS_EXPLORE_STREAM_ENABLED] &&
+                (preferences[react_core_1.SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY] || scUserContext.user) &&
+                (!scUserContext.user || (!groupsEnabled && !coursesEnabled && !eventsEnabled)) && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: (0, classnames_1.default)(classes.explore, {
+                    [classes.active]: value.startsWith(scRoutingContext.url(react_core_1.SCRoutes.EXPLORE_ROUTE_NAME, {}))
+                }), "aria-label": "Explore", to: scRoutingContext.url(react_core_1.SCRoutes.EXPLORE_ROUTE_NAME, {}), component: react_core_1.Link }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "explore" }) }))), coursesEnabled && (scUserContext.user || preferences[react_core_1.SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY]) && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: (0, classnames_1.default)(classes.courses, {
+                    [classes.active]: value.startsWith(scRoutingContext.url(react_core_1.SCRoutes.COURSES_ROUTE_NAME, {}))
+                }), "aria-label": "Courses", to: scRoutingContext.url(react_core_1.SCRoutes.COURSES_ROUTE_NAME, {}), component: react_core_1.Link }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "courses" }) }))), groupsEnabled && scUserContext.user && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: (0, classnames_1.default)(classes.groups, {
                     [classes.active]: value.startsWith(scRoutingContext.url(react_core_1.SCRoutes.GROUPS_SUBSCRIBED_ROUTE_NAME, {})) ||
                         value.startsWith(scRoutingContext.url(react_core_1.SCRoutes.GROUPS_ROUTE_NAME, {}))
-                }), "aria-label": "Groups", to: scRoutingContext.url(react_core_1.SCRoutes.GROUPS_SUBSCRIBED_ROUTE_NAME, {}), component: react_core_1.Link }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "groups" }) }))), eventsEnabled && (scUserContext.user || preferences[react_core_1.SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY]) && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: (0, classnames_1.default)(classes.events, {
+                }), "aria-label": "Groups", to: scRoutingContext.url(react_core_1.SCRoutes.GROUPS_SUBSCRIBED_ROUTE_NAME, {}), component: react_core_1.Link }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "groups" }) }))), eventsEnabled && (scUserContext.user || preferences[react_core_1.SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY]) && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: (0, classnames_1.default)(classes.events, {
                     [classes.active]: value.startsWith(scRoutingContext.url(react_core_1.SCRoutes.EVENTS_ROUTE_NAME, {}))
-                }), "aria-label": "Events", to: scRoutingContext.url(react_core_1.SCRoutes.EVENTS_ROUTE_NAME, {}), component: react_core_1.Link }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "CalendarIcon" }) })))] })));
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.root) }, rest, { children: [(0, jsx_runtime_1.jsx)(NavigationMenuIconButtonComponent, Object.assign({}, NavigationMenuIconButtonComponentProps)), (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.HOME_ROUTE_NAME, {}), className: classes.logo }, { children: (0, jsx_runtime_1.jsx)("img", { src: preferences[react_core_1.SCPreferences.LOGO_NAVBAR_LOGO], alt: "logo" }) })), !scUserContext.user && !preferences[react_core_1.SCPreferences.ADDONS_CLOSED_COMMUNITY] && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ color: "inherit", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.SIGNUP_ROUTE_NAME, {}), className: classes.register }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.appBar.navigation.register", defaultMessage: "ui.appBar.navigation.register" }) }))), preferences[react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_ENABLED] && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: preferences[react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_TEXT] ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: preferences[react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_TEXT] }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ target: "blank", to: preferences[react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_URL], className: classes.customItem }, { children: (0, jsx_runtime_1.jsx)("img", { src: preferences[react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_IMAGE], alt: "custom_item" }) })) }))) : ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ target: "blank", to: preferences[react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_URL], className: classes.customItem }, { children: (0, jsx_runtime_1.jsx)("img", { src: preferences[react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_IMAGE], alt: "custom_item" }) }))) })), _children, (preferences[react_core_1.SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY] || scUserContext.user) && !disableSearch ? ((0, jsx_runtime_1.jsx)(SearchAutocomplete_1.default, Object.assign({ className: classes.search, blurOnSelect: true }, SearchAutocompleteProps))) : ((0, jsx_runtime_1.jsx)(material_1.Box, { className: classes.search })), startActions, scUserContext.user ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showComposer && (0, jsx_runtime_1.jsx)(ComposerIconButton_1.default, Object.assign({ className: classes.composer }, ComposerIconButtonProps)), (0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: scUserContext.user.username }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, scUserContext.user), "aria-label": "Profile", className: classes.profile }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: scUserContext.user.username, src: scUserContext.user.avatar }) })) })), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: (0, classnames_1.default)(classes.notification, {
+                }), "aria-label": "Events", to: scRoutingContext.url(react_core_1.SCRoutes.EVENTS_ROUTE_NAME, {}), component: react_core_1.Link }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "CalendarIcon" }) })))] })));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.root) }, rest, { children: [(0, jsx_runtime_1.jsx)(NavigationMenuIconButtonComponent, Object.assign({}, NavigationMenuIconButtonComponentProps)), (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.HOME_ROUTE_NAME, {}), className: classes.logo }, { children: (0, jsx_runtime_1.jsx)("img", { src: preferences[react_core_1.SCPreferences.LOGO_NAVBAR_LOGO], alt: "logo" }) })), !scUserContext.user && !preferences[react_core_1.SCPreferences.ADDONS_CLOSED_COMMUNITY] && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ color: "inherit", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.SIGNUP_ROUTE_NAME, {}), className: classes.register }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.appBar.navigation.register", defaultMessage: "ui.appBar.navigation.register" }) }))), preferences[react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_ENABLED] && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: preferences[react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_TEXT] ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: preferences[react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_TEXT] }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ target: "blank", to: preferences[react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_URL], className: classes.customItem }, { children: (0, jsx_runtime_1.jsx)("img", { src: preferences[react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_IMAGE], alt: "custom_item" }) })) }))) : ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ target: "blank", to: preferences[react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_URL], className: classes.customItem }, { children: (0, jsx_runtime_1.jsx)("img", { src: preferences[react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_IMAGE], alt: "custom_item" }) }))) })), _children, (preferences[react_core_1.SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY] || scUserContext.user) && !disableSearch ? ((0, jsx_runtime_1.jsx)(SearchAutocomplete_1.default, Object.assign({ className: classes.search, blurOnSelect: true }, SearchAutocompleteComponentProps))) : ((0, jsx_runtime_1.jsx)(material_1.Box, { className: classes.search })), startActions, scUserContext.user ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showComposer && (0, jsx_runtime_1.jsx)(ComposerIconButton_1.default, Object.assign({ className: classes.composer }, ComposerIconButtonProps)), (0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: scUserContext.user.username }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, scUserContext.user), "aria-label": "Profile", className: classes.profile }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: scUserContext.user.username, src: scUserContext.user.avatar }) })) })), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: (0, classnames_1.default)(classes.notification, {
                                     [classes.active]: value.startsWith(scRoutingContext.url(react_core_1.SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}))
-                                }), "aria-label": "Notification", onClick: handleOpenNotificationMenu }, { children: (0, jsx_runtime_1.jsx)(material_1.Badge, Object.assign({ badgeContent: scUserContext.user.unseen_notification_banners_counter + scUserContext.user.unseen_interactions_counter, color: "secondary" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "notifications_active" }) })) })), Boolean(anchorNotification) && ((0, jsx_runtime_1.jsx)(NotificationMenu_1.default, Object.assign({ className: classes.notificationsMenu, id: "notification-menu", anchorEl: anchorNotification, open: true, onClose: handleCloseNotificationMenu, onClick: handleCloseNotificationMenu, transformOrigin: { horizontal: 'right', vertical: 'top' }, anchorOrigin: { horizontal: 'right', vertical: 'bottom' } }, NotificationMenuProps)))] }), privateMessagingEnabled && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: (0, classnames_1.default)(classes.messages, {
+                                }), "aria-label": "Notification", onClick: handleOpenNotificationMenu }, { children: (0, jsx_runtime_1.jsx)(material_1.Badge, Object.assign({ badgeContent: scUserContext.user.unseen_notification_banners_counter + scUserContext.user.unseen_interactions_counter, color: "secondary" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "notifications_active" }) })) })), Boolean(anchorNotification) && ((0, jsx_runtime_1.jsx)(NotificationMenu_1.default, Object.assign({ className: classes.notificationsMenu, id: "notification-menu", anchorEl: anchorNotification, open: true, onClose: handleCloseNotificationMenu, onClick: handleCloseNotificationMenu, transformOrigin: { horizontal: 'right', vertical: 'top' }, anchorOrigin: { horizontal: 'right', vertical: 'bottom' } }, NotificationMenuProps)))] }), privateMessagingEnabled && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: (0, classnames_1.default)(classes.messages, {
                             [classes.active]: value.startsWith(scRoutingContext.url(react_core_1.SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, {}))
-                        }), "aria-label": "Messages", to: scRoutingContext.url(react_core_1.SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, {}), component: react_core_1.Link }, { children: (0, jsx_runtime_1.jsx)(material_1.Badge, Object.assign({ badgeContent: 0, color: "secondary" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "email" }) })) }))), endActions, (0, jsx_runtime_1.jsx)(NavigationSettingsIconButtonComponent, { className: classes.settings })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [endActions, (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ color: "inherit", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.SIGNIN_ROUTE_NAME, {}) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.appBar.navigation.login", defaultMessage: "ui.appBar.navigation.login" }) }))] }))] })));
+                        }), "aria-label": "Messages", to: scRoutingContext.url(react_core_1.SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, {}), component: react_core_1.Link }, { children: (0, jsx_runtime_1.jsx)(material_1.Badge, Object.assign({ badgeContent: 0, color: "secondary" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "email" }) })) }))), endActions, (0, jsx_runtime_1.jsx)(NavigationSettingsIconButtonComponent, { className: classes.settings })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [endActions, (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ color: "inherit", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.SIGNIN_ROUTE_NAME, {}) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.appBar.navigation.login", defaultMessage: "ui.appBar.navigation.login" }) }))] }))] })));
 }
 exports.default = NavigationToolbar;

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

@@ -1,10 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
-const styles_1 = require("@mui/material/styles");
-const Skeleton_1 = tslib_1.__importDefault(require("@mui/material/Skeleton"));
 const constants_1 = require("./constants");
 const classes = {
     root: `${constants_1.PREFIX}-skeleton-root`,
@@ -12,7 +9,7 @@ const classes = {
     navigation: `${constants_1.PREFIX}-navigation`,
     avatar: `${constants_1.PREFIX}-avatar`
 };
-const Root = (0, styles_1.styled)(material_1.Toolbar, {
+const Root = (0, material_1.styled)(material_1.Toolbar, {
     name: constants_1.PREFIX,
     slot: 'SkeletonRoot'
 })(() => ({}));
@@ -40,6 +37,6 @@ const Root = (0, styles_1.styled)(material_1.Toolbar, {
  *
  */
 function NavigationToolbarSkeleton() {
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { className: classes.logo, animation: "wave", variant: "rectangular" }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { className: classes.navigation, animation: "wave", variant: "rectangular" }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { className: classes.avatar, animation: "wave", variant: "rounded" })] })));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { className: classes.logo, animation: "wave", variant: "rectangular" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { className: classes.navigation, animation: "wave", variant: "rectangular" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { className: classes.avatar, animation: "wave", variant: "rounded" })] })));
 }
 exports.default = NavigationToolbarSkeleton;

package/lib/cjs/components/NavigationToolbarMobile/NavigationToolbarMobile.d.ts

@@ -16,7 +16,7 @@ export interface NavigationToolbarMobileProps extends ToolbarProps {
     /**
      * Props spread to SearchAutocomplete component
      */
-    SearchAutocompleteProps?: SearchAutocompleteProps;
+    SearchAutocompleteComponentProps?: SearchAutocompleteProps;
     /**
      * Actions to be inserted before composer IconButton
      */

package/lib/cjs/components/NavigationToolbarMobile/NavigationToolbarMobile.js

@@ -5,7 +5,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const react_1 = require("react");
 const react_core_1 = require("@selfcommunity/react-core");
-const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
 const system_1 = require("@mui/system");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
@@ -71,7 +70,7 @@ function NavigationToolbarMobile(inProps) {
         props: inProps,
         name: constants_1.PREFIX
     });
-    const { className = '', disableSearch = false, preserveDesktopLogo = false, SearchAutocompleteProps = {}, children = null, startActions = null, endActions = null, NavigationMenuIconButtonComponent = NavigationMenuIconButton_1.default, NavigationSettingsIconButtonComponent = NavigationSettingsIconButton_1.default, ComposerIconButtonProps = {} } = props, rest = tslib_1.__rest(props, ["className", "disableSearch", "preserveDesktopLogo", "SearchAutocompleteProps", "children", "startActions", "endActions", "NavigationMenuIconButtonComponent", "NavigationSettingsIconButtonComponent", "ComposerIconButtonProps"]);
+    const { className = '', disableSearch = false, preserveDesktopLogo = false, SearchAutocompleteComponentProps = {}, children = null, startActions = null, endActions = null, NavigationMenuIconButtonComponent = NavigationMenuIconButton_1.default, NavigationSettingsIconButtonComponent = NavigationSettingsIconButton_1.default, ComposerIconButtonProps = {} } = props, rest = tslib_1.__rest(props, ["className", "disableSearch", "preserveDesktopLogo", "SearchAutocompleteComponentProps", "children", "startActions", "endActions", "NavigationMenuIconButtonComponent", "NavigationSettingsIconButtonComponent", "ComposerIconButtonProps"]);
     // CONTEXT
     const scUserContext = (0, react_core_1.useSCUser)();
     const scRoutingContext = (0, react_core_1.useSCRouting)();
@@ -98,10 +97,10 @@ function NavigationToolbarMobile(inProps) {
     // HANDLERS
     const handleOpenSearch = (0, react_1.useCallback)(() => {
         setSearchOpen(true);
-    }, []);
+    }, [setSearchOpen]);
     const handleCloseSearch = (0, react_1.useCallback)(() => {
         setSearchOpen(false);
-    }, []);
+    }, [setSearchOpen]);
     // RENDER
     if (scUserContext.loading) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
@@ -109,8 +108,8 @@ function NavigationToolbarMobile(inProps) {
     const _children = children || ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(NavigationMenuIconButtonComponent, {}), (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.HOME_ROUTE_NAME, {}), className: (0, classnames_1.default)(className, classes.logo, {
                     [classes.logoFlex]: preferences[react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_URL].value
                 }) }, { children: !preserveDesktopLogo ? ((0, jsx_runtime_1.jsx)("img", { src: preferences[react_core_1.SCPreferences.LOGO_NAVBAR_LOGO_MOBILE].value, alt: "logo" })) : ((0, jsx_runtime_1.jsx)("img", { src: preferences[react_core_1.SCPreferences.LOGO_NAVBAR_LOGO].value, alt: "logo" })) })), preferences[react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_ENABLED].value && ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ target: "blank", to: preferences[react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_URL].value, className: classes.customItem }, { children: (0, jsx_runtime_1.jsx)("img", { src: preferences[react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_IMAGE].value, alt: "custom_item" }) })))] }));
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.root) }, rest, { children: [_children, startActions, (contentAvailable || scUserContext.user) && !disableSearch && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.search, onClick: handleOpenSearch }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "search" }) })), (0, jsx_runtime_1.jsx)(SearchDialog_1.default, { className: classes.searchDialog, fullScreen: true, open: searchOpen, SearchAutocompleteProps: Object.assign(Object.assign({}, SearchAutocompleteProps), { onClear: handleCloseSearch }) })] })), endActions, (!postOnlyStaffEnabled || (react_core_1.UserUtils.isStaff(scUserContext.user) && postOnlyStaffEnabled)) &&
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.root) }, rest, { children: [_children, startActions, (contentAvailable || scUserContext.user) && !disableSearch && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.search, onClick: handleOpenSearch }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "search" }) })), (0, jsx_runtime_1.jsx)(SearchDialog_1.default, { className: classes.searchDialog, fullScreen: true, open: searchOpen, SearchAutocompleteComponentProps: Object.assign(Object.assign({}, SearchAutocompleteComponentProps), { onClear: handleCloseSearch }) })] })), endActions, (!postOnlyStaffEnabled || react_core_1.UserUtils.isStaff(scUserContext.user) || react_core_1.UserUtils.isPublisher(scUserContext.user)) &&
                 (scUserContext.user || contentAvailable) &&
-                exploreStreamEnabled && (0, jsx_runtime_1.jsx)(ComposerIconButton_1.default, Object.assign({}, ComposerIconButtonProps)), scUserContext.user && (groupsEnabled || eventsEnabled) && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.notifications, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}) }, { children: (0, jsx_runtime_1.jsx)(material_1.Badge, Object.assign({ badgeContent: scUserContext.user.unseen_notification_banners_counter + scUserContext.user.unseen_interactions_counter, color: "secondary" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "notifications_active" }) })) }))), scUserContext.user ? ((0, jsx_runtime_1.jsx)(NavigationSettingsIconButtonComponent, { className: classes.settings })) : ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ className: classes.login, color: "inherit", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.SIGNIN_ROUTE_NAME, {}) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.appBar.navigation.login", defaultMessage: "ui.appBar.navigation.login" }) })))] })));
+                exploreStreamEnabled && (0, jsx_runtime_1.jsx)(ComposerIconButton_1.default, Object.assign({}, ComposerIconButtonProps)), scUserContext.user && (groupsEnabled || eventsEnabled) && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.notifications, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}) }, { children: (0, jsx_runtime_1.jsx)(material_1.Badge, Object.assign({ badgeContent: scUserContext.user.unseen_notification_banners_counter + scUserContext.user.unseen_interactions_counter, color: "secondary" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "notifications_active" }) })) }))), scUserContext.user ? ((0, jsx_runtime_1.jsx)(NavigationSettingsIconButtonComponent, { className: classes.settings })) : ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ className: classes.login, color: "inherit", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.SIGNIN_ROUTE_NAME, {}) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.appBar.navigation.login", defaultMessage: "ui.appBar.navigation.login" }) })))] })));
 }
 exports.default = NavigationToolbarMobile;

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

@@ -1,16 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
-const styles_1 = require("@mui/material/styles");
-const Skeleton_1 = tslib_1.__importDefault(require("@mui/material/Skeleton"));
 const constants_1 = require("./constants");
 const classes = {
     root: `${constants_1.PREFIX}-skeleton-root`,
     logo: `${constants_1.PREFIX}-logo`
 };
-const Root = (0, styles_1.styled)(material_1.Toolbar, {
+const Root = (0, material_1.styled)(material_1.Toolbar, {
     name: constants_1.PREFIX,
     slot: 'SkeletonRoot'
 })(() => ({}));
@@ -36,6 +33,6 @@ const Root = (0, styles_1.styled)(material_1.Toolbar, {
  *
  */
 function NavigationToolbarMobileSkeleton() {
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { className: classes.logo, animation: "wave", variant: "rectangular" }) })));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { className: classes.logo, animation: "wave", variant: "rectangular" }) })));
 }
 exports.default = NavigationToolbarMobileSkeleton;

package/lib/cjs/components/Notification/CollapsedFor/CollapsedFor.js

@@ -2,9 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
-const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
 const utils_1 = require("@selfcommunity/utils");
 const react_core_1 = require("@selfcommunity/react-core");
 const react_intl_1 = require("react-intl");
@@ -45,7 +43,7 @@ const classes = {
     contributionYouWroteLabel: `${constants_1.PREFIX}-contribution-you-wrote-label`,
     contributionText: `${constants_1.PREFIX}-contribution-text`
 };
-const Root = (0, styles_1.styled)(NotificationItem_1.default, {
+const Root = (0, material_1.styled)(NotificationItem_1.default, {
     name: constants_1.PREFIX,
     slot: 'CollapsedForRoot'
 })(() => ({}));
@@ -67,6 +65,6 @@ function CollapsedForNotification(props) {
     /**
      * Renders root object
      */
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className, `${constants_1.PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: (0, jsx_runtime_1.jsx)(material_1.Avatar, Object.assign({ variant: "circular", classes: { root: classes.flagIcon } }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "outlined_flag" }) })), primary: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isSnippetTemplate ? ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes[`${contributionType.toUpperCase()}_ROUTE_NAME`], (0, contribution_1.getRouteData)(notificationObject[contributionType])) }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "div", color: "inherit", className: classes.flagText }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.notification.collapsedFor.${(0, utils_1.camelCase)(notificationObject.type)}Snippet`, defaultMessage: `ui.notification.collapsedFor.${(0, utils_1.camelCase)(notificationObject.type)}Snippet` }) })) }))) : ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "div", color: "inherit", className: classes.flagText }, { children: intl.formatMessage(messages[(0, utils_1.camelCase)(notificationObject.type)], { b: (...chunks) => (0, jsx_runtime_1.jsx)("strong", { children: chunks }) }) }))) }), secondary: (template === types_1.SCNotificationObjectTemplateType.DETAIL || template === types_1.SCNotificationObjectTemplateType.SNIPPET) && ((0, jsx_runtime_1.jsx)(DateTimeAgo_1.default, { date: notificationObject.active_at, className: classes.activeAt })), footer: isSnippetTemplate ? null : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.contributionWrap }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: 'body2', color: 'inherit', component: 'div', classes: { root: classes.contributionYouWroteLabel } }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.notification.collapsedFor.youWrote", defaultMessage: "ui.notification.collapsedFor.youWrote" }) })), (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes[`${contributionType.toUpperCase()}_ROUTE_NAME`], (0, contribution_1.getRouteData)(notificationObject[contributionType])), className: classes.contributionText }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: 'span', variant: "body2", gutterBottom: true }, { children: (0, contribution_1.getContributionSnippet)(notificationObject[contributionType]) })) }))] })), template === types_1.SCNotificationObjectTemplateType.TOAST && ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [(0, jsx_runtime_1.jsx)(DateTimeAgo_1.default, { date: notificationObject.active_at }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ color: "primary", component: 'div' }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes[`${notificationObject[contributionType]['type'].toUpperCase()}_ROUTE_NAME`], (0, contribution_1.getRouteData)(notificationObject[contributionType])) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userToastNotifications.viewContribution", defaultMessage: 'ui.userToastNotifications.viewContribution' }) })) }))] })))] })) }, rest)));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className, `${constants_1.PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: (0, jsx_runtime_1.jsx)(material_1.Avatar, Object.assign({ variant: "circular", classes: { root: classes.flagIcon } }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "outlined_flag" }) })), primary: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isSnippetTemplate ? ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes[`${contributionType.toUpperCase()}_ROUTE_NAME`], (0, contribution_1.getRouteData)(notificationObject[contributionType])) }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "div", color: "inherit", className: classes.flagText }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.notification.collapsedFor.${(0, utils_1.camelCase)(notificationObject.type)}Snippet`, defaultMessage: `ui.notification.collapsedFor.${(0, utils_1.camelCase)(notificationObject.type)}Snippet` }) })) }))) : ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "div", color: "inherit", className: classes.flagText }, { children: intl.formatMessage(messages[(0, utils_1.camelCase)(notificationObject.type)], { b: (...chunks) => (0, jsx_runtime_1.jsx)("strong", { children: chunks }) }) }))) }), secondary: (template === types_1.SCNotificationObjectTemplateType.DETAIL || template === types_1.SCNotificationObjectTemplateType.SNIPPET) && ((0, jsx_runtime_1.jsx)(DateTimeAgo_1.default, { date: notificationObject.active_at, className: classes.activeAt })), footer: isSnippetTemplate ? null : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.contributionWrap }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: 'body2', color: 'inherit', component: 'div', classes: { root: classes.contributionYouWroteLabel } }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.notification.collapsedFor.youWrote", defaultMessage: "ui.notification.collapsedFor.youWrote" }) })), (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes[`${contributionType.toUpperCase()}_ROUTE_NAME`], (0, contribution_1.getRouteData)(notificationObject[contributionType])), className: classes.contributionText }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: 'span', variant: "body2", gutterBottom: true }, { children: (0, contribution_1.getContributionSnippet)(notificationObject[contributionType]) })) }))] })), template === types_1.SCNotificationObjectTemplateType.TOAST && ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [(0, jsx_runtime_1.jsx)(DateTimeAgo_1.default, { date: notificationObject.active_at }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ color: "primary", component: 'div' }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes[`${notificationObject[contributionType]['type'].toUpperCase()}_ROUTE_NAME`], (0, contribution_1.getRouteData)(notificationObject[contributionType])) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userToastNotifications.viewContribution", defaultMessage: 'ui.userToastNotifications.viewContribution' }) })) }))] })))] })) }, rest)));
 }
 exports.default = CollapsedForNotification;

package/lib/cjs/components/Notification/Comment/Comment.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importStar(require("react"));
-const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const react_core_1 = require("@selfcommunity/react-core");
 const types_1 = require("@selfcommunity/types");
@@ -37,7 +36,7 @@ const classes = {
     activeAt: `${constants_1.PREFIX}-active-at`,
     bullet: `${constants_1.PREFIX}-bullet`
 };
-const Root = (0, styles_1.styled)(NotificationItem_1.default, {
+const Root = (0, material_1.styled)(NotificationItem_1.default, {
     name: constants_1.PREFIX,
     slot: 'CommentRoot'
 })(() => ({}));

package/lib/cjs/components/Notification/Contribution/Contribution.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importStar(require("react"));
-const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const types_1 = require("@selfcommunity/types");
 const react_core_1 = require("@selfcommunity/react-core");
@@ -45,7 +44,7 @@ const classes = {
     activeAt: `${constants_1.PREFIX}-active-at`,
     bullet: `${constants_1.PREFIX}-bullet`
 };
-const Root = (0, styles_1.styled)(NotificationItem_1.default, {
+const Root = (0, material_1.styled)(NotificationItem_1.default, {
     name: constants_1.PREFIX,
     slot: 'ContributionRoot'
 })(() => ({}));

package/lib/cjs/components/Notification/ContributionFollow/ContributionFollow.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importStar(require("react"));
-const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const react_core_1 = require("@selfcommunity/react-core");
 const react_intl_1 = require("react-intl");
@@ -29,7 +28,7 @@ const classes = {
     activeAt: `${constants_1.PREFIX}-active-at`,
     contributionText: `${constants_1.PREFIX}-contribution-text`
 };
-const Root = (0, styles_1.styled)(NotificationItem_1.default, {
+const Root = (0, material_1.styled)(NotificationItem_1.default, {
     name: constants_1.PREFIX,
     slot: 'ContributionFollowRoot'
 })(() => ({}));

package/lib/cjs/components/Notification/Course/Course.d.ts

@@ -0,0 +1,15 @@
+import { SCNotificationCourseActivityType } from '@selfcommunity/types';
+import { NotificationItemProps } from '../../../shared/NotificationItem';
+export interface NotificationCourseProps extends Pick<NotificationItemProps, Exclude<keyof NotificationItemProps, 'image' | 'disableTypography' | 'primary' | 'primaryTypographyProps' | 'secondary' | 'secondaryTypographyProps' | 'actions' | 'footer' | 'isNew'>> {
+    /**
+     * Notification obj
+     * @default null
+     */
+    notificationObject: SCNotificationCourseActivityType;
+}
+/**
+ * This component render the content of the notification of type course
+ * @constructor
+ * @param props
+ */
+export default function CourseNotification(props: NotificationCourseProps): JSX.Element;