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

package/lib/cjs/shared/Bullet/index.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
 const styles_1 = require("@mui/material/styles");
 const system_1 = require("@mui/system");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
@@ -20,6 +19,6 @@ function Bullet(inProps) {
         props: inProps,
         name: PREFIX
     }), { className } = _a, props = tslib_1.__rest(_a, ["className"]);
-    return (react_1.default.createElement(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.root) }, props), "\u2022"));
+    return (React.createElement(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.root) }, props), "\u2022"));
 }
 exports.default = Bullet;

package/lib/cjs/shared/Calendar/index.d.ts

@@ -1,5 +1,4 @@
-interface CalendarProps {
+export interface CalendarProps {
     day: number;
 }
 export default function Calendar(props: CalendarProps): JSX.Element;
-export {};

package/lib/cjs/shared/Calendar/index.js

@@ -1,7 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
 const material_1 = require("@mui/material");
 const PREFIX = 'SCCalendar';
 const Root = (0, material_1.styled)(material_1.Stack, {
@@ -11,8 +9,8 @@ const Root = (0, material_1.styled)(material_1.Stack, {
 })();
 function Calendar(props) {
     const day = props.day;
-    return (react_1.default.createElement(Root, { gap: "7px", position: "absolute", bottom: "-36px", left: "24px", width: "60px", height: "60px", borderRadius: "5px", boxShadow: "0px 3px 8px #00000040", bgcolor: "#fff", overflow: "hidden" },
-        react_1.default.createElement(material_1.Box, { width: "100%", height: "16px", bgcolor: "#b20404" }),
-        react_1.default.createElement(material_1.Typography, { variant: "h2", textAlign: "center" }, day)));
+    return (React.createElement(Root, { gap: "7px", position: "absolute", bottom: "-36px", left: "24px", width: "60px", height: "60px", borderRadius: "5px", boxShadow: "0px 3px 8px #00000040", bgcolor: "#fff", overflow: "hidden" },
+        React.createElement(material_1.Box, { width: "100%", height: "16px", bgcolor: "#b20404" }),
+        React.createElement(material_1.Typography, { variant: "h2", textAlign: "center" }, day)));
 }
 exports.default = Calendar;

package/lib/cjs/shared/EventInfoDetails/index.d.ts

@@ -0,0 +1,6 @@
+import { SCEventType } from '@selfcommunity/types';
+export interface EventInfoDetailsProps {
+    event: SCEventType;
+    hasCreatedInfo?: boolean;
+}
+export default function EventInfoDetails(inProps: EventInfoDetailsProps): JSX.Element;

package/lib/cjs/shared/EventInfoDetails/index.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const material_1 = require("@mui/material");
+const react_core_1 = require("@selfcommunity/react-core");
+const date_fns_1 = require("date-fns");
+const locale_1 = require("date-fns/locale");
+const react_1 = require("react");
+const react_intl_1 = require("react-intl");
+const LOCALE_MAP = {
+    en: locale_1.enUS,
+    it: locale_1.it
+};
+const PREFIX = 'SCEventInfoDetails';
+const classes = {
+    root: `${PREFIX}-root`,
+    iconTextWrapper: `${PREFIX}-icon-text-wrapper`,
+    link: `${PREFIX}-link`,
+    url: `${PREFIX}-url`,
+    creationWrapper: `${PREFIX}-creation-wrapper`
+};
+const Root = (0, material_1.styled)(material_1.Stack, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (_props, styles) => styles.root
+})();
+function EventInfoDetails(inProps) {
+    // PROPS
+    const props = (0, material_1.useThemeProps)({
+        props: inProps,
+        name: PREFIX
+    });
+    const { event, hasCreatedInfo } = props;
+    // HOOKS
+    const intl = (0, react_intl_1.useIntl)();
+    const privacy = event.privacy === 'public' ? 'ui.eventInfoDetails.privacy.public' : 'ui.eventInfoDetails.privacy.private';
+    const location = event.location === 'virtual' ? 'ui.eventInfoDetails.location.virtual' : 'ui.eventInfoDetails.location.inPerson';
+    const LocationComponent = event.location === 'virtual' ? react_core_1.Link : react_1.Fragment;
+    const formatDateEventDate = (date) => {
+        return (0, date_fns_1.format)(new Date(date), "EEEE d MMMM' - Ore 'H:mm", {
+            locale: LOCALE_MAP[intl.locale]
+        }).replace(/([a-z/ì]+) (\d{2}) ([a-z]+) - Ore (\d{2}):(\d{2})/, (_, weekDay, day, month, hour, minute) => `${weekDay.charAt(0).toUpperCase() + weekDay.slice(1)} ${day} ${month.charAt(0).toUpperCase() + month.slice(1)} - Ore ${hour}:${minute}`);
+    };
+    const formatDateCreateDate = (date) => {
+        return (0, date_fns_1.format)(new Date(date), "'Creato il 'd MMMM y", {
+            locale: LOCALE_MAP[intl.locale]
+        }).replace(/Creato il (\d{1})+ ([a-z]+) (\d{4})/, (_, day, month, year) => `Creato il ${day} ${month.charAt(0).toUpperCase() + month.slice(1)} ${year}`);
+    };
+    return (React.createElement(Root, { className: classes.root },
+        React.createElement(material_1.Stack, { className: classes.iconTextWrapper },
+            React.createElement(material_1.Icon, { fontSize: "small" }, "CalendarIcon"),
+            React.createElement(material_1.Typography, { variant: "body1" }, formatDateEventDate(event.start_date))),
+        React.createElement(material_1.Stack, { className: classes.iconTextWrapper },
+            React.createElement(material_1.Icon, { fontSize: "small" }, event.privacy === 'public' ? 'public' : 'private'),
+            React.createElement(material_1.Typography, { variant: "body1" },
+                React.createElement(react_intl_1.FormattedMessage, { id: privacy, defaultMessage: privacy })),
+            "-",
+            React.createElement(material_1.Typography, { variant: "body1" },
+                React.createElement(react_intl_1.FormattedMessage, { id: location, defaultMessage: location }))),
+        React.createElement(material_1.Stack, { className: classes.iconTextWrapper },
+            React.createElement(material_1.Icon, { fontSize: "small" }, event.location === 'virtual' ? 'play_circle_outline' : 'add_location_alt'),
+            React.createElement(LocationComponent, { to: event.link, target: "_blank", className: classes.link },
+                React.createElement(material_1.Typography, { variant: "body1", className: classes.url }, event.location === 'virtual' ? event.link : event.geolocation))),
+        hasCreatedInfo && (React.createElement(material_1.Stack, { className: classes.creationWrapper },
+            React.createElement(material_1.Icon, { fontSize: "small" }, "create"),
+            React.createElement(material_1.Typography, { variant: "body1" }, formatDateCreateDate(event.created_at))))));
+}
+exports.default = EventInfoDetails;

package/lib/esm/components/BottomNavigation/BottomNavigation.js

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

package/lib/esm/components/CreateEventButton/CreateEventButton.js

@@ -1,13 +1,12 @@
 import { __rest } from "tslib";
-import React, { useContext, useMemo } from 'react';
-import { useThemeProps } from '@mui/system';
-import { styled } from '@mui/material/styles';
 import { Button, Icon } from '@mui/material';
-import { FormattedMessage } from 'react-intl';
+import { styled } from '@mui/material/styles';
+import { useThemeProps } from '@mui/system';
 import { SCPreferences, SCUserContext, useSCPreferences } from '@selfcommunity/react-core';
 import classNames from 'classnames';
+import React, { useContext, useMemo } from 'react';
+import { FormattedMessage } from 'react-intl';
 import EventForm from '../EventForm';
-import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
 const PREFIX = 'SCCreateEventButton';
 const classes = {
     root: `${PREFIX}-root`
@@ -65,7 +64,7 @@ export default function CreateEventButton(inProps) {
      * If there's no authUserId, component is hidden.
      */
     if ((!canCreateEvent && onlyStaffEnabled) || !authUserId) {
-        return React.createElement(HiddenPlaceholder, null);
+        return null;
     }
     /**
      * Renders root object

package/lib/esm/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/esm/components/EventInfoWidget/EventInfoWidget.js

@@ -0,0 +1,71 @@
+import { __rest } from "tslib";
+import { Box, Button, CardContent, Icon, Stack, styled, Typography, useThemeProps } from '@mui/material';
+import { useSCFetchEvent } from '@selfcommunity/react-core';
+import { useCallback, useEffect, useState } from 'react';
+import { FormattedMessage } from 'react-intl';
+import EventInfoDetails from '../../shared/EventInfoDetails';
+import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
+import Widget from '../Widget';
+import { PREFIX } from './constants';
+const classes = {
+    root: `${PREFIX}-root`,
+    content: `${PREFIX}-content`,
+    titleWrapper: `${PREFIX}-title-wrapper`,
+    textWrapper: `${PREFIX}-text-wrapper`,
+    showMore: `${PREFIX}-show-more`
+};
+const Root = styled(Widget, {
+    name: 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;
+}
+export default function EventInfoWidget(inProps) {
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { event, eventId, summaryExpanded = false } = props, rest = __rest(props, ["event", "eventId", "summaryExpanded"]);
+    // STATE
+    const [expanded, setExpanded] = useState(summaryExpanded);
+    const [showButton, setShowButton] = useState(!summaryExpanded);
+    // HOOKS
+    const { scEvent } = useSCFetchEvent({ id: eventId, event });
+    useEffect(() => {
+        if (!scEvent) {
+            return;
+        }
+        const _showButton = isTextLongerThanLimit(scEvent.description, 220);
+        if (_showButton !== !summaryExpanded) {
+            setShowButton(_showButton);
+        }
+    }, [scEvent]);
+    /**
+     * Handle toggle summary
+     */
+    const handleToggleSummary = useCallback(() => {
+        setExpanded(!expanded);
+    }, [expanded]);
+    if (!scEvent) {
+        return React.createElement(HiddenPlaceholder, null);
+    }
+    const description = expanded ? scEvent.description : getTruncatedText(scEvent.description, 220);
+    return (React.createElement(Root, Object.assign({ className: classes.root }, rest, { expanded: expanded }),
+        React.createElement(CardContent, { className: classes.content },
+            React.createElement(Stack, { className: classes.titleWrapper },
+                React.createElement(Icon, { fontSize: "small" }, "info"),
+                React.createElement(Typography, { variant: "h5" },
+                    React.createElement(FormattedMessage, { id: "ui.infoEventWidget.title", defaultMessage: "ui.infoEventWidget.title" }))),
+            React.createElement(Box, { className: classes.textWrapper },
+                React.createElement(Typography, { component: "span", variant: "body1" },
+                    description,
+                    showButton && !expanded && (React.createElement(Button, { size: "small", variant: "text", className: classes.showMore, onClick: handleToggleSummary },
+                        React.createElement(FormattedMessage, { id: "ui.infoEventWidget.showMore", defaultMessage: "ui.infoEventWidget.showMore" }))))),
+            React.createElement(EventInfoDetails, { event: scEvent }))));
+}

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

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

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

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

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

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

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

@@ -0,0 +1,3 @@
+import EventInfoWidget from './EventInfoWidget';
+// import EventInfoWidgetSkeleton from './Skeleton';
+export default EventInfoWidget;

package/lib/esm/components/EventInviteButton/EventInviteButton.js

@@ -1,20 +1,20 @@
 import { __rest } from "tslib";
-import React, { useContext, useEffect, useMemo, useState } from 'react';
-import { useThemeProps } from '@mui/system';
-import { styled } from '@mui/material/styles';
+import { LoadingButton } from '@mui/lab';
 import { Avatar, Box, Button, Chip, Icon, IconButton, InputAdornment, TextField, Typography } from '@mui/material';
-import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import Autocomplete from '@mui/material/Autocomplete';
+import { styled } from '@mui/material/styles';
+import { useThemeProps } from '@mui/system';
+import { EventService } from '@selfcommunity/api-services';
 import { SCUserContext, useSCFetchEvent } from '@selfcommunity/react-core';
+import { Logger } from '@selfcommunity/utils';
 import classNames from 'classnames';
-import BaseDialog from '../../shared/BaseDialog';
-import { LoadingButton } from '@mui/lab';
-import { EventService } from '@selfcommunity/api-services';
-import Autocomplete from '@mui/material/Autocomplete';
-import User from '../User';
+import PubSub from 'pubsub-js';
+import React, { useContext, useEffect, useMemo, useState } from 'react';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { SCOPE_SC_UI } from '../../constants/Errors';
-import { Logger } from '@selfcommunity/utils';
 import { SCGroupEventType, SCTopicType } from '../../constants/PubSub';
-import PubSub from 'pubsub-js';
+import BaseDialog from '../../shared/BaseDialog';
+import User from '../User';
 const messages = defineMessages({
     placeholder: {
         id: 'ui.eventInviteButton.searchBar.placeholder',

package/lib/esm/components/Events/Events.js

@@ -1,21 +1,21 @@
 import { __rest } from "tslib";
-import React, { useContext, useEffect, useMemo, useState } from 'react';
-import { styled } from '@mui/material/styles';
 import { Box, Button, Chip, FormControl, Grid, Icon, InputLabel, MenuItem, Radio, Select, TextField, Typography } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { useThemeProps } from '@mui/system';
 import { Endpoints, EventService, http } from '@selfcommunity/api-services';
 import { SCPreferences, SCPreferencesContext, SCUserContext, UserUtils } from '@selfcommunity/react-core';
 import { SCEventDateFilterType } from '@selfcommunity/types';
-import Event, { EventSkeleton } from '../Event';
-import { FormattedMessage } from 'react-intl';
+import { Logger, sortByAttr } from '@selfcommunity/utils';
 import classNames from 'classnames';
-import { useThemeProps } from '@mui/system';
+import React, { useContext, useEffect, useMemo, useState } from 'react';
+import { FormattedMessage } from 'react-intl';
 import { SCOPE_SC_UI } from '../../constants/Errors';
-import { Logger, sortByAttr } from '@selfcommunity/utils';
-import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
-import { PREFIX } from './constants';
-import Skeleton from '../Events/Skeleton';
 import { DEFAULT_PAGINATION_OFFSET } from '../../constants/Pagination';
+import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
 import CreateEventButton from '../CreateEventButton';
+import Event, { EventSkeleton } from '../Event';
+import Skeleton from '../Events/Skeleton';
+import { PREFIX } from './constants';
 const classes = {
     root: `${PREFIX}-root`,
     filters: `${PREFIX}-filters`,
@@ -74,7 +74,7 @@ export default function Events(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { endpointQueryParams = { limit: 2, offset: DEFAULT_PAGINATION_OFFSET }, className, EventComponentProps = {}, showFilters = false, filters, general = true } = props, rest = __rest(props, ["endpointQueryParams", "className", "EventComponentProps", "showFilters", "filters", "general"]);
+    const { endpointQueryParams = { limit: 8, offset: DEFAULT_PAGINATION_OFFSET }, className, EventComponentProps = {}, showFilters = false, filters, general = false } = props, rest = __rest(props, ["endpointQueryParams", "className", "EventComponentProps", "showFilters", "filters", "general"]);
     // STATE
     const [events, setEvents] = useState([]);
     const [loading, setLoading] = useState(true);

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

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

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

@@ -22,6 +22,7 @@ const classes = {
     navigation: `${PREFIX}-navigation`,
     home: `${PREFIX}-home`,
     explore: `${PREFIX}-explore`,
+    events: `${PREFIX}-events`,
     groups: `${PREFIX}-groups`,
     search: `${PREFIX}-search`,
     composer: `${PREFIX}-composer`,
@@ -74,6 +75,8 @@ const PREFERENCES = [
  |navigation|.SCNavigationToolbar-navigation|Styles applied to the navigation container element|
  |home|.SCNavigationToolbar-home|Styles applied to the home button|
  |explore|.SCNavigationToolbar-explore|Styles applied to the explore button|
+ |groups|.SCNavigationToolbar-groups|Styles applied to the group button|
+ |events|.SCNavigationToolbar-events|Styles applied to the event button|
  |search|.SCNavigationToolbar-search|Styles applied to the search component|
  |composer|.SCNavigationToolbar-composer|Styles applied to the composer component|
  |profile|.SCNavigationToolbar-profile|Styles applied to the profile button|
@@ -105,6 +108,7 @@ export default function NavigationToolbar(inProps) {
     }, [scPreferences.preferences]);
     const privateMessagingEnabled = useMemo(() => scPreferences.features.includes(SCFeatureName.PRIVATE_MESSAGING), [scPreferences.features]);
     const groupsEnabled = useMemo(() => scPreferences.features && scPreferences.features.includes(SCFeatureName.GROUPING) && scPreferences.features.includes(SCFeatureName.TAGGING), [scPreferences.features]);
+    const eventsEnabled = useMemo(() => scPreferences.features && scPreferences.features.includes(SCFeatureName.EVENT) && scPreferences.features.includes(SCFeatureName.TAGGING), [scPreferences.features]);
     const showComposer = useMemo(() => {
         return (!disableComposer &&
             (!scPreferences.preferences[SCPreferences.CONFIGURATIONS_POST_ONLY_STAFF_ENABLED].value || UserUtils.isStaff(scUserContext.user)));
@@ -134,7 +138,11 @@ export default function NavigationToolbar(inProps) {
                 [classes.active]: value.startsWith(scRoutingContext.url(SCRoutes.GROUPS_SUBSCRIBED_ROUTE_NAME, {})) ||
                     value.startsWith(scRoutingContext.url(SCRoutes.GROUPS_ROUTE_NAME, {}))
             }), "aria-label": "Groups", to: scRoutingContext.url(SCRoutes.GROUPS_SUBSCRIBED_ROUTE_NAME, {}), component: Link },
-            React.createElement(Icon, null, "groups")))));
+            React.createElement(Icon, null, "groups"))),
+        eventsEnabled && scUserContext.user && (React.createElement(IconButton, { className: classNames(classes.events, {
+                [classes.active]: value.startsWith(scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, {}))
+            }), "aria-label": "Groups", to: scRoutingContext.url(SCRoutes.EVENTS_ROUTE_NAME, {}), component: Link },
+            React.createElement(Icon, null, "CalendarIcon")))));
     return (React.createElement(Root, Object.assign({ className: classNames(className, classes.root) }, rest),
         React.createElement(NavigationMenuIconButtonComponent, null),
         React.createElement(Link, { to: scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}), className: classes.logo },

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

@@ -1,7 +1,7 @@
 import { __rest } from "tslib";
 import { Badge, Button, IconButton, styled, Toolbar } from '@mui/material';
 import React, { useCallback, useMemo, useState } from 'react';
-import { Link, SCPreferences, SCRoutes, useSCPreferences, useSCRouting, useSCUser } from '@selfcommunity/react-core';
+import { Link, SCPreferences, SCRoutes, UserUtils, useSCPreferences, useSCRouting, useSCUser } from '@selfcommunity/react-core';
 import Icon from '@mui/material/Icon';
 import { useThemeProps } from '@mui/system';
 import classNames from 'classnames';
@@ -12,6 +12,7 @@ import NavigationSettingsIconButton from '../NavigationSettingsIconButton';
 import NavigationMenuIconButton from '../NavigationMenuIconButton';
 import { PREFIX } from './constants';
 import { SCFeatureName } from '@selfcommunity/types';
+import ComposerIconButton from '../ComposerIconButton';
 const classes = {
     root: `${PREFIX}-root`,
     logo: `${PREFIX}-logo`,
@@ -77,6 +78,10 @@ export default function NavigationToolbarMobile(inProps) {
     const [searchOpen, setSearchOpen] = useState(false);
     // MEMO
     const groupsEnabled = useMemo(() => features && features.includes(SCFeatureName.GROUPING) && features.includes(SCFeatureName.TAGGING), [features]);
+    const eventsEnabled = useMemo(() => features && features.includes(SCFeatureName.EVENT) && features.includes(SCFeatureName.TAGGING), [features]);
+    const exploreStreamEnabled = preferences[SCPreferences.CONFIGURATIONS_EXPLORE_STREAM_ENABLED].value;
+    const postOnlyStaffEnabled = preferences[SCPreferences.CONFIGURATIONS_POST_ONLY_STAFF_ENABLED].value;
+    const contentAvailable = preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY].value;
     // HANDLERS
     const handleOpenSearch = useCallback(() => {
         setSearchOpen(true);
@@ -98,12 +103,17 @@ export default function NavigationToolbarMobile(inProps) {
     return (React.createElement(Root, Object.assign({ className: classNames(className, classes.root) }, rest),
         _children,
         startActions,
-        (preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY].value || scUserContext.user) && !disableSearch && (React.createElement(React.Fragment, null,
+        (contentAvailable || scUserContext.user) && !disableSearch && (React.createElement(React.Fragment, null,
             React.createElement(IconButton, { className: classes.search, onClick: handleOpenSearch },
                 React.createElement(Icon, null, "search")),
             React.createElement(SearchDialog, { className: classes.searchDialog, fullScreen: true, open: searchOpen, SearchAutocompleteProps: Object.assign(Object.assign({}, SearchAutocompleteProps), { onClear: handleCloseSearch }) }))),
         endActions,
-        scUserContext.user && groupsEnabled && (React.createElement(IconButton, { className: classes.notifications, component: Link, to: scRoutingContext.url(SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}) },
+        (!postOnlyStaffEnabled || (UserUtils.isStaff(scUserContext.user) && postOnlyStaffEnabled)) &&
+            groupsEnabled &&
+            eventsEnabled &&
+            (scUserContext.user || contentAvailable) &&
+            exploreStreamEnabled && React.createElement(ComposerIconButton, null),
+        scUserContext.user && (groupsEnabled || eventsEnabled) && (React.createElement(IconButton, { className: classes.notifications, component: Link, to: scRoutingContext.url(SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}) },
             React.createElement(Badge, { badgeContent: scUserContext.user.unseen_notification_banners_counter + scUserContext.user.unseen_interactions_counter, color: "secondary" },
                 React.createElement(Icon, null, "notifications_active")))),
         scUserContext.user ? (React.createElement(NavigationSettingsIconButtonComponent, { className: classes.settings })) : (React.createElement(Button, { className: classes.login, color: "inherit", component: Link, to: scRoutingContext.url(SCRoutes.SIGNIN_ROUTE_NAME, {}) },

package/lib/esm/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/esm/components/User/User.js

@@ -1,17 +1,17 @@
 import { __rest } from "tslib";
-import React, { useMemo, useState } from 'react';
-import { styled } from '@mui/material/styles';
-import UserSkeleton from './Skeleton';
 import { Avatar, Badge, Button, Chip } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { useThemeProps } from '@mui/system';
 import { Link, SCPreferences, SCRoutes, useSCFetchUser, useSCPreferences, useSCRouting } from '@selfcommunity/react-core';
-import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import classNames from 'classnames';
-import ConnectionUserButton from '../ConnectionUserButton';
-import { useThemeProps } from '@mui/system';
+import React, { useMemo, useState } from 'react';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import BaseItemButton from '../../shared/BaseItemButton';
-import UserDeletedSnackBar from '../../shared/UserDeletedSnackBar';
 import UserAvatar from '../../shared/UserAvatar';
+import UserDeletedSnackBar from '../../shared/UserDeletedSnackBar';
+import ConnectionUserButton from '../ConnectionUserButton';
 import { PREFIX } from './constants';
+import UserSkeleton from './Skeleton';
 const messages = defineMessages({
     userFollowers: {
         id: 'ui.user.userFollowers',
@@ -65,7 +65,7 @@ export default function User(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { userId = null, user = null, handleIgnoreAction, className = null, followConnectUserButtonProps = {}, showFollowers = false, elevation, badgeContent = null, actions = null, isGroupAdmin = false, buttonProps = null } = props, rest = __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 = __rest(props, ["userId", "user", "handleIgnoreAction", "className", "followConnectUserButtonProps", "showFollowers", "elevation", "badgeContent", "actions", "isGroupAdmin", "buttonProps", "secondary"]);
     // STATE
     const { scUser, setSCUser } = useSCFetchUser({ id: userId, user });
     // CONTEXT
@@ -107,6 +107,6 @@ export default function User(inProps) {
                 React.createElement(Avatar, { alt: scUser.username, src: scUser.avatar, className: classes.avatar }))) : (React.createElement(UserAvatar, { hide: !hasBadge },
                 React.createElement(Avatar, { alt: scUser.username, src: scUser.avatar, className: classes.avatar }))), primary: (hasBadge && preferences) || isGroupAdmin ? (React.createElement(React.Fragment, null,
                 scUser.username,
-                React.createElement(Chip, { component: "span", className: isGroupAdmin ? classes.groupAdminBadgeLabel : classes.staffBadgeLabel, size: "small", label: isGroupAdmin ? (React.createElement(FormattedMessage, { defaultMessage: "ui.user.group.admin", id: "ui.user.group.admin" })) : (preferences[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.createElement(Chip, { component: "span", className: isGroupAdmin ? classes.groupAdminBadgeLabel : classes.staffBadgeLabel, size: "small", label: isGroupAdmin ? (React.createElement(FormattedMessage, { defaultMessage: "ui.user.group.admin", id: "ui.user.group.admin" })) : (preferences[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.createElement(UserDeletedSnackBar, { open: openAlert, handleClose: () => setOpenAlert(false) })));
 }