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

package/lib/esm/components/EventSubscribeButton/EventSubscribeButton.js

@@ -0,0 +1,190 @@
+import { __rest } from "tslib";
+import React, { useEffect, useMemo, useState } from 'react';
+import { styled } from '@mui/material/styles';
+import { CacheStrategies, Logger } from '@selfcommunity/utils';
+import { useSCContext, useSCFetchEvent, useSCUser } from '@selfcommunity/react-core';
+import { SCEventPrivacyType, SCEventSubscriptionStatusType } from '@selfcommunity/types';
+import { FormattedMessage } from 'react-intl';
+import classNames from 'classnames';
+import { useThemeProps } from '@mui/system';
+import { SCOPE_SC_UI } from '../../constants/Errors';
+import { Box, Button, Checkbox, Icon, Menu, MenuItem, SwipeableDrawer, useMediaQuery, useTheme } from '@mui/material';
+import { LoadingButton } from '@mui/lab';
+const PREFIX = 'SCEventSubscribeButton';
+const classes = {
+    requestRoot: `${PREFIX}-request-root`,
+    selectRoot: `${PREFIX}-select-root`,
+    drawerRoot: `${PREFIX}-drawer-root`,
+    menuRoot: `${PREFIX}-menu-root`,
+    paper: `${PREFIX}-paper`,
+    item: `${PREFIX}-item`,
+    going: `${PREFIX}-going`,
+    notGoing: `${PREFIX}-not-going`
+};
+const options = [
+    {
+        value: SCEventSubscriptionStatusType.GOING,
+        label: React.createElement(FormattedMessage, { id: "ui.eventSubscribeButton.going", defaultMessage: "ui.eventSubscribeButton.going" })
+    },
+    {
+        value: SCEventSubscriptionStatusType.NOT_GOING,
+        label: React.createElement(FormattedMessage, { id: "ui.eventSubscribeButton.notGoing", defaultMessage: "ui.eventSubscribeButton.notGoing" })
+    }
+];
+const RequestRoot = styled(LoadingButton, {
+    name: PREFIX,
+    slot: 'RequestRoot'
+})(() => ({}));
+const SelectRoot = styled(Button, {
+    name: PREFIX,
+    slot: 'SelectRoot'
+})(() => ({}));
+const SwipeableDrawerRoot = styled(SwipeableDrawer, {
+    name: PREFIX,
+    slot: 'DrawerRoot'
+})(() => ({}));
+const MenuRoot = styled(Menu, {
+    name: PREFIX,
+    slot: 'MenuRoot'
+})(() => ({}));
+/**
+ * > API documentation for the Community-JS Event Subscribe Button component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {EventSubscribeButton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCEventSubscribeButton` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCEventSubscribeButton-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+export default function EventSubscribeButton(inProps) {
+    var _a;
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, eventId, event, user, onSubscribe } = props, rest = __rest(props, ["className", "eventId", "event", "user", "onSubscribe"]);
+    // STATE
+    const [status, setStatus] = useState(null);
+    const [anchorEl, setAnchorEl] = React.useState(null);
+    const open = Boolean(anchorEl);
+    // CONTEXT
+    const scContext = useSCContext();
+    const scUserContext = useSCUser();
+    const scEventsManager = scUserContext.managers.events;
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+    // CONST
+    const authUserId = scUserContext.user ? scUserContext.user.id : null;
+    const { scEvent } = useSCFetchEvent({
+        id: eventId,
+        event,
+        cacheStrategy: authUserId ? CacheStrategies.CACHE_FIRST : CacheStrategies.STALE_WHILE_REVALIDATE
+    });
+    const isEventAdmin = useMemo(() => { var _a; return scUserContext.user && ((_a = scEvent === null || scEvent === void 0 ? void 0 : scEvent.managed_by) === null || _a === void 0 ? void 0 : _a.id) === scUserContext.user.id; }, [scUserContext.user, (_a = scEvent === null || scEvent === void 0 ? void 0 : scEvent.managed_by) === null || _a === void 0 ? void 0 : _a.id]);
+    // HANDLERS
+    const handleOpen = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+    useEffect(() => {
+        /**
+         * Call scEventsManager.subscriptionStatus inside an effect
+         * to avoid warning rendering child during update parent state
+         */
+        if (authUserId) {
+            setStatus(scEventsManager === null || scEventsManager === void 0 ? void 0 : scEventsManager.subscriptionStatus(scEvent));
+        }
+    }, [authUserId, scEventsManager === null || scEventsManager === void 0 ? void 0 : scEventsManager.subscriptionStatus, scEvent]);
+    const toggleGoingToEvent = (user) => {
+        scEventsManager
+            .toggleEventAttendance(scEvent, user === null || user === void 0 ? void 0 : user.id)
+            .then(() => {
+            const _status = scEvent.privacy === SCEventPrivacyType.PRIVATE && scEvent.subscription_status !== SCEventSubscriptionStatusType.INVITED
+                ? SCEventSubscriptionStatusType.REQUESTED
+                : scEvent.subscription_status === SCEventSubscriptionStatusType.GOING
+                    ? SCEventSubscriptionStatusType.SUBSCRIBED
+                    : SCEventSubscriptionStatusType.GOING;
+            onSubscribe && onSubscribe(scEvent, _status);
+        })
+            .catch((e) => {
+            Logger.error(SCOPE_SC_UI, e);
+        });
+    };
+    const toggleNotGoingToEvent = () => {
+        scEventsManager
+            .toggleEventNonattendance(scEvent)
+            .then(() => {
+            const _status = scEvent.subscription_status === SCEventSubscriptionStatusType.NOT_GOING
+                ? SCEventSubscriptionStatusType.SUBSCRIBED
+                : SCEventSubscriptionStatusType.NOT_GOING;
+            onSubscribe && onSubscribe(scEvent, _status);
+        })
+            .catch((e) => {
+            Logger.error(SCOPE_SC_UI, e);
+        });
+    };
+    const handleToggleAction = (event) => {
+        const _status = event.target.value;
+        setAnchorEl(null);
+        if (!scUserContext.user) {
+            scContext.settings.handleAnonymousAction();
+        }
+        else {
+            (_status === SCEventSubscriptionStatusType.NOT_GOING && !(user === null || user === void 0 ? void 0 : user.id)) || (!_status && (user === null || user === void 0 ? void 0 : user.id)) ? toggleNotGoingToEvent() : toggleGoingToEvent();
+        }
+    };
+    function renderMenuItems() {
+        return (React.createElement(Box, null, options.map((option) => (React.createElement(MenuItem, { key: option.value, className: classes.item },
+            option.label,
+            React.createElement(Checkbox, { size: "small", checked: status === option.value, value: option.value, onChange: handleToggleAction, name: `${option.value}-option`, inputProps: { 'aria-label': `${option.label}` } }))))));
+    }
+    /**
+     * Get current translated status
+     */
+    const getStatus = useMemo(() => {
+        let _status;
+        switch (status) {
+            case SCEventSubscriptionStatusType.REQUESTED:
+                _status = React.createElement(FormattedMessage, { defaultMessage: "ui.eventSubscribeButton.waitingApproval", id: "ui.eventSubscribeButton.waitingApproval" });
+                break;
+            case SCEventSubscriptionStatusType.GOING:
+                _status = React.createElement(FormattedMessage, { defaultMessage: "ui.eventSubscribeButton.going", id: "ui.eventSubscribeButton.going" });
+                break;
+            case SCEventSubscriptionStatusType.INVITED:
+                _status = React.createElement(FormattedMessage, { defaultMessage: "ui.eventSubscribeButton.accept", id: "ui.eventSubscribeButton.accept" });
+                break;
+            case SCEventSubscriptionStatusType.NOT_GOING:
+                _status = React.createElement(FormattedMessage, { defaultMessage: "ui.eventSubscribeButton.notGoing", id: "ui.eventSubscribeButton.notGoing" });
+                break;
+            default:
+                (scEvent === null || scEvent === void 0 ? void 0 : scEvent.privacy) === SCEventPrivacyType.PUBLIC
+                    ? (_status = React.createElement(FormattedMessage, { defaultMessage: "ui.eventSubscribeButton.label", id: "ui.eventSubscribeButton.label" }))
+                    : (_status = (React.createElement(FormattedMessage, { defaultMessage: "ui.eventSubscribeButton.requestParticipation", id: "ui.eventSubscribeButton.requestParticipation" })));
+                break;
+        }
+        return _status;
+    }, [status, scEvent]);
+    if (!scEvent || (isEventAdmin && (user === null || user === void 0 ? void 0 : user.id) === scUserContext.user.id) || (isEventAdmin && !(user === null || user === void 0 ? void 0 : user.id))) {
+        return null;
+    }
+    return (React.createElement(React.Fragment, null, (scEvent === null || scEvent === void 0 ? void 0 : scEvent.privacy) !== SCEventPrivacyType.PRIVATE ? (React.createElement(React.Fragment, null,
+        React.createElement(SelectRoot, Object.assign({ className: classNames(classes.selectRoot, className, { [classes.going]: status && status === SCEventSubscriptionStatusType.GOING }, { [classes.notGoing]: status && status === SCEventSubscriptionStatusType.NOT_GOING }), onClick: handleOpen, endIcon: React.createElement(Icon, null, open ? 'expand_less' : 'expand_more'), startIcon: status &&
+                status !== SCEventSubscriptionStatusType.SUBSCRIBED && (React.createElement(Icon, null, status === SCEventSubscriptionStatusType.GOING ? 'circle_checked' : 'circle_closed')) }, rest), getStatus),
+        isMobile ? (React.createElement(SwipeableDrawerRoot, { className: classes.drawerRoot, PaperProps: { className: classes.paper }, open: open, onClose: handleClose, onOpen: handleOpen, anchor: "bottom", disableSwipeToOpen: true }, renderMenuItems())) : (React.createElement(MenuRoot, { className: classes.menuRoot, anchorEl: anchorEl, open: open, onClose: handleClose }, renderMenuItems())))) : (React.createElement(RequestRoot, Object.assign({ className: classNames(classes.requestRoot, className), variant: "outlined", size: "small", loading: scUserContext.user ? scEventsManager.isLoading(scEvent) : null, disabled: status === SCEventSubscriptionStatusType.REQUESTED }, rest), getStatus))));
+}

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

@@ -0,0 +1,3 @@
+import EventSubscribeButton, { EventSubscribeButtonProps } from './EventSubscribeButton';
+export default EventSubscribeButton;
+export { EventSubscribeButtonProps };

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

@@ -0,0 +1,2 @@
+import EventSubscribeButton from './EventSubscribeButton';
+export default EventSubscribeButton;

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: 8, 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);
@@ -211,7 +211,8 @@ export default function Events(inProps) {
                     filteredEvents.map((event) => (React.createElement(Grid, { item: true, xs: 12, sm: 8, md: 6, key: event.id, className: classes.item },
                         React.createElement(Event, Object.assign({ event: event, eventId: event.id }, EventComponentProps))))),
                     filteredEvents.length <= 3 && (React.createElement(Grid, { item: true, xs: 12, sm: 8, md: 6, key: 'skeleton-item', className: classes.itemSkeleton },
-                        React.createElement(EventSkeleton, { action: React.createElement(CreateEventButton, null) }))))),
+                        React.createElement(EventSkeleton, { action: React.createElement(CreateEventButton, { variant: "outlined", color: "primary", size: "small" },
+                                React.createElement(FormattedMessage, { id: "ui.events.skeleton.action.add", defaultMessage: "ui.events.skeleton.action.add" })) }))))),
             Boolean(next) && (React.createElement(Button, { color: "secondary", variant: "text", onClick: handleNext, className: classes.showMore },
                 React.createElement(FormattedMessage, { id: "ui.events.button.seeMore", defaultMessage: "ui.events.button.seeMore" }))))))));
     /**

package/lib/esm/components/FeedObject/FeedObject.js

@@ -438,7 +438,7 @@ export default function FeedObject(inProps) {
                     obj.group && (React.createElement("div", { className: classes.group },
                         React.createElement(Chip, { color: "secondary", size: "small", key: obj.group.id, icon: React.createElement(Icon, null, "groups"), component: Link, to: scRoutingContext.url(SCRoutes.GROUP_ROUTE_NAME, obj.group), clickable: true }))),
                     obj.event && (React.createElement("div", { className: classes.event },
-                        React.createElement(Chip, { color: "secondary", size: "small", key: obj.event.id, icon: React.createElement(Icon, null, "CalendarIcon"), component: Link, to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, obj.event), clickable: true })))),
+                        React.createElement(Chip, { color: "secondary", size: "small", key: obj.event.id, label: obj.event.name, icon: React.createElement(Icon, null, "CalendarIcon"), component: Link, to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, obj.event), clickable: true })))),
                 obj.categories.map((c) => (React.createElement(Link, { to: scRoutingContext.url(SCRoutes.CATEGORY_ROUTE_NAME, c), key: c.id },
                     React.createElement(Typography, { variant: "overline" }, c.name)))))),
             obj.group && !obj.categories.length && (React.createElement("div", { className: classes.group },

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) })));
 }

package/lib/esm/constants/PubSub.d.ts

@@ -1,4 +1,4 @@
-import { SCUserType, SCGroupType } from '@selfcommunity/types';
+import { SCUserType, SCGroupType, SCEventType } from '@selfcommunity/types';
 /**
  * Define topics for pubsub
  */
@@ -21,3 +21,7 @@ export interface SCGroupMembersEventType {
     group: SCGroupType;
     user?: SCUserType;
 }
+export interface SCEventMembersEventType {
+    event: SCEventType;
+    user?: SCUserType;
+}