@selfcommunity/react-ui 0.7.50-events.39 → 0.7.50-events.40

package/lib/cjs/components/BottomNavigation/BottomNavigation.js

@@ -63,18 +63,27 @@ function BottomNavigation(inProps) {
     // MEMO
     const privateMessagingEnabled = (0, react_1.useMemo)(() => features.includes(types_1.SCFeatureName.PRIVATE_MESSAGING), [features]);
     const groupsEnabled = (0, react_1.useMemo)(() => features.includes(types_1.SCFeatureName.GROUPING) && features.includes(types_1.SCFeatureName.TAGGING), [features]);
+    const eventsEnabled = (0, react_1.useMemo)(() => features && features.includes(types_1.SCFeatureName.EVENT) && features.includes(types_1.SCFeatureName.TAGGING), [features]);
+    const exploreStreamEnabled = preferences[react_core_1.SCPreferences.CONFIGURATIONS_EXPLORE_STREAM_ENABLED].value;
+    const postOnlyStaffEnabled = preferences[react_core_1.SCPreferences.CONFIGURATIONS_POST_ONLY_STAFF_ENABLED].value;
+    const contentAvailable = preferences[react_core_1.SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY].value;
     const isIOS = (0, react_1.useMemo)(() => (0, utils_1.iOS)(), []);
     // RENDER
     return (react_1.default.createElement(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.root, { [classes.ios]: isIOS }) }, rest), children
         ? children
         : [
             react_1.default.createElement(material_1.BottomNavigationAction, { key: "home", className: classes.action, component: react_core_1.Link, to: scUserContext.user ? scRoutingContext.url(react_core_1.SCRoutes.HOME_ROUTE_NAME, {}) : '/', value: scUserContext.user ? scRoutingContext.url(react_core_1.SCRoutes.HOME_ROUTE_NAME, {}) : '/', icon: react_1.default.createElement(material_1.Icon, null, "home") }),
-            (scUserContext.user || preferences[react_core_1.SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY].value) &&
-                preferences[react_core_1.SCPreferences.CONFIGURATIONS_EXPLORE_STREAM_ENABLED].value ? (react_1.default.createElement(material_1.BottomNavigationAction, { key: "explore", className: classes.action, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.EXPLORE_ROUTE_NAME, {}), value: scRoutingContext.url(react_core_1.SCRoutes.EXPLORE_ROUTE_NAME, {}), icon: react_1.default.createElement(material_1.Icon, null, "explore") })) : null,
-            !preferences[react_core_1.SCPreferences.CONFIGURATIONS_POST_ONLY_STAFF_ENABLED].value ||
-                (react_core_1.UserUtils.isStaff(scUserContext.user) && preferences[react_core_1.SCPreferences.CONFIGURATIONS_POST_ONLY_STAFF_ENABLED].value) ? (react_1.default.createElement(material_1.BottomNavigationAction, { key: "composer", className: (0, classnames_1.default)(classes.composer, classes.action), component: ComposerIconButton_1.default, disableRipple: true })) : null,
+            (scUserContext.user || contentAvailable) && exploreStreamEnabled ? (react_1.default.createElement(material_1.BottomNavigationAction, { key: "explore", className: classes.action, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.EXPLORE_ROUTE_NAME, {}), value: scRoutingContext.url(react_core_1.SCRoutes.EXPLORE_ROUTE_NAME, {}), icon: react_1.default.createElement(material_1.Icon, null, "explore") })) : null,
+            (!postOnlyStaffEnabled || (react_core_1.UserUtils.isStaff(scUserContext.user) && postOnlyStaffEnabled)) &&
+                ((groupsEnabled && !eventsEnabled) || (!groupsEnabled && eventsEnabled)) &&
+                !exploreStreamEnabled ? (react_1.default.createElement(material_1.BottomNavigationAction, { key: "composer", className: (0, classnames_1.default)(classes.composer, classes.action), component: ComposerIconButton_1.default, disableRipple: true })) : null,
             groupsEnabled && scUserContext.user ? (react_1.default.createElement(material_1.BottomNavigationAction, { key: "groups", className: classes.action, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.GROUPS_SUBSCRIBED_ROUTE_NAME, {}), value: scRoutingContext.url(react_core_1.SCRoutes.GROUPS_SUBSCRIBED_ROUTE_NAME, {}), icon: react_1.default.createElement(material_1.Icon, null, "groups") })) : null,
-            scUserContext.user && !groupsEnabled ? (react_1.default.createElement(material_1.BottomNavigationAction, { key: "notifications", className: classes.action, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}), value: scRoutingContext.url(react_core_1.SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}), icon: react_1.default.createElement(material_1.Badge, { badgeContent: scUserContext.user.unseen_notification_banners_counter + scUserContext.user.unseen_interactions_counter, color: "secondary" },
+            (!postOnlyStaffEnabled || (react_core_1.UserUtils.isStaff(scUserContext.user) && postOnlyStaffEnabled)) &&
+                groupsEnabled &&
+                eventsEnabled &&
+                !exploreStreamEnabled ? (react_1.default.createElement(material_1.BottomNavigationAction, { key: "composer", className: (0, classnames_1.default)(classes.composer, classes.action), component: ComposerIconButton_1.default, disableRipple: true })) : null,
+            eventsEnabled && scUserContext.user ? (react_1.default.createElement(material_1.BottomNavigationAction, { key: "events", className: classes.action, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, {}), value: scRoutingContext.url(react_core_1.SCRoutes.EVENTS_ROUTE_NAME, {}), icon: react_1.default.createElement(material_1.Icon, null, "CalendarIcon") })) : null,
+            scUserContext.user && !groupsEnabled && !eventsEnabled ? (react_1.default.createElement(material_1.BottomNavigationAction, { key: "notifications", className: classes.action, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}), value: scRoutingContext.url(react_core_1.SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}), icon: react_1.default.createElement(material_1.Badge, { badgeContent: scUserContext.user.unseen_notification_banners_counter + scUserContext.user.unseen_interactions_counter, color: "secondary" },
                     react_1.default.createElement(material_1.Icon, null, "notifications_active")) })) : null,
             privateMessagingEnabled && scUserContext.user ? (react_1.default.createElement(material_1.BottomNavigationAction, { key: "messages", className: classes.action, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, {}), value: scRoutingContext.url(react_core_1.SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, {}), icon: react_1.default.createElement(material_1.Badge, { badgeContent: 0, color: "secondary" },
                     react_1.default.createElement(material_1.Icon, null, "email")) })) : null

package/lib/cjs/components/CreateEventButton/CreateEventButton.js

@@ -1,15 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
-const system_1 = require("@mui/system");
-const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
-const react_intl_1 = require("react-intl");
+const styles_1 = require("@mui/material/styles");
+const system_1 = require("@mui/system");
 const react_core_1 = require("@selfcommunity/react-core");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const react_1 = tslib_1.__importStar(require("react"));
+const react_intl_1 = require("react-intl");
 const EventForm_1 = tslib_1.__importDefault(require("../EventForm"));
-const HiddenPlaceholder_1 = tslib_1.__importDefault(require("../../shared/HiddenPlaceholder"));
 const PREFIX = 'SCCreateEventButton';
 const classes = {
     root: `${PREFIX}-root`
@@ -67,7 +66,7 @@ function CreateEventButton(inProps) {
      * If there's no authUserId, component is hidden.
      */
     if ((!canCreateEvent && onlyStaffEnabled) || !authUserId) {
-        return react_1.default.createElement(HiddenPlaceholder_1.default, null);
+        return null;
     }
     /**
      * Renders root object

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

@@ -0,0 +1,24 @@
+import { SCEventType } from '@selfcommunity/types';
+import { WidgetProps } from '../Widget';
+export interface EventInfoWidgetProps extends WidgetProps {
+    /**
+     * Event Object
+     * @default null
+     */
+    event?: SCEventType;
+    /**
+     * Id of event object
+     * @default null
+     */
+    eventId?: number;
+    /**
+     * True if summary must be already expanded
+     * @default false
+     */
+    summaryExpanded?: boolean;
+    /**
+     * Other props
+     */
+    [p: string]: any;
+}
+export default function EventInfoWidget(inProps: EventInfoWidgetProps): JSX.Element;

package/lib/cjs/components/EventInfoWidget/EventInfoWidget.js

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const material_1 = require("@mui/material");
+const react_core_1 = require("@selfcommunity/react-core");
+const react_1 = require("react");
+const react_intl_1 = require("react-intl");
+const EventInfoDetails_1 = tslib_1.__importDefault(require("../../shared/EventInfoDetails"));
+const HiddenPlaceholder_1 = tslib_1.__importDefault(require("../../shared/HiddenPlaceholder"));
+const Widget_1 = tslib_1.__importDefault(require("../Widget"));
+const constants_1 = require("./constants");
+const classes = {
+    root: `${constants_1.PREFIX}-root`,
+    content: `${constants_1.PREFIX}-content`,
+    titleWrapper: `${constants_1.PREFIX}-title-wrapper`,
+    textWrapper: `${constants_1.PREFIX}-text-wrapper`,
+    showMore: `${constants_1.PREFIX}-show-more`
+};
+const Root = (0, material_1.styled)(Widget_1.default, {
+    name: constants_1.PREFIX,
+    slot: 'Root',
+    overridesResolver: (_props, styles) => styles.root
+})();
+function isTextLongerThanLimit(text, limit = 125) {
+    return text.length > limit;
+}
+function getTruncatedText(text, limit = 125) {
+    return isTextLongerThanLimit(text, limit) ? text.substring(0, limit).concat('...') : text;
+}
+function EventInfoWidget(inProps) {
+    // PROPS
+    const props = (0, material_1.useThemeProps)({
+        props: inProps,
+        name: constants_1.PREFIX
+    });
+    const { event, eventId, summaryExpanded = false } = props, rest = tslib_1.__rest(props, ["event", "eventId", "summaryExpanded"]);
+    // STATE
+    const [expanded, setExpanded] = (0, react_1.useState)(summaryExpanded);
+    const [showButton, setShowButton] = (0, react_1.useState)(!summaryExpanded);
+    // HOOKS
+    const { scEvent } = (0, react_core_1.useSCFetchEvent)({ id: eventId, event });
+    (0, react_1.useEffect)(() => {
+        if (!scEvent) {
+            return;
+        }
+        const _showButton = isTextLongerThanLimit(scEvent.description, 220);
+        if (_showButton !== !summaryExpanded) {
+            setShowButton(_showButton);
+        }
+    }, [scEvent]);
+    /**
+     * Handle toggle summary
+     */
+    const handleToggleSummary = (0, react_1.useCallback)(() => {
+        setExpanded(!expanded);
+    }, [expanded]);
+    if (!scEvent) {
+        return React.createElement(HiddenPlaceholder_1.default, null);
+    }
+    const description = expanded ? scEvent.description : getTruncatedText(scEvent.description, 220);
+    return (React.createElement(Root, Object.assign({ className: classes.root }, rest, { expanded: expanded }),
+        React.createElement(material_1.CardContent, { className: classes.content },
+            React.createElement(material_1.Stack, { className: classes.titleWrapper },
+                React.createElement(material_1.Icon, { fontSize: "small" }, "info"),
+                React.createElement(material_1.Typography, { variant: "h5" },
+                    React.createElement(react_intl_1.FormattedMessage, { id: "ui.infoEventWidget.title", defaultMessage: "ui.infoEventWidget.title" }))),
+            React.createElement(material_1.Box, { className: classes.textWrapper },
+                React.createElement(material_1.Typography, { component: "span", variant: "body1" },
+                    description,
+                    showButton && !expanded && (React.createElement(material_1.Button, { size: "small", variant: "text", className: classes.showMore, onClick: handleToggleSummary },
+                        React.createElement(react_intl_1.FormattedMessage, { id: "ui.infoEventWidget.showMore", defaultMessage: "ui.infoEventWidget.showMore" }))))),
+            React.createElement(EventInfoDetails_1.default, { event: scEvent }))));
+}
+exports.default = EventInfoWidget;

package/lib/cjs/components/EventInfoWidget/constants.d.ts

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

package/lib/cjs/components/EventInfoWidget/constants.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PREFIX = void 0;
+exports.PREFIX = 'SCEventInfoWidget';

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

@@ -0,0 +1,3 @@
+import EventInfoWidget, { EventInfoWidgetProps } from './EventInfoWidget';
+export default EventInfoWidget;
+export { type EventInfoWidgetProps };

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

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const EventInfoWidget_1 = tslib_1.__importDefault(require("./EventInfoWidget"));
+// import EventInfoWidgetSkeleton from './Skeleton';
+exports.default = EventInfoWidget_1.default;

package/lib/cjs/components/EventInviteButton/EventInviteButton.js

@@ -1,22 +1,22 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
-const system_1 = require("@mui/system");
-const styles_1 = require("@mui/material/styles");
+const lab_1 = require("@mui/lab");
 const material_1 = require("@mui/material");
-const react_intl_1 = require("react-intl");
+const Autocomplete_1 = tslib_1.__importDefault(require("@mui/material/Autocomplete"));
+const styles_1 = require("@mui/material/styles");
+const system_1 = require("@mui/system");
+const api_services_1 = require("@selfcommunity/api-services");
 const react_core_1 = require("@selfcommunity/react-core");
+const utils_1 = require("@selfcommunity/utils");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const BaseDialog_1 = tslib_1.__importDefault(require("../../shared/BaseDialog"));
-const lab_1 = require("@mui/lab");
-const api_services_1 = require("@selfcommunity/api-services");
-const Autocomplete_1 = tslib_1.__importDefault(require("@mui/material/Autocomplete"));
-const User_1 = tslib_1.__importDefault(require("../User"));
+const pubsub_js_1 = tslib_1.__importDefault(require("pubsub-js"));
+const react_1 = tslib_1.__importStar(require("react"));
+const react_intl_1 = require("react-intl");
 const Errors_1 = require("../../constants/Errors");
-const utils_1 = require("@selfcommunity/utils");
 const PubSub_1 = require("../../constants/PubSub");
-const pubsub_js_1 = tslib_1.__importDefault(require("pubsub-js"));
+const BaseDialog_1 = tslib_1.__importDefault(require("../../shared/BaseDialog"));
+const User_1 = tslib_1.__importDefault(require("../User"));
 const messages = (0, react_intl_1.defineMessages)({
     placeholder: {
         id: 'ui.eventInviteButton.searchBar.placeholder',

package/lib/cjs/components/Events/Events.js

@@ -1,23 +1,23 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
-const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
+const styles_1 = require("@mui/material/styles");
+const system_1 = require("@mui/system");
 const api_services_1 = require("@selfcommunity/api-services");
 const react_core_1 = require("@selfcommunity/react-core");
 const types_1 = require("@selfcommunity/types");
-const Event_1 = tslib_1.__importStar(require("../Event"));
-const react_intl_1 = require("react-intl");
+const utils_1 = require("@selfcommunity/utils");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const system_1 = require("@mui/system");
+const react_1 = tslib_1.__importStar(require("react"));
+const react_intl_1 = require("react-intl");
 const Errors_1 = require("../../constants/Errors");
-const utils_1 = require("@selfcommunity/utils");
-const HiddenPlaceholder_1 = tslib_1.__importDefault(require("../../shared/HiddenPlaceholder"));
-const constants_1 = require("./constants");
-const Skeleton_1 = tslib_1.__importDefault(require("../Events/Skeleton"));
 const Pagination_1 = require("../../constants/Pagination");
+const HiddenPlaceholder_1 = tslib_1.__importDefault(require("../../shared/HiddenPlaceholder"));
 const CreateEventButton_1 = tslib_1.__importDefault(require("../CreateEventButton"));
+const Event_1 = tslib_1.__importStar(require("../Event"));
+const Skeleton_1 = tslib_1.__importDefault(require("../Events/Skeleton"));
+const constants_1 = require("./constants");
 const classes = {
     root: `${constants_1.PREFIX}-root`,
     filters: `${constants_1.PREFIX}-filters`,
@@ -76,7 +76,7 @@ function Events(inProps) {
         props: inProps,
         name: constants_1.PREFIX
     });
-    const { endpointQueryParams = { limit: 2, offset: Pagination_1.DEFAULT_PAGINATION_OFFSET }, className, EventComponentProps = {}, showFilters = false, filters, general = true } = props, rest = tslib_1.__rest(props, ["endpointQueryParams", "className", "EventComponentProps", "showFilters", "filters", "general"]);
+    const { endpointQueryParams = { limit: 8, offset: Pagination_1.DEFAULT_PAGINATION_OFFSET }, className, EventComponentProps = {}, showFilters = false, filters, general = false } = props, rest = tslib_1.__rest(props, ["endpointQueryParams", "className", "EventComponentProps", "showFilters", "filters", "general"]);
     // STATE
     const [events, setEvents] = (0, react_1.useState)([]);
     const [loading, setLoading] = (0, react_1.useState)(true);

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

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

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

@@ -24,6 +24,7 @@ const classes = {
     navigation: `${constants_1.PREFIX}-navigation`,
     home: `${constants_1.PREFIX}-home`,
     explore: `${constants_1.PREFIX}-explore`,
+    events: `${constants_1.PREFIX}-events`,
     groups: `${constants_1.PREFIX}-groups`,
     search: `${constants_1.PREFIX}-search`,
     composer: `${constants_1.PREFIX}-composer`,
@@ -76,6 +77,8 @@ const PREFERENCES = [
  |navigation|.SCNavigationToolbar-navigation|Styles applied to the navigation container element|
  |home|.SCNavigationToolbar-home|Styles applied to the home button|
  |explore|.SCNavigationToolbar-explore|Styles applied to the explore button|
+ |groups|.SCNavigationToolbar-groups|Styles applied to the group button|
+ |events|.SCNavigationToolbar-events|Styles applied to the event button|
  |search|.SCNavigationToolbar-search|Styles applied to the search component|
  |composer|.SCNavigationToolbar-composer|Styles applied to the composer component|
  |profile|.SCNavigationToolbar-profile|Styles applied to the profile button|
@@ -107,6 +110,7 @@ function NavigationToolbar(inProps) {
     }, [scPreferences.preferences]);
     const privateMessagingEnabled = (0, react_1.useMemo)(() => scPreferences.features.includes(types_1.SCFeatureName.PRIVATE_MESSAGING), [scPreferences.features]);
     const groupsEnabled = (0, react_1.useMemo)(() => scPreferences.features && scPreferences.features.includes(types_1.SCFeatureName.GROUPING) && scPreferences.features.includes(types_1.SCFeatureName.TAGGING), [scPreferences.features]);
+    const eventsEnabled = (0, react_1.useMemo)(() => scPreferences.features && scPreferences.features.includes(types_1.SCFeatureName.EVENT) && scPreferences.features.includes(types_1.SCFeatureName.TAGGING), [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)));
@@ -136,7 +140,11 @@ function NavigationToolbar(inProps) {
                 [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 },
-            react_1.default.createElement(Icon_1.default, null, "groups")))));
+            react_1.default.createElement(Icon_1.default, null, "groups"))),
+        eventsEnabled && scUserContext.user && (react_1.default.createElement(material_1.IconButton, { className: (0, classnames_1.default)(classes.events, {
+                [classes.active]: value.startsWith(scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, {}))
+            }), "aria-label": "Groups", to: scRoutingContext.url(react_core_1.SCRoutes.EVENTS_ROUTE_NAME, {}), component: react_core_1.Link },
+            react_1.default.createElement(Icon_1.default, null, "CalendarIcon")))));
     return (react_1.default.createElement(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.root) }, rest),
         react_1.default.createElement(NavigationMenuIconButtonComponent, null),
         react_1.default.createElement(react_core_1.Link, { to: scRoutingContext.url(react_core_1.SCRoutes.HOME_ROUTE_NAME, {}), className: classes.logo },

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

@@ -14,6 +14,7 @@ const NavigationSettingsIconButton_1 = tslib_1.__importDefault(require("../Navig
 const NavigationMenuIconButton_1 = tslib_1.__importDefault(require("../NavigationMenuIconButton"));
 const constants_1 = require("./constants");
 const types_1 = require("@selfcommunity/types");
+const ComposerIconButton_1 = tslib_1.__importDefault(require("../ComposerIconButton"));
 const classes = {
     root: `${constants_1.PREFIX}-root`,
     logo: `${constants_1.PREFIX}-logo`,
@@ -79,6 +80,10 @@ function NavigationToolbarMobile(inProps) {
     const [searchOpen, setSearchOpen] = (0, react_1.useState)(false);
     // MEMO
     const groupsEnabled = (0, react_1.useMemo)(() => features && features.includes(types_1.SCFeatureName.GROUPING) && features.includes(types_1.SCFeatureName.TAGGING), [features]);
+    const eventsEnabled = (0, react_1.useMemo)(() => features && features.includes(types_1.SCFeatureName.EVENT) && features.includes(types_1.SCFeatureName.TAGGING), [features]);
+    const exploreStreamEnabled = preferences[react_core_1.SCPreferences.CONFIGURATIONS_EXPLORE_STREAM_ENABLED].value;
+    const postOnlyStaffEnabled = preferences[react_core_1.SCPreferences.CONFIGURATIONS_POST_ONLY_STAFF_ENABLED].value;
+    const contentAvailable = preferences[react_core_1.SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY].value;
     // HANDLERS
     const handleOpenSearch = (0, react_1.useCallback)(() => {
         setSearchOpen(true);
@@ -100,12 +105,17 @@ function NavigationToolbarMobile(inProps) {
     return (react_1.default.createElement(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.root) }, rest),
         _children,
         startActions,
-        (preferences[react_core_1.SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY].value || scUserContext.user) && !disableSearch && (react_1.default.createElement(react_1.default.Fragment, null,
+        (contentAvailable || scUserContext.user) && !disableSearch && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(material_1.IconButton, { className: classes.search, onClick: handleOpenSearch },
                 react_1.default.createElement(Icon_1.default, null, "search")),
             react_1.default.createElement(SearchDialog_1.default, { className: classes.searchDialog, fullScreen: true, open: searchOpen, SearchAutocompleteProps: Object.assign(Object.assign({}, SearchAutocompleteProps), { onClear: handleCloseSearch }) }))),
         endActions,
-        scUserContext.user && groupsEnabled && (react_1.default.createElement(material_1.IconButton, { className: classes.notifications, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}) },
+        (!postOnlyStaffEnabled || (react_core_1.UserUtils.isStaff(scUserContext.user) && postOnlyStaffEnabled)) &&
+            groupsEnabled &&
+            eventsEnabled &&
+            (scUserContext.user || contentAvailable) &&
+            exploreStreamEnabled && react_1.default.createElement(ComposerIconButton_1.default, null),
+        scUserContext.user && (groupsEnabled || eventsEnabled) && (react_1.default.createElement(material_1.IconButton, { className: classes.notifications, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}) },
             react_1.default.createElement(material_1.Badge, { badgeContent: scUserContext.user.unseen_notification_banners_counter + scUserContext.user.unseen_interactions_counter, color: "secondary" },
                 react_1.default.createElement(Icon_1.default, null, "notifications_active")))),
         scUserContext.user ? (react_1.default.createElement(NavigationSettingsIconButtonComponent, { className: classes.settings })) : (react_1.default.createElement(material_1.Button, { className: classes.login, color: "inherit", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.SIGNIN_ROUTE_NAME, {}) },

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

@@ -1,6 +1,6 @@
-import React from 'react';
 import { ButtonBaseProps } from '@mui/material';
 import { SCUserType } from '@selfcommunity/types';
+import React, { ReactNode } from 'react';
 import { FollowUserButtonProps } from '../FollowUserButton/FollowUserButton';
 import { FriendshipButtonProps } from '../FriendshipUserButton/FriendshipUserButton';
 import { WidgetProps } from '../Widget';
@@ -49,6 +49,7 @@ export interface UserProps extends WidgetProps {
      * @default {}
      */
     buttonProps?: ButtonBaseProps | null;
+    secondary?: ReactNode | null;
     /**
      * Any other properties
      */

package/lib/cjs/components/User/User.js

@@ -1,19 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
-const styles_1 = require("@mui/material/styles");
-const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
 const material_1 = require("@mui/material");
+const styles_1 = require("@mui/material/styles");
+const system_1 = require("@mui/system");
 const react_core_1 = require("@selfcommunity/react-core");
-const react_intl_1 = require("react-intl");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const ConnectionUserButton_1 = tslib_1.__importDefault(require("../ConnectionUserButton"));
-const system_1 = require("@mui/system");
+const react_1 = tslib_1.__importStar(require("react"));
+const react_intl_1 = require("react-intl");
 const BaseItemButton_1 = tslib_1.__importDefault(require("../../shared/BaseItemButton"));
-const UserDeletedSnackBar_1 = tslib_1.__importDefault(require("../../shared/UserDeletedSnackBar"));
 const UserAvatar_1 = tslib_1.__importDefault(require("../../shared/UserAvatar"));
+const UserDeletedSnackBar_1 = tslib_1.__importDefault(require("../../shared/UserDeletedSnackBar"));
+const ConnectionUserButton_1 = tslib_1.__importDefault(require("../ConnectionUserButton"));
 const constants_1 = require("./constants");
+const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
 const messages = (0, react_intl_1.defineMessages)({
     userFollowers: {
         id: 'ui.user.userFollowers',
@@ -67,7 +67,7 @@ function User(inProps) {
         props: inProps,
         name: constants_1.PREFIX
     });
-    const { userId = null, user = null, handleIgnoreAction, className = null, followConnectUserButtonProps = {}, showFollowers = false, elevation, badgeContent = null, actions = null, isGroupAdmin = false, buttonProps = null } = props, rest = tslib_1.__rest(props, ["userId", "user", "handleIgnoreAction", "className", "followConnectUserButtonProps", "showFollowers", "elevation", "badgeContent", "actions", "isGroupAdmin", "buttonProps"]);
+    const { userId = null, user = null, handleIgnoreAction, className = null, followConnectUserButtonProps = {}, showFollowers = false, elevation, badgeContent = null, actions = null, isGroupAdmin = false, buttonProps = null, secondary = null } = props, rest = tslib_1.__rest(props, ["userId", "user", "handleIgnoreAction", "className", "followConnectUserButtonProps", "showFollowers", "elevation", "badgeContent", "actions", "isGroupAdmin", "buttonProps", "secondary"]);
     // STATE
     const { scUser, setSCUser } = (0, react_core_1.useSCFetchUser)({ id: userId, user });
     // CONTEXT
@@ -109,7 +109,7 @@ function User(inProps) {
                 react_1.default.createElement(material_1.Avatar, { alt: scUser.username, src: scUser.avatar, className: classes.avatar }))) : (react_1.default.createElement(UserAvatar_1.default, { hide: !hasBadge },
                 react_1.default.createElement(material_1.Avatar, { alt: scUser.username, src: scUser.avatar, className: classes.avatar }))), primary: (hasBadge && preferences) || isGroupAdmin ? (react_1.default.createElement(react_1.default.Fragment, null,
                 scUser.username,
-                react_1.default.createElement(material_1.Chip, { component: "span", className: isGroupAdmin ? classes.groupAdminBadgeLabel : classes.staffBadgeLabel, size: "small", label: isGroupAdmin ? (react_1.default.createElement(react_intl_1.FormattedMessage, { defaultMessage: "ui.user.group.admin", id: "ui.user.group.admin" })) : (preferences[react_core_1.SCPreferences.STAFF_STAFF_BADGE_LABEL]) }))) : (scUser.username), secondary: showFollowers ? `${intl.formatMessage(messages.userFollowers, { total: scUser.followers_counter })}` : scUser.description, actions: actions !== null && actions !== void 0 ? actions : renderAuthenticatedActions() })),
+                react_1.default.createElement(material_1.Chip, { component: "span", className: isGroupAdmin ? classes.groupAdminBadgeLabel : classes.staffBadgeLabel, size: "small", label: isGroupAdmin ? (react_1.default.createElement(react_intl_1.FormattedMessage, { defaultMessage: "ui.user.group.admin", id: "ui.user.group.admin" })) : (preferences[react_core_1.SCPreferences.STAFF_STAFF_BADGE_LABEL]) }))) : (scUser.username), secondary: secondary || (showFollowers ? `${intl.formatMessage(messages.userFollowers, { total: scUser.followers_counter })}` : scUser.description), actions: actions !== null && actions !== void 0 ? actions : renderAuthenticatedActions() })),
         openAlert && react_1.default.createElement(UserDeletedSnackBar_1.default, { open: openAlert, handleClose: () => setOpenAlert(false) })));
 }
 exports.default = User;