@selfcommunity/react-ui 0.8.0-embeds.17 → 0.8.0-live.40

package/lib/cjs/components/NavigationMenuIconButton/NavigationMenuDrawer.d.ts

@@ -0,0 +1,47 @@
+import React from 'react';
+import { DrawerProps } from '@mui/material';
+import { CreateLiveStreamButtonProps } from '../CreateLiveStreamButton';
+export interface NavigationMenuDrawerProps extends DrawerProps {
+    /**
+     * Hide drawer header
+     * @default true
+     */
+    showDrawerHeader?: boolean;
+    /**
+     * Custom Drawer header content
+     * @default null
+     */
+    drawerHeaderContent?: React.ReactNode;
+    /**
+     * Custom Drawer content
+     * @default null
+     */
+    drawerContent?: React.ReactNode;
+    /**
+     * Hide drawer footer
+     * @default true
+     */
+    showDrawerFooter?: boolean;
+    /**
+     * Custom Drawer footer content
+     * @default null
+     */
+    drawerFooterContent?: React.ReactNode;
+    /**
+     * Props to spread to ScrollContainer component
+     * This lib use 'react-custom-scrollbars' component to perform scrollbars
+     * For more info: https://github.com/malte-wessel/react-custom-scrollbars/blob/master/docs/API.md
+     * @default {}
+     */
+    ScrollContainerProps?: Record<string, any>;
+    /**
+     * Props to spread to CreateLiveStreamButton component
+     * @default {}
+     */
+    CreateLiveStreamButtonComponentProps?: CreateLiveStreamButtonProps;
+    /**
+     * Any other properties
+     */
+    [p: string]: any;
+}
+export default function NavigationMenuDrawer(inProps: NavigationMenuDrawerProps): JSX.Element;

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

@@ -0,0 +1,39 @@
+"use strict";
+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 classnames_1 = tslib_1.__importDefault(require("classnames"));
+const system_1 = require("@mui/system");
+const ScrollContainer_1 = tslib_1.__importDefault(require("../../shared/ScrollContainer"));
+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 PREFIX = 'SCNavigationMenuDrawer';
+const classes = {
+    root: `${PREFIX}-root`,
+    logo: `${PREFIX}-logo`,
+    drawerRoot: `${PREFIX}-drawer-root`,
+    drawerHeader: `${PREFIX}-drawer-header`,
+    drawerHeaderAction: `${PREFIX}-drawer-header-action`,
+    drawerContent: `${PREFIX}-drawer-content`,
+    drawerFooter: `${PREFIX}-drawer-footer`,
+    drawerFooterLiveStream: `${PREFIX}-drawer-footer-live`,
+    drawerFooterLiveStreamButton: `${PREFIX}-drawer-footer-live-button`
+};
+const Root = (0, styles_1.styled)(material_1.Drawer, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.root
+})(({ theme }) => ({}));
+function NavigationMenuDrawer(inProps) {
+    // 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 = {}, CreateLiveStreamButtonComponentProps = {}, open, onClose } = props, rest = tslib_1.__rest(props, ["className", "showDrawerHeader", "drawerHeaderContent", "drawerContent", "showDrawerFooterContent", "drawerFooterContent", "ScrollContainerProps", "CreateLiveStreamButtonComponentProps", "open", "onClose"]);
+    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, { className: classes.drawerHeader, children: [drawerHeaderContent, (0, jsx_runtime_1.jsx)(material_1.IconButton, { 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, { className: classes.drawerContent, onClick: onClose, children: drawerContent }) })), showDrawerFooterContent && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Divider, {}), (0, jsx_runtime_1.jsx)(material_1.Box, { className: classes.drawerFooter, children: drawerFooterContent ? (drawerFooterContent) : ((0, jsx_runtime_1.jsx)(material_1.Box, { 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.d.ts

@@ -1,28 +1,21 @@
-import React from 'react';
-import { DrawerProps, IconButtonProps } from '@mui/material';
+import { IconButtonProps } from '@mui/material';
+import { NavigationMenuDrawerProps } from './NavigationMenuDrawer';
 export interface NavigationMenuIconButtonProps extends IconButtonProps {
     /**
-     * Props to spread to drawer element
-     * @default {anchor: 'left'}
+     * Prop to show/hide the default drawer component
+     * @default true
      */
-    DrawerProps?: DrawerProps;
+    showDrawer?: boolean;
     /**
-     * Custom Drawer header content
+     * Callback triggered on menu click
      * @default null
      */
-    drawerHeaderContent?: React.ReactNode;
+    onMenuIconClick?: () => void;
     /**
-     * Custom Drawer content
-     * @default null
-     */
-    drawerContent?: React.ReactNode;
-    /**
-     * Props to spread to ScrollContainer component
-     * This lib use 'react-custom-scrollbars' component to perform scrollbars
-     * For more info: https://github.com/malte-wessel/react-custom-scrollbars/blob/master/docs/API.md
+     * Props to spread to default drawer root
      * @default {}
      */
-    ScrollContainerProps?: Record<string, any>;
+    DrawerProps?: NavigationMenuDrawerProps;
 }
 /**
  * > API documentation for the Community-JS Navigation Menu Icon Button component. Learn about the available props and the CSS API.
@@ -43,10 +36,6 @@ export interface NavigationMenuIconButtonProps extends IconButtonProps {
  |Rule Name|Global class|Description|
  |---|---|---|
  |root|.SCNavigationMenuIconButton-root|Styles applied to the root element.|
- |drawerRoot|.SCNavigationMenuIconButton-drawer-root|Styles applied to the drawer root element.|
- |drawerHeader|.SCNavigationMenuIconButton-drawer-header|Styles applied to the drawer header.|
- |drawerHeaderAction|.SCNavigationMenuIconButton-drawer-header-action|Styles applied to the drawer header action element.|
- |drawerContent|.SCNavigationMenuIconButton-drawer-content|Styles applied to the drawer content.|
 
  * @param inProps
  */

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

@@ -7,29 +7,17 @@ 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");
-const ScrollContainer_1 = tslib_1.__importDefault(require("../../shared/ScrollContainer"));
-const DefaultDrawerContent_1 = tslib_1.__importDefault(require("./DefaultDrawerContent"));
-const DefaultHeaderContent_1 = tslib_1.__importDefault(require("./DefaultHeaderContent"));
 const react_core_1 = require("@selfcommunity/react-core");
+const NavigationMenuDrawer_1 = tslib_1.__importDefault(require("./NavigationMenuDrawer"));
 const PREFIX = 'SCNavigationMenuIconButton';
 const classes = {
-    root: `${PREFIX}-root`,
-    logo: `${PREFIX}-logo`,
-    drawerRoot: `${PREFIX}-drawer-root`,
-    drawerHeader: `${PREFIX}-drawer-header`,
-    drawerHeaderAction: `${PREFIX}-drawer-header-action`,
-    drawerContent: `${PREFIX}-drawer-content`
+    root: `${PREFIX}-root`
 };
 const Root = (0, styles_1.styled)(material_1.IconButton, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => styles.root
 })(({ theme }) => ({}));
-const DrawerRoot = (0, styles_1.styled)(material_1.Drawer, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.drawerRoot
-})(({ theme }) => ({}));
 /**
  * > API documentation for the Community-JS Navigation Menu Icon Button component. Learn about the available props and the CSS API.
 
@@ -49,10 +37,6 @@ const DrawerRoot = (0, styles_1.styled)(material_1.Drawer, {
  |Rule Name|Global class|Description|
  |---|---|---|
  |root|.SCNavigationMenuIconButton-root|Styles applied to the root element.|
- |drawerRoot|.SCNavigationMenuIconButton-drawer-root|Styles applied to the drawer root element.|
- |drawerHeader|.SCNavigationMenuIconButton-drawer-header|Styles applied to the drawer header.|
- |drawerHeaderAction|.SCNavigationMenuIconButton-drawer-header-action|Styles applied to the drawer header action element.|
- |drawerContent|.SCNavigationMenuIconButton-drawer-content|Styles applied to the drawer content.|
 
  * @param inProps
  */
@@ -63,7 +47,7 @@ function NavigationMenuIconButton(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { className = null, DrawerProps = { anchor: 'left' }, drawerHeaderContent = (0, jsx_runtime_1.jsx)(DefaultHeaderContent_1.default, {}), drawerContent = (0, jsx_runtime_1.jsx)(DefaultDrawerContent_1.default, {}), ScrollContainerProps = {} } = props, rest = tslib_1.__rest(props, ["className", "DrawerProps", "drawerHeaderContent", "drawerContent", "ScrollContainerProps"]);
+    const { className = null, DrawerProps = {}, onMenuIconClick = null, showDrawer = true } = props, rest = tslib_1.__rest(props, ["className", "DrawerProps", "onMenuIconClick", "showDrawer"]);
     // STATE
     const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
     // CONTEXT
@@ -79,6 +63,6 @@ function NavigationMenuIconButton(inProps) {
     if (!preferences[react_core_1.SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY].value && !((_a = scUserContext.user) === null || _a === void 0 ? void 0 : _a.id)) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { onClick: handleOpen }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "menu" }) })), (0, jsx_runtime_1.jsxs)(DrawerRoot, Object.assign({ className: classes.drawerRoot }, DrawerProps, { open: Boolean(anchorEl), onClose: handleClose }, { 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: handleClose }, { 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: handleClose }, { children: drawerContent })) }))] }))] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { onClick: onMenuIconClick !== null && onMenuIconClick !== void 0 ? onMenuIconClick : handleOpen, children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "menu" }) })), showDrawer && (0, jsx_runtime_1.jsx)(NavigationMenuDrawer_1.default, Object.assign({ open: Boolean(anchorEl), onClose: handleClose }, DrawerProps))] }));
 }
 exports.default = NavigationMenuIconButton;

package/lib/cjs/components/NavigationMenuIconButton/index.d.ts

@@ -1,5 +1,6 @@
 import NavigationMenuIconButton, { NavigationMenuIconButtonProps } from './NavigationMenuIconButton';
 import DefaultHeaderContent from './DefaultHeaderContent';
 import DefaultDrawerContent from './DefaultDrawerContent';
+import NavigationMenuDrawer, { NavigationMenuDrawerProps } from './NavigationMenuDrawer';
 export default NavigationMenuIconButton;
-export { NavigationMenuIconButtonProps, DefaultDrawerContent as NavigationMenuContent, DefaultHeaderContent as NavigationMenuHeader };
+export { NavigationMenuIconButtonProps, DefaultDrawerContent as NavigationMenuContent, DefaultHeaderContent as NavigationMenuHeader, NavigationMenuDrawer, NavigationMenuDrawerProps };

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

@@ -1,10 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NavigationMenuHeader = exports.NavigationMenuContent = void 0;
+exports.NavigationMenuDrawer = exports.NavigationMenuHeader = exports.NavigationMenuContent = void 0;
 const tslib_1 = require("tslib");
 const NavigationMenuIconButton_1 = tslib_1.__importDefault(require("./NavigationMenuIconButton"));
 const DefaultHeaderContent_1 = tslib_1.__importDefault(require("./DefaultHeaderContent"));
 exports.NavigationMenuHeader = DefaultHeaderContent_1.default;
 const DefaultDrawerContent_1 = tslib_1.__importDefault(require("./DefaultDrawerContent"));
 exports.NavigationMenuContent = DefaultDrawerContent_1.default;
+const NavigationMenuDrawer_1 = tslib_1.__importDefault(require("./NavigationMenuDrawer"));
+exports.NavigationMenuDrawer = NavigationMenuDrawer_1.default;
 exports.default = NavigationMenuIconButton_1.default;

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

@@ -10,6 +10,9 @@ const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const system_1 = require("@mui/system");
 const react_intl_1 = require("react-intl");
 const api_services_1 = require("@selfcommunity/api-services");
+const Errors_1 = require("../../constants/Errors");
+const utils_1 = require("@selfcommunity/utils");
+const types_1 = require("@selfcommunity/types");
 const PREFIX = 'SCNavigationSettingsIconButton';
 const classes = {
     root: `${PREFIX}-root`,
@@ -37,7 +40,9 @@ const PREFERENCES = [
     react_core_1.SCPreferences.CONFIGURATIONS_FOLLOW_ENABLED,
     react_core_1.SCPreferences.CONFIGURATIONS_POST_TYPE_ENABLED,
     react_core_1.SCPreferences.CONFIGURATIONS_DISCUSSION_TYPE_ENABLED,
-    react_core_1.SCPreferences.ADDONS_LOYALTY_POINTS_COLLECTION
+    react_core_1.SCPreferences.ADDONS_LOYALTY_POINTS_COLLECTION,
+    react_core_1.SCPreferences.CONFIGURATIONS_ONBOARDING_ENABLED,
+    react_core_1.SCPreferences.CONFIGURATIONS_ONBOARDING_HIDDEN
 ];
 /**
  * > API documentation for the Community-JS Navigation Settings Icon Button component. Learn about the available props and the CSS API.
@@ -74,6 +79,7 @@ function NavigationSettingsIconButton(inProps) {
     const scUserContext = (0, react_core_1.useSCUser)();
     // MEMO
     const isAdmin = (0, react_1.useMemo)(() => react_core_1.UserUtils.isAdmin(scUserContext.user), [scUserContext.user]);
+    const isCommunityCreator = (0, react_1.useMemo)(() => react_core_1.UserUtils.isCommunityCreator(scUserContext.user), [scUserContext.user]);
     const isModerator = (0, react_1.useMemo)(() => react_core_1.UserUtils.isModerator(scUserContext.user), [scUserContext.user]);
     // HOOKS
     const theme = (0, material_1.useTheme)();
@@ -94,7 +100,7 @@ function NavigationSettingsIconButton(inProps) {
         setAnchorEl(null);
     };
     /**
-     * Fetches paltform url
+     * Fetches platform url
      * @param query
      */
     const fetchPlatform = (query) => {
@@ -103,64 +109,91 @@ function NavigationSettingsIconButton(inProps) {
             window.open(platformUrl, '_blank').focus();
         });
     };
+    /**
+     * Handles preferences update
+     */
+    const handlePreferencesUpdate = () => {
+        api_services_1.PreferenceService.getAllPreferences().then((preferences) => {
+            const prefs = preferences['results'].reduce((obj, p) => (Object.assign(Object.assign({}, obj), { [`${p.section}.${p.name}`]: p })), {});
+            scPreferences.setPreferences(prefs);
+        });
+    };
+    /**
+     * Updates onBoarding dynamic preference
+     */
+    const showOnBoarding = () => {
+        api_services_1.PreferenceService.updatePreferences({ [`${types_1.SCPreferenceName.ONBOARDING_HIDDEN}`]: false })
+            .then(() => {
+            handlePreferencesUpdate();
+        })
+            .catch((e) => {
+            utils_1.Logger.error(Errors_1.SCOPE_SC_UI, e);
+        });
+    };
     const handleLogout = () => {
         scUserContext.logout();
     };
     const renderList = () => {
         if (isMobile) {
             return [
-                (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")),
-                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] && ((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] && ((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"),
-                ...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}`))),
+                (0, jsx_runtime_1.jsx)(material_1.ListItem, { className: classes.item, children: (0, jsx_runtime_1.jsx)(material_1.ListItemButton, { 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, { className: classes.item, children: (0, jsx_runtime_1.jsx)(material_1.ListItemButton, { 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, { className: classes.item, children: (0, jsx_runtime_1.jsx)(material_1.ListItemButton, { 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, { className: classes.item, children: (0, jsx_runtime_1.jsx)(material_1.ListItemButton, { 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, { className: classes.item, children: (0, jsx_runtime_1.jsx)(material_1.ListItemButton, { 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] && ((0, jsx_runtime_1.jsx)(material_1.ListItem, { className: classes.item, children: (0, jsx_runtime_1.jsx)(material_1.ListItemButton, { 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] && ((0, jsx_runtime_1.jsx)(material_1.ListItem, { className: classes.item, children: (0, jsx_runtime_1.jsx)(material_1.ListItemButton, { 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, { className: classes.item, children: (0, jsx_runtime_1.jsx)(material_1.ListItemButton, { 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, { className: classes.item, children: (0, jsx_runtime_1.jsx)(material_1.ListItemButton, { component: react_core_1.Link, to: item.href, children: item.label }) }, `custom_item_${index}`))),
                 ...(isAdmin
                     ? [
                         (0, jsx_runtime_1.jsx)(material_1.Divider, {}, "admin_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: () => fetchPlatform('') }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.platform", defaultMessage: "ui.navigationSettingsIconButton.platform" }) })) }), "platform")
+                        isCommunityCreator &&
+                            preferences[react_core_1.SCPreferences.CONFIGURATIONS_ONBOARDING_ENABLED] &&
+                            preferences[react_core_1.SCPreferences.CONFIGURATIONS_ONBOARDING_HIDDEN] && ((0, jsx_runtime_1.jsx)(material_1.ListItem, { className: classes.item, children: (0, jsx_runtime_1.jsxs)(material_1.ListItemButton, { onClick: showOnBoarding, children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.onboarding", defaultMessage: "ui.navigationSettingsIconButton.onboarding" }), (0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "magic_wand" }) })] }) }, "onboarding")),
+                        (0, jsx_runtime_1.jsx)(material_1.ListItem, { className: classes.item, children: (0, jsx_runtime_1.jsx)(material_1.ListItemButton, { onClick: () => fetchPlatform(''), children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.platform", defaultMessage: "ui.navigationSettingsIconButton.platform" }) }) }, "platform")
                     ]
                     : []),
                 ...(isModerator || isAdmin
                     ? [
                         (0, jsx_runtime_1.jsx)(material_1.Divider, {}, "moderation_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: () => fetchPlatform('/moderation/flags/') }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.moderation", defaultMessage: "ui.navigationSettingsIconButton.moderation" }) })) }), "moderation")
+                        (0, jsx_runtime_1.jsx)(material_1.ListItem, { className: classes.item, children: (0, jsx_runtime_1.jsx)(material_1.ListItemButton, { onClick: () => fetchPlatform('/moderation/flags/'), children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.moderation", defaultMessage: "ui.navigationSettingsIconButton.moderation" }) }) }, "moderation")
                     ]
                     : []),
-                (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"),
+                (0, jsx_runtime_1.jsx)(material_1.ListItem, { className: classes.item, children: (0, jsx_runtime_1.jsx)(material_1.ListItemButton, { 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"),
                 (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")
+                (0, jsx_runtime_1.jsx)(material_1.ListItem, { className: classes.item, children: (0, jsx_runtime_1.jsx)(material_1.ListItemButton, { onClick: handleLogout, children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.logout", defaultMessage: "ui.navigationSettingsIconButton.logout" }) }) }, "logout")
             ];
         }
         else {
             return [
-                (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")),
-                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] && ((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] && ((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"),
-                ...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}`))),
+                (0, jsx_runtime_1.jsx)(material_1.MenuItem, { 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, { 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, { 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, { 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, { 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] && ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { 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] && ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { 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, { 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, { className: classes.item, component: react_core_1.Link, to: item.href, children: item.label }, `custom_item_${index}`))),
                 ...(isAdmin
                     ? [
                         (0, jsx_runtime_1.jsx)(material_1.Divider, {}, "platform_divider"),
-                        (0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ className: classes.item, onClick: () => fetchPlatform('') }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.platform", defaultMessage: "ui.navigationSettingsIconButton.platform" }) }), "platform")
+                        isCommunityCreator &&
+                            preferences[react_core_1.SCPreferences.CONFIGURATIONS_ONBOARDING_ENABLED] &&
+                            preferences[react_core_1.SCPreferences.CONFIGURATIONS_ONBOARDING_HIDDEN] && ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, { className: classes.item, onClick: showOnBoarding, children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.onboarding", defaultMessage: "ui.navigationSettingsIconButton.onboarding" }), (0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "magic_wand" }) })] }, "onboarding")),
+                        (0, jsx_runtime_1.jsx)(material_1.MenuItem, { className: classes.item, onClick: () => fetchPlatform(''), children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.platform", defaultMessage: "ui.navigationSettingsIconButton.platform" }) }, "platform")
                     ]
                     : []),
                 ...(isModerator || isAdmin
                     ? [
                         (0, jsx_runtime_1.jsx)(material_1.Divider, {}, "moderation_divider"),
-                        (0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ className: classes.item, onClick: () => fetchPlatform('/moderation/flags/') }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.moderation", defaultMessage: "ui.navigationSettingsIconButton.moderation" }) }), "moderation")
+                        (0, jsx_runtime_1.jsx)(material_1.MenuItem, { className: classes.item, onClick: () => fetchPlatform('/moderation/flags/'), children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.moderation", defaultMessage: "ui.navigationSettingsIconButton.moderation" }) }, "moderation")
                     ]
                     : []),
-                (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"),
+                (0, jsx_runtime_1.jsx)(material_1.MenuItem, { 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"),
                 (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")
+                (0, jsx_runtime_1.jsx)(material_1.MenuItem, { className: classes.item, onClick: handleLogout, children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.logout", defaultMessage: "ui.navigationSettingsIconButton.logout" }) }, "logout")
             ];
         }
     };
@@ -168,6 +201,6 @@ function NavigationSettingsIconButton(inProps) {
     if (!scUserContext.user) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { onClick: handleOpen }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "more_vert" }) })), isMobile ? ((0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(material_1.List, { children: renderList() }) }))) : ((0, jsx_runtime_1.jsx)(MenuRoot, Object.assign({ onClick: () => setAnchorEl(null), className: classes.menuRoot, anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose, PaperProps: { className: classes.paper } }, { children: renderList() })))] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { onClick: handleOpen, children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "more_vert" }) })), isMobile ? ((0, jsx_runtime_1.jsx)(SwipeableDrawerRoot, { onClick: () => setAnchorEl(null), className: classes.drawerRoot, anchor: "bottom", open: Boolean(anchorEl), onClose: handleClose, onOpen: handleOpen, PaperProps: { className: classes.paper }, disableSwipeToOpen: true, children: (0, jsx_runtime_1.jsx)(material_1.List, { children: renderList() }) })) : ((0, jsx_runtime_1.jsx)(MenuRoot, { onClick: () => setAnchorEl(null), className: classes.menuRoot, anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose, PaperProps: { className: classes.paper }, children: renderList() }))] }));
 }
 exports.default = NavigationSettingsIconButton;

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

@@ -34,6 +34,11 @@ export interface NavigationToolbarProps extends ToolbarProps {
      * Component for Navigation Menu Icon Button
      */
     NavigationMenuIconButtonComponent?: (inProps: NavigationMenuIconButtonProps) => JSX.Element;
+    /**
+     * Props to spread to the NavigationMenuIconButtonComponent
+     * @default {}
+     */
+    NavigationMenuIconButtonComponentProps?: NavigationMenuIconButtonProps;
     /**
      * Component for Navigation Settings
      */

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

@@ -98,7 +98,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, NavigationMenuIconButtonComponent = NavigationMenuIconButton_1.default, children = null, NotificationMenuProps = {}, ComposerIconButtonProps = {}, onOpenNotificationMenu, onCloseNotificationMenu } = props, rest = tslib_1.__rest(props, ["value", "className", "disableSearch", "disableComposer", "SearchAutocompleteProps", "startActions", "endActions", "NavigationSettingsIconButtonComponent", "NavigationMenuIconButtonComponent", "children", "NotificationMenuProps", "ComposerIconButtonProps", "onOpenNotificationMenu", "onCloseNotificationMenu"]);
+    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"]);
     // CONTEXT
     const scUserContext = (0, react_core_1.useSCUser)();
     const scRoutingContext = (0, react_core_1.useSCRouting)();
@@ -140,17 +140,17 @@ 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, { className: classes.navigation, children: [scUserContext.user && ((0, jsx_runtime_1.jsx)(material_1.IconButton, { 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, { 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, { 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 && ((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)(Icon_1.default, { children: "groups" }) })), eventsEnabled && (scUserContext.user || preferences[react_core_1.SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY]) && ((0, jsx_runtime_1.jsx)(material_1.IconButton, { className: (0, classnames_1.default)(classes.events, {
                     [classes.active]: value.startsWith(scRoutingContext.url(react_core_1.SCRoutes.EVENTS_ROUTE_NAME, {}))
-                }), "aria-label": "Groups", 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, {}), (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": "Groups", 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, { 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, { 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, { title: preferences[react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_TEXT], children: (0, jsx_runtime_1.jsx)(react_core_1.Link, { 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, { 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, { title: scUserContext.user.username, children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { 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, { 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" }) })) })), (0, jsx_runtime_1.jsx)(NotificationMenu_1.default, 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 && ((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, { 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" }) }) }), (0, jsx_runtime_1.jsx)(NotificationMenu_1.default, 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 && ((0, jsx_runtime_1.jsx)(material_1.IconButton, { 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, { 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, { 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/NotificationMenu.js

@@ -30,6 +30,6 @@ function NotificationMenu(inProps) {
     return (
     // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
     // @ts-ignore
-    (0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root, PaperProps: PaperProps, MenuListProps: MenuListProps }, rest, { children: [(0, jsx_runtime_1.jsx)(SnippetNotifications_1.default, Object.assign({ className: classes.notifications }, SnippetNotificationsProps)), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ className: classes.link, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}), variant: "text" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.header.notifications.button.seeMore", defaultMessage: "ui.header.notifications.button.seeMore" }) }))] })));
+    (0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root, PaperProps: PaperProps, MenuListProps: MenuListProps }, rest, { children: [(0, jsx_runtime_1.jsx)(SnippetNotifications_1.default, Object.assign({ className: classes.notifications }, SnippetNotificationsProps)), (0, jsx_runtime_1.jsx)(material_1.Button, { className: classes.link, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}), variant: "text", children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.header.notifications.button.seeMore", defaultMessage: "ui.header.notifications.button.seeMore" }) })] })));
 }
 exports.default = NotificationMenu;

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

@@ -40,6 +40,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, { 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" })] }));
 }
 exports.default = NavigationToolbarSkeleton;

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

@@ -105,13 +105,13 @@ function NavigationToolbarMobile(inProps) {
     if (scUserContext.loading) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
     }
-    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, {
+    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, { 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)) &&
+                }), 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, { 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, { 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)) &&
                 groupsEnabled &&
                 eventsEnabled &&
                 (scUserContext.user || contentAvailable) &&
-                exploreStreamEnabled && (0, jsx_runtime_1.jsx)(ComposerIconButton_1.default, {}), 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, {}), scUserContext.user && (groupsEnabled || eventsEnabled) && ((0, jsx_runtime_1.jsx)(material_1.IconButton, { 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, { 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, { 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

@@ -36,6 +36,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, { className: classes.root, children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { className: classes.logo, animation: "wave", variant: "rectangular" }) }));
 }
 exports.default = NavigationToolbarMobileSkeleton;

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

@@ -67,6 +67,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, { 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, { 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, { 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, { 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, { className: classes.contributionWrap, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { 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, { 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, { 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, { 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, { color: "primary", component: 'div', children: (0, jsx_runtime_1.jsx)(react_core_1.Link, { 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;