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

package/lib/esm/components/GroupForm/GroupForm.js

@@ -218,18 +218,18 @@ export default function GroupForm(inProps) {
     /**
      * Renders root object
      */
-    return (_jsx(Root, Object.assign({ DialogContentProps: { dividers: false }, title: group ? (_jsx(FormattedMessage, { id: "ui.groupForm.title.edit", defaultMessage: "ui.groupForm.title.edit" })) : (_jsx(FormattedMessage, { id: "ui.groupForm.title", defaultMessage: "ui.groupForm.title" })), open: open, onClose: onClose, className: classNames(classes.root, className), actions: _jsx(LoadingButton, Object.assign({ loading: field.isSubmitting, disabled: !field.name ||
+    return (_jsx(Root, Object.assign({ DialogContentProps: { dividers: false }, title: group ? (_jsx(FormattedMessage, { id: "ui.groupForm.title.edit", defaultMessage: "ui.groupForm.title.edit" })) : (_jsx(FormattedMessage, { id: "ui.groupForm.title", defaultMessage: "ui.groupForm.title" })), open: open, onClose: onClose, className: classNames(classes.root, className), actions: _jsx(LoadingButton, { loading: field.isSubmitting, disabled: !field.name ||
                 Object.keys(error).length !== 0 ||
                 field.name.length > GROUP_TITLE_MAX_LENGTH ||
-                field.name.description > GROUP_DESCRIPTION_MAX_LENGTH, variant: "contained", onClick: handleSubmit, color: "secondary" }, { children: group ? (_jsx(FormattedMessage, { id: "ui.groupForm.button.edit", defaultMessage: "ui.groupForm.button.edit" })) : (_jsx(FormattedMessage, { id: "ui.groupForm.button.create", defaultMessage: "ui.groupForm.button.create" })) })) }, rest, { children: _jsxs(_Fragment, { children: [_jsxs(_Fragment, { children: [_jsxs(Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: [_jsx(Box, Object.assign({ className: classes.avatar }, { children: _jsx(Avatar, { children: field.imageOriginal ? _jsx("img", { src: field.imageOriginal, alt: "avatar" }) : _jsx(Icon, { children: "icon_image" }) }) })), _jsxs(_Fragment, { children: [_jsx(ChangeGroupPicture, { isCreationMode: true, onChange: handleChangeAvatar }), _jsx(ChangeGroupCover, { isCreationMode: true, onChange: handleChangeCover })] })] })), _jsx(Typography, Object.assign({ className: classNames(classes.header, { [classes.error]: error.emotionalImageOriginalError || error.imageOriginalError }), align: "center" }, { children: error.emotionalImageOriginalError || error.imageOriginalError ? (_jsx(FormattedMessage, { id: "ui.groupForm.header.error", defaultMessage: "ui.groupForm.header.error" })) : (_jsx(FormattedMessage, { id: "ui.groupForm.header", defaultMessage: "ui.groupForm.header" })) }))] }), _jsxs(FormGroup, Object.assign({ className: classes.form }, { children: [_jsx(TextField, { required: true, className: classes.name, placeholder: `${intl.formatMessage(messages.name)}`, margin: "normal", value: field.name, name: "name", onChange: handleChange, InputProps: {
-                                endAdornment: _jsx(Typography, Object.assign({ variant: "body2" }, { children: GROUP_TITLE_MAX_LENGTH - field.name.length }))
+                field.name.description > GROUP_DESCRIPTION_MAX_LENGTH, variant: "contained", onClick: handleSubmit, color: "secondary", children: group ? (_jsx(FormattedMessage, { id: "ui.groupForm.button.edit", defaultMessage: "ui.groupForm.button.edit" })) : (_jsx(FormattedMessage, { id: "ui.groupForm.button.create", defaultMessage: "ui.groupForm.button.create" })) }) }, rest, { children: _jsxs(_Fragment, { children: [_jsxs(_Fragment, { children: [_jsxs(Paper, { style: _backgroundCover, classes: { root: classes.cover }, children: [_jsx(Box, { className: classes.avatar, children: _jsx(Avatar, { children: field.imageOriginal ? _jsx("img", { src: field.imageOriginal, alt: "avatar" }) : _jsx(Icon, { children: "icon_image" }) }) }), _jsxs(_Fragment, { children: [_jsx(ChangeGroupPicture, { isCreationMode: true, onChange: handleChangeAvatar }), _jsx(ChangeGroupCover, { isCreationMode: true, onChange: handleChangeCover })] })] }), _jsx(Typography, { className: classNames(classes.header, { [classes.error]: error.emotionalImageOriginalError || error.imageOriginalError }), align: "center", children: error.emotionalImageOriginalError || error.imageOriginalError ? (_jsx(FormattedMessage, { id: "ui.groupForm.header.error", defaultMessage: "ui.groupForm.header.error" })) : (_jsx(FormattedMessage, { id: "ui.groupForm.header", defaultMessage: "ui.groupForm.header" })) })] }), _jsxs(FormGroup, { className: classes.form, children: [_jsx(TextField, { required: true, className: classes.name, placeholder: `${intl.formatMessage(messages.name)}`, margin: "normal", value: field.name, name: "name", onChange: handleChange, InputProps: {
+                                endAdornment: _jsx(Typography, { variant: "body2", children: GROUP_TITLE_MAX_LENGTH - field.name.length })
                             }, error: Boolean(((_a = field === null || field === void 0 ? void 0 : field.name) === null || _a === void 0 ? void 0 : _a.length) > GROUP_TITLE_MAX_LENGTH), helperText: ((_b = field === null || field === void 0 ? void 0 : field.name) === null || _b === void 0 ? void 0 : _b.length) > GROUP_TITLE_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.groupForm.name.error.maxLength", defaultMessage: "ui.groupForm.name.error.maxLength" })) : null }), _jsx(TextField, { multiline: true, className: classes.description, placeholder: `${intl.formatMessage(messages.description)}`, margin: "normal", value: field.description, name: "description", onChange: handleChange, InputProps: {
-                                endAdornment: (_jsx(Typography, Object.assign({ variant: "body2" }, { children: ((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) ? GROUP_DESCRIPTION_MAX_LENGTH - field.description.length : GROUP_DESCRIPTION_MAX_LENGTH })))
-                            }, error: Boolean(((_d = field.description) === null || _d === void 0 ? void 0 : _d.length) > GROUP_DESCRIPTION_MAX_LENGTH), helperText: ((_e = field.description) === null || _e === void 0 ? void 0 : _e.length) > GROUP_DESCRIPTION_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.groupForm.description.error.maxLength", defaultMessage: "ui.groupForm.description.error.maxLength" })) : null }), privateEnabled && (_jsxs(Box, Object.assign({ className: classes.privacySection }, { children: [_jsx(Typography, Object.assign({ variant: "h4" }, { children: _jsx(FormattedMessage, { id: "ui.groupForm.privacy.title", defaultMessage: "ui.groupForm.privacy.title", values: {
+                                endAdornment: (_jsx(Typography, { variant: "body2", children: ((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) ? GROUP_DESCRIPTION_MAX_LENGTH - field.description.length : GROUP_DESCRIPTION_MAX_LENGTH }))
+                            }, error: Boolean(((_d = field.description) === null || _d === void 0 ? void 0 : _d.length) > GROUP_DESCRIPTION_MAX_LENGTH), helperText: ((_e = field.description) === null || _e === void 0 ? void 0 : _e.length) > GROUP_DESCRIPTION_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.groupForm.description.error.maxLength", defaultMessage: "ui.groupForm.description.error.maxLength" })) : null }), privateEnabled && (_jsxs(Box, { className: classes.privacySection, children: [_jsx(Typography, { variant: "h4", children: _jsx(FormattedMessage, { id: "ui.groupForm.privacy.title", defaultMessage: "ui.groupForm.privacy.title", values: {
                                             // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                                             // @ts-ignore
                                             b: (chunks) => _jsx("strong", { children: chunks })
-                                        } }) })), _jsxs(Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [_jsxs(Typography, Object.assign({ className: classNames(classes.switchLabel, { [classes.active]: !field.isPublic }) }, { children: [_jsx(Icon, { children: "private" }), _jsx(FormattedMessage, { id: "ui.groupForm.privacy.private", defaultMessage: "ui.groupForm.privacy.private" })] })), _jsx(Switch, { className: classes.switch, checked: field.isPublic, onChange: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['isPublic']: !field.isPublic }))), disabled: group && group.privacy === SCGroupPrivacyType.PRIVATE }), _jsxs(Typography, Object.assign({ className: classNames(classes.switchLabel, { [classes.active]: field.isPublic }) }, { children: [_jsx(Icon, { children: "public" }), _jsx(FormattedMessage, { id: "ui.groupForm.privacy.public", defaultMessage: "ui.groupForm.privacy.public" })] }))] })), _jsx(Typography, Object.assign({ variant: "body2", className: classes.privacySectionInfo }, { children: field.isPublic ? (_jsx(FormattedMessage, { id: "ui.groupForm.privacy.public.info", defaultMessage: "ui.groupForm.privacy.public.info", values: {
+                                        } }) }), _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsxs(Typography, { className: classNames(classes.switchLabel, { [classes.active]: !field.isPublic }), children: [_jsx(Icon, { children: "private" }), _jsx(FormattedMessage, { id: "ui.groupForm.privacy.private", defaultMessage: "ui.groupForm.privacy.private" })] }), _jsx(Switch, { className: classes.switch, checked: field.isPublic, onChange: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['isPublic']: !field.isPublic }))), disabled: group && group.privacy === SCGroupPrivacyType.PRIVATE }), _jsxs(Typography, { className: classNames(classes.switchLabel, { [classes.active]: field.isPublic }), children: [_jsx(Icon, { children: "public" }), _jsx(FormattedMessage, { id: "ui.groupForm.privacy.public", defaultMessage: "ui.groupForm.privacy.public" })] })] }), _jsx(Typography, { variant: "body2", className: classes.privacySectionInfo, children: field.isPublic ? (_jsx(FormattedMessage, { id: "ui.groupForm.privacy.public.info", defaultMessage: "ui.groupForm.privacy.public.info", values: {
                                             // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                                             // @ts-ignore
                                             b: (chunks) => _jsx("strong", { children: chunks })
@@ -241,11 +241,11 @@ export default function GroupForm(inProps) {
                                                 // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                                                 // @ts-ignore
                                                 b: (chunks) => _jsx("strong", { children: chunks })
-                                            } })) })) }))] }))), privateEnabled && visibilityEnabled && (_jsx(Box, Object.assign({ className: classes.visibilitySection }, { children: ((!field.isPublic && !group) || (group && !field.isPublic)) && (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ variant: "h4" }, { children: _jsx(FormattedMessage, { id: "ui.groupForm.visibility.title", defaultMessage: "ui.groupForm.visibility.title", values: {
+                                            } })) })) })] })), privateEnabled && visibilityEnabled && (_jsx(Box, { className: classes.visibilitySection, children: ((!field.isPublic && !group) || (group && !field.isPublic)) && (_jsxs(_Fragment, { children: [_jsx(Typography, { variant: "h4", children: _jsx(FormattedMessage, { id: "ui.groupForm.visibility.title", defaultMessage: "ui.groupForm.visibility.title", values: {
                                                 // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                                                 // @ts-ignore
                                                 b: (chunks) => _jsx("strong", { children: chunks })
-                                            } }) })), _jsxs(Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [_jsxs(Typography, Object.assign({ className: classNames(classes.switchLabel, { [classes.active]: !field.isVisible }) }, { children: [_jsx(Icon, { children: "visibility_off" }), _jsx(FormattedMessage, { id: "ui.groupForm.visibility.hidden", defaultMessage: "ui.groupForm.visibility.hidden" })] })), _jsx(Switch, { className: classes.switch, checked: field.isVisible, onChange: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['isVisible']: !field.isVisible }))) }), _jsxs(Typography, Object.assign({ className: classNames(classes.switchLabel, { [classes.active]: field.isVisible }) }, { children: [_jsx(Icon, { children: "visibility" }), _jsx(FormattedMessage, { id: "ui.groupForm.visibility.visible", defaultMessage: "ui.groupForm.visibility.visible" })] }))] })), _jsx(Typography, Object.assign({ variant: "body2", className: classes.visibilitySectionInfo }, { children: !field.isVisible ? (_jsx(FormattedMessage, { id: "ui.groupForm.visibility.hidden.info", defaultMessage: "ui.groupForm.visibility.hidden.info", values: {
+                                            } }) }), _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsxs(Typography, { className: classNames(classes.switchLabel, { [classes.active]: !field.isVisible }), children: [_jsx(Icon, { children: "visibility_off" }), _jsx(FormattedMessage, { id: "ui.groupForm.visibility.hidden", defaultMessage: "ui.groupForm.visibility.hidden" })] }), _jsx(Switch, { className: classes.switch, checked: field.isVisible, onChange: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['isVisible']: !field.isVisible }))) }), _jsxs(Typography, { className: classNames(classes.switchLabel, { [classes.active]: field.isVisible }), children: [_jsx(Icon, { children: "visibility" }), _jsx(FormattedMessage, { id: "ui.groupForm.visibility.visible", defaultMessage: "ui.groupForm.visibility.visible" })] })] }), _jsx(Typography, { variant: "body2", className: classes.visibilitySectionInfo, children: !field.isVisible ? (_jsx(FormattedMessage, { id: "ui.groupForm.visibility.hidden.info", defaultMessage: "ui.groupForm.visibility.hidden.info", values: {
                                                 // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                                                 // @ts-ignore
                                                 b: (chunks) => _jsx("strong", { children: chunks })
@@ -253,5 +253,5 @@ export default function GroupForm(inProps) {
                                                 // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                                                 // @ts-ignore
                                                 b: (chunks) => _jsx("strong", { children: chunks })
-                                            } })) }))] })) })))] })), !group && (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsx(Box, Object.assign({ className: classes.inviteSection }, { children: _jsx(GroupInviteButton, { handleInvitations: handleInviteSection }) }))] }))] }) })));
+                                            } })) })] })) }))] }), !group && (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsx(Box, { className: classes.inviteSection, children: _jsx(GroupInviteButton, { handleInvitations: handleInviteSection }) })] }))] }) })));
 }

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

@@ -3,6 +3,7 @@ import { ChangeGroupCoverProps } from '../ChangeGroupCover';
 import { ChangeGroupPictureProps } from '../ChangeGroupPicture';
 import { GroupMembersButtonProps } from '../GroupMembersButton';
 import { GroupSubscribeButtonProps } from '../GroupSubscribeButton';
+import { GroupActionsMenuProps } from '../GroupActionsMenu';
 export interface GroupHeaderProps {
     /**
      * Id of group object
@@ -44,6 +45,11 @@ export interface GroupHeaderProps {
      * @default {}
      */
     GroupMembersButtonProps?: GroupMembersButtonProps;
+    /**
+     * Props to spread event actions menu
+     * @default {}
+     */
+    GroupActionsProps?: Omit<GroupActionsMenuProps, 'group'>;
     /**
      * Any other properties
      */

package/lib/esm/components/GroupHeader/GroupHeader.js

@@ -2,7 +2,7 @@ import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { styled } from '@mui/material/styles';
-import { Avatar, Box, Icon, Paper, Typography } from '@mui/material';
+import { Avatar, Box, Icon, Paper, Typography, useMediaQuery, useTheme } from '@mui/material';
 import { SCGroupPrivacyType, SCGroupSubscriptionStatusType } from '@selfcommunity/types';
 import { SCPreferences, useSCFetchGroup, useSCPreferences, useSCUser } from '@selfcommunity/react-core';
 import GroupHeaderSkeleton from './Skeleton';
@@ -19,6 +19,7 @@ import GroupSubscribeButton from '../GroupSubscribeButton';
 import GroupInviteButton from '../GroupInviteButton';
 import { SCGroupEventType, SCTopicType } from '../../constants/PubSub';
 import PubSub from 'pubsub-js';
+import GroupActionsMenu from '../GroupActionsMenu';
 const classes = {
     root: `${PREFIX}-root`,
     cover: `${PREFIX}-cover`,
@@ -30,7 +31,8 @@ const classes = {
     visibility: `${PREFIX}-visibility`,
     visibilityItem: `${PREFIX}-visibility-item`,
     members: `${PREFIX}-members`,
-    membersCounter: `${PREFIX}-members-counter`
+    membersCounter: `${PREFIX}-members-counter`,
+    multiActions: `${PREFIX}-multi-actions`
 };
 const Root = styled(Box, {
     name: PREFIX,
@@ -74,7 +76,7 @@ export default function GroupHeader(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { id = null, className = null, group, groupId = null, ChangePictureProps = {}, ChangeCoverProps = {}, GroupSubscribeButtonProps = {}, GroupMembersButtonProps = {} } = props, rest = __rest(props, ["id", "className", "group", "groupId", "ChangePictureProps", "ChangeCoverProps", "GroupSubscribeButtonProps", "GroupMembersButtonProps"]);
+    const { id = null, className = null, group, groupId = null, ChangePictureProps = {}, ChangeCoverProps = {}, GroupSubscribeButtonProps = {}, GroupMembersButtonProps = {}, GroupActionsProps } = props, rest = __rest(props, ["id", "className", "group", "groupId", "ChangePictureProps", "ChangeCoverProps", "GroupSubscribeButtonProps", "GroupMembersButtonProps", "GroupActionsProps"]);
     // PREFERENCES
     const scPreferences = useSCPreferences();
     const visibilityEnabled = useMemo(() => scPreferences.preferences[SCPreferences.CONFIGURATIONS_GROUPS_VISIBILITY_ENABLED].value, [scPreferences.preferences]);
@@ -83,6 +85,8 @@ export default function GroupHeader(inProps) {
     const scUserContext = useSCUser();
     // HOOKS
     const { scGroup, setSCGroup } = useSCFetchGroup({ id: groupId, group });
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down('md'));
     // REFS
     const updatesSubscription = useRef(null);
     // CONST
@@ -145,7 +149,7 @@ export default function GroupHeader(inProps) {
     const _backgroundCover = Object.assign({}, (scGroup.emotional_image
         ? { background: `url('${scGroup.emotional_image}') center / cover` }
         : { background: `url('${scPreferences.preferences[SCPreferences.IMAGES_USER_DEFAULT_COVER].value}') center / cover` }));
-    return (_jsxs(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, rest, { children: [_jsxs(Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: [_jsx(Box, Object.assign({ className: classes.avatar }, { children: _jsx(Avatar, { children: _jsx("img", { alt: "group", src: scGroup.image_big ? scGroup.image_big : '' }) }) })), isGroupAdmin && (_jsxs(_Fragment, { children: [_jsx(ChangeGroupPicture, Object.assign({ groupId: scGroup.id, onChange: handleChangeAvatar, className: classes.changePicture }, ChangePictureProps)), _jsx("div", Object.assign({ className: classes.changeCover }, { children: _jsx(ChangeGroupCover, Object.assign({ groupId: scGroup.id, onChange: handleChangeCover }, ChangeCoverProps)) }))] }))] })), _jsxs(Box, Object.assign({ className: classes.info }, { children: [isGroupAdmin && _jsx(EditGroupButton, { group: scGroup, groupId: scGroup.id, onEditSuccess: (data) => setSCGroup(data) }), _jsx(Typography, Object.assign({ variant: "h5", className: classes.name }, { children: scGroup.name })), privateEnabled && (_jsxs(Box, Object.assign({ className: classes.visibility }, { children: [privateEnabled && (_jsx(_Fragment, { children: scGroup.privacy === SCGroupPrivacyType.PUBLIC ? (_jsxs(Typography, Object.assign({ className: classes.visibilityItem }, { children: [_jsx(Icon, { children: "public" }), _jsx(FormattedMessage, { id: "ui.groupHeader.visibility.public", defaultMessage: "ui.groupHeader.visibility.public" })] }))) : (_jsxs(Typography, Object.assign({ className: classes.visibilityItem }, { children: [_jsx(Icon, { children: "private" }), _jsx(FormattedMessage, { id: "ui.groupHeader.visibility.private", defaultMessage: "ui.groupHeader.visibility.private" })] }))) })), visibilityEnabled && (_jsxs(_Fragment, { children: [privateEnabled && _jsx(Bullet, {}), scGroup.visible ? (_jsxs(Typography, Object.assign({ className: classes.visibilityItem }, { children: [_jsx(Icon, { children: "visibility" }), _jsx(FormattedMessage, { id: "ui.groupHeader.visibility.visible", defaultMessage: "ui.groupHeader.visibility.visible" })] }))) : (_jsxs(Typography, Object.assign({ className: classes.visibilityItem }, { children: [_jsx(Icon, { children: "visibility_off" }), _jsx(FormattedMessage, { id: "ui.groupHeader.visibility.hidden", defaultMessage: "ui.groupHeader.visibility.hidden" })] })))] }))] }))), _jsx(_Fragment, { children: ((scGroup && scGroup.privacy === SCGroupPrivacyType.PUBLIC) ||
+    return (_jsxs(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, rest, { children: [_jsxs(Paper, { style: _backgroundCover, classes: { root: classes.cover }, children: [_jsx(Box, { className: classes.avatar, children: _jsx(Avatar, { children: _jsx("img", { alt: "group", src: scGroup.image_big ? scGroup.image_big : '' }) }) }), isGroupAdmin && (_jsxs(_Fragment, { children: [_jsx(ChangeGroupPicture, Object.assign({ groupId: scGroup.id, onChange: handleChangeAvatar, className: classes.changePicture }, ChangePictureProps)), _jsx("div", { className: classes.changeCover, children: _jsx(ChangeGroupCover, Object.assign({ groupId: scGroup.id, onChange: handleChangeCover }, ChangeCoverProps)) })] }))] }), _jsxs(Box, { className: classes.info, children: [isGroupAdmin && !isMobile && (_jsxs(Box, { className: classes.multiActions, children: [_jsx(EditGroupButton, { group: scGroup, groupId: scGroup.id, onEditSuccess: (data) => setSCGroup(data) }), _jsx(GroupActionsMenu, Object.assign({ group: scGroup, onEditSuccess: (data) => setSCGroup(data) }, GroupActionsProps))] })), _jsx(Typography, { variant: "h5", className: classes.name, children: scGroup.name }), privateEnabled && (_jsxs(Box, { className: classes.visibility, children: [privateEnabled && (_jsx(_Fragment, { children: scGroup.privacy === SCGroupPrivacyType.PUBLIC ? (_jsxs(Typography, { className: classes.visibilityItem, children: [_jsx(Icon, { children: "public" }), _jsx(FormattedMessage, { id: "ui.groupHeader.visibility.public", defaultMessage: "ui.groupHeader.visibility.public" })] })) : (_jsxs(Typography, { className: classes.visibilityItem, children: [_jsx(Icon, { children: "private" }), _jsx(FormattedMessage, { id: "ui.groupHeader.visibility.private", defaultMessage: "ui.groupHeader.visibility.private" })] })) })), visibilityEnabled && (_jsxs(_Fragment, { children: [privateEnabled && _jsx(Bullet, {}), scGroup.visible ? (_jsxs(Typography, { className: classes.visibilityItem, children: [_jsx(Icon, { children: "visibility" }), _jsx(FormattedMessage, { id: "ui.groupHeader.visibility.visible", defaultMessage: "ui.groupHeader.visibility.visible" })] })) : (_jsxs(Typography, { className: classes.visibilityItem, children: [_jsx(Icon, { children: "visibility_off" }), _jsx(FormattedMessage, { id: "ui.groupHeader.visibility.hidden", defaultMessage: "ui.groupHeader.visibility.hidden" })] }))] }))] })), _jsx(_Fragment, { children: ((scGroup && scGroup.privacy === SCGroupPrivacyType.PUBLIC) ||
                             scGroup.subscription_status === SCGroupSubscriptionStatusType.SUBSCRIBED ||
-                            isGroupAdmin) && (_jsxs(Box, Object.assign({ className: classes.members }, { children: [_jsx(Typography, Object.assign({ className: classes.membersCounter, component: "div" }, { children: _jsx(FormattedMessage, { id: "ui.groupHeader.members", defaultMessage: "ui.groupHeader.members", values: { total: scGroup.subscribers_counter } }) })), _jsx(GroupMembersButton, Object.assign({ groupId: scGroup === null || scGroup === void 0 ? void 0 : scGroup.id, group: scGroup, autoHide: !isGroupAdmin }, GroupMembersButtonProps), scGroup.subscribers_counter)] }))) }), isGroupAdmin ? (_jsx(GroupInviteButton, { group: scGroup, groupId: scGroup.id })) : (_jsx(GroupSubscribeButton, Object.assign({ group: scGroup, onSubscribe: handleSubscribe }, GroupSubscribeButtonProps)))] }))] })));
+                            isGroupAdmin) && (_jsxs(Box, { className: classes.members, children: [_jsx(Typography, { className: classes.membersCounter, component: "div", children: _jsx(FormattedMessage, { id: "ui.groupHeader.members", defaultMessage: "ui.groupHeader.members", values: { total: scGroup.subscribers_counter } }) }), _jsx(GroupMembersButton, Object.assign({ groupId: scGroup === null || scGroup === void 0 ? void 0 : scGroup.id, group: scGroup, autoHide: !isGroupAdmin }, GroupMembersButtonProps), scGroup.subscribers_counter)] })) }), isGroupAdmin ? (_jsxs(Box, { children: [_jsx(GroupInviteButton, { group: scGroup, groupId: scGroup.id }), isMobile && _jsx(GroupActionsMenu, Object.assign({ group: scGroup, onEditSuccess: (data) => setSCGroup(data) }, GroupActionsProps))] })) : (_jsx(GroupSubscribeButton, Object.assign({ group: scGroup, onSubscribe: handleSubscribe }, GroupSubscribeButtonProps)))] })] })));
 }

package/lib/esm/components/GroupHeader/Skeleton.js

@@ -38,6 +38,6 @@ const Root = styled(Box, {
  */
 function GroupHeaderSkeleton() {
     const theme = useTheme();
-    return (_jsxs(Root, Object.assign({ className: classes.root }, { children: [_jsx(Skeleton, { className: classes.cover, animation: "wave", variant: "rectangular" }), _jsx(Box, Object.assign({ className: classes.avatar }, { children: _jsx(Skeleton, { animation: "wave", variant: "circular", width: theme.selfcommunity.group.avatar.sizeLarge, height: theme.selfcommunity.group.avatar.sizeLarge }) })), _jsxs(Box, Object.assign({ className: classes.info }, { children: [_jsx(Typography, Object.assign({ variant: "h5" }, { children: _jsx(Skeleton, { animation: "wave", sx: { height: 30, width: 200 } }) })), _jsx(Typography, { children: _jsx(Skeleton, { animation: "wave", sx: { height: 20, width: 150 } }) }), _jsx(Typography, { children: _jsx(Skeleton, { animation: "wave", sx: { height: 20, width: 100 } }) })] }))] })));
+    return (_jsxs(Root, { className: classes.root, children: [_jsx(Skeleton, { className: classes.cover, animation: "wave", variant: "rectangular" }), _jsx(Box, { className: classes.avatar, children: _jsx(Skeleton, { animation: "wave", variant: "circular", width: theme.selfcommunity.group.avatar.sizeLarge, height: theme.selfcommunity.group.avatar.sizeLarge }) }), _jsxs(Box, { className: classes.info, children: [_jsx(Typography, { variant: "h5", children: _jsx(Skeleton, { animation: "wave", sx: { height: 30, width: 200 } }) }), _jsx(Typography, { children: _jsx(Skeleton, { animation: "wave", sx: { height: 20, width: 150 } }) }), _jsx(Typography, { children: _jsx(Skeleton, { animation: "wave", sx: { height: 20, width: 100 } }) })] })] }));
 }
 export default GroupHeaderSkeleton;

package/lib/esm/components/GroupInfoWidget/GroupInfoWidget.js

@@ -103,25 +103,25 @@ export default function GroupInfoWidget(inProps) {
     /**
      * Renders root object
      */
-    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsxs(CardContent, { children: [_jsx(Typography, Object.assign({ variant: "h4", className: classes.title }, { children: _jsx(FormattedMessage, { id: "ui.groupInfoWidget.title", defaultMessage: "ui.groupInfoWidget.title" }) })), _jsx(Typography, Object.assign({ variant: "body1", className: classes.description }, { children: scGroup.description })), privateEnabled && (_jsx(Typography, Object.assign({ component: "div", className: classes.privacy }, { children: scGroup.privacy === SCGroupPrivacyType.PUBLIC ? (_jsxs(_Fragment, { children: [_jsxs(Typography, Object.assign({ className: classes.privacyTitle }, { children: [_jsx(Icon, { children: "public" }), _jsx(FormattedMessage, { id: "ui.groupInfoWidget.privacy.public", defaultMessage: "ui.groupInfoWidget.privacy.public" })] })), _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.groupInfoWidget.privacy.public.info", defaultMessage: "ui.groupInfoWidget.privacy.public.info", values: {
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsxs(CardContent, { children: [_jsx(Typography, { variant: "h4", className: classes.title, children: _jsx(FormattedMessage, { id: "ui.groupInfoWidget.title", defaultMessage: "ui.groupInfoWidget.title" }) }), _jsx(Typography, { variant: "body1", className: classes.description, children: scGroup.description }), privateEnabled && (_jsx(Typography, { component: "div", className: classes.privacy, children: scGroup.privacy === SCGroupPrivacyType.PUBLIC ? (_jsxs(_Fragment, { children: [_jsxs(Typography, { className: classes.privacyTitle, children: [_jsx(Icon, { children: "public" }), _jsx(FormattedMessage, { id: "ui.groupInfoWidget.privacy.public", defaultMessage: "ui.groupInfoWidget.privacy.public" })] }), _jsx(Typography, { variant: "body2", children: _jsx(FormattedMessage, { id: "ui.groupInfoWidget.privacy.public.info", defaultMessage: "ui.groupInfoWidget.privacy.public.info", values: {
                                         // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                                         // @ts-ignore
                                         b: (chunks) => _jsx("strong", { children: chunks })
-                                    } }) }))] })) : (_jsxs(_Fragment, { children: [_jsxs(Typography, Object.assign({ className: classes.privacyTitle }, { children: [_jsx(Icon, { children: "private" }), _jsx(FormattedMessage, { id: "ui.groupInfoWidget.privacy.private", defaultMessage: "ui.groupInfoWidget.privacy.private" })] })), _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.groupInfoWidget.privacy.private.info", defaultMessage: "ui.groupInfoWidget.private.public.info", values: {
+                                    } }) })] })) : (_jsxs(_Fragment, { children: [_jsxs(Typography, { className: classes.privacyTitle, children: [_jsx(Icon, { children: "private" }), _jsx(FormattedMessage, { id: "ui.groupInfoWidget.privacy.private", defaultMessage: "ui.groupInfoWidget.privacy.private" })] }), _jsx(Typography, { variant: "body2", children: _jsx(FormattedMessage, { id: "ui.groupInfoWidget.privacy.private.info", defaultMessage: "ui.groupInfoWidget.private.public.info", values: {
                                         // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                                         // @ts-ignore
                                         b: (chunks) => _jsx("strong", { children: chunks })
-                                    } }) }))] })) }))), privateEnabled && visibilityEnabled && (_jsx(_Fragment, { children: scGroup.privacy === SCGroupPrivacyType.PRIVATE && (_jsx(Typography, Object.assign({ component: "div", className: classes.visibility }, { children: scGroup.visible ? (_jsxs(_Fragment, { children: [_jsxs(Typography, Object.assign({ className: classes.visibilityTitle }, { children: [_jsx(Icon, { children: "visibility" }), _jsx(FormattedMessage, { id: "ui.groupForm.visibility.visible", defaultMessage: "ui.groupForm.visibility.visible" })] })), _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.groupForm.visibility.visible.info", defaultMessage: "ui.groupForm.visibility.visible.info", values: {
+                                    } }) })] })) })), privateEnabled && visibilityEnabled && (_jsx(_Fragment, { children: scGroup.privacy === SCGroupPrivacyType.PRIVATE && (_jsx(Typography, { component: "div", className: classes.visibility, children: scGroup.visible ? (_jsxs(_Fragment, { children: [_jsxs(Typography, { className: classes.visibilityTitle, children: [_jsx(Icon, { children: "visibility" }), _jsx(FormattedMessage, { id: "ui.groupForm.visibility.visible", defaultMessage: "ui.groupForm.visibility.visible" })] }), _jsx(Typography, { variant: "body2", children: _jsx(FormattedMessage, { id: "ui.groupForm.visibility.visible.info", defaultMessage: "ui.groupForm.visibility.visible.info", values: {
                                             // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                                             // @ts-ignore
                                             b: (chunks) => _jsx("strong", { children: chunks })
-                                        } }) }))] })) : (_jsxs(_Fragment, { children: [_jsxs(Typography, Object.assign({ className: classes.visibilityTitle }, { children: [_jsx(Icon, { children: "visibility_off" }), _jsx(FormattedMessage, { id: "ui.groupForm.visibility.hidden", defaultMessage: "ui.groupForm.visibility.hidden" })] })), _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.groupForm.visibility.hidden.info", defaultMessage: "ui.groupForm.visibility.hidden.info", values: {
+                                        } }) })] })) : (_jsxs(_Fragment, { children: [_jsxs(Typography, { className: classes.visibilityTitle, children: [_jsx(Icon, { children: "visibility_off" }), _jsx(FormattedMessage, { id: "ui.groupForm.visibility.hidden", defaultMessage: "ui.groupForm.visibility.hidden" })] }), _jsx(Typography, { variant: "body2", children: _jsx(FormattedMessage, { id: "ui.groupForm.visibility.hidden.info", defaultMessage: "ui.groupForm.visibility.hidden.info", values: {
                                             // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                                             // @ts-ignore
                                             b: (chunks) => _jsx("strong", { children: chunks })
-                                        } }) }))] })) }))) })), _jsx(Typography, Object.assign({ variant: "body2", className: classes.date }, { children: _jsx(FormattedMessage, { id: "ui.groupInfoWidget.date", defaultMessage: "ui.groupInfoWidget.date", values: { date: intl.formatDate(scGroup.created_at, { day: 'numeric', year: 'numeric', month: 'long' }) } }) })), _jsxs(Typography, Object.assign({ component: "div", className: classes.admin }, { children: [_jsx(FormattedMessage, { id: "ui.groupInfoWidget.admin", defaultMessage: "ui.groupInfoWidget.admin", values: {
+                                        } }) })] })) })) })), _jsx(Typography, { variant: "body2", className: classes.date, children: _jsx(FormattedMessage, { id: "ui.groupInfoWidget.date", defaultMessage: "ui.groupInfoWidget.date", values: { date: intl.formatDate(scGroup.created_at, { day: 'numeric', year: 'numeric', month: 'long' }) } }) }), _jsxs(Typography, { component: "div", className: classes.admin, children: [_jsx(FormattedMessage, { id: "ui.groupInfoWidget.admin", defaultMessage: "ui.groupInfoWidget.admin", values: {
                                 // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                                 // @ts-ignore
                                 b: (chunks) => _jsx("strong", { children: chunks })
-                            } }), _jsx(User, { userId: (_a = scGroup === null || scGroup === void 0 ? void 0 : scGroup.managed_by) === null || _a === void 0 ? void 0 : _a.id, elevation: 0, actions: _jsx(_Fragment, {}) })] }))] }) })));
+                            } }), _jsx(User, { userId: (_a = scGroup === null || scGroup === void 0 ? void 0 : scGroup.managed_by) === null || _a === void 0 ? void 0 : _a.id, elevation: 0, actions: _jsx(_Fragment, {}) })] })] }) })));
 }

package/lib/esm/components/GroupInviteButton/GroupInviteButton.js

@@ -255,7 +255,7 @@ export default function GroupInviteButton(inProps) {
     /**
      * Renders root object
      */
-    return (_jsxs(React.Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className), onClick: handleClose, variant: scGroup ? 'contained' : 'outlined', color: scGroup ? 'secondary' : 'inherit', startIcon: _jsx(Icon, { children: "add" }) }, rest, { children: _jsx(FormattedMessage, { id: "ui.groupInviteButton", defaultMessage: "ui.groupInviteButton" }) })), open && (_jsx(DialogRoot, Object.assign({ DialogContentProps: { dividers: false }, open: true, className: classes.dialogRoot, title: _jsxs(_Fragment, { children: [_jsx(IconButton, Object.assign({ onClick: handleClose }, { children: _jsx(Icon, { children: "arrow_back" }) })), _jsx(Typography, Object.assign({ className: classes.dialogTitle }, { children: _jsx(FormattedMessage, { id: "ui.groupInviteButton.dialog.title", defaultMessage: "ui.groupInviteButton.dialog.title" }) })), _jsx(LoadingButton, Object.assign({ size: "small", color: "secondary", variant: "contained", onClick: handleSendInvitations, loading: isSending, disabled: !invited.length }, { children: _jsx(FormattedMessage, { id: "ui.groupInviteButton.dialog.button.end", defaultMessage: "ui.groupInviteButton.dialog.button.end" }) }))] }) }, { children: _jsxs(Box, Object.assign({ className: classes.dialogContent }, { children: [_jsx(Autocomplete, { className: classes.autocomplete, loading: loading, size: "small", multiple: true, freeSolo: true, disableClearable: true, options: suggested, onChange: handleChange, onInputChange: handleInputChange, inputValue: value, filterOptions: filterOptions, value: invited, getOptionLabel: (option) => (option ? option.username : '...'), isOptionEqualToValue: (option, value) => (option ? value.id === option.id : false), renderTags: () => null, renderOption: (props, option) => (_jsxs(Box, Object.assign({ component: "li" }, props, { children: [_jsx(Avatar, { alt: option.username, src: option.avatar }), _jsx(Typography, Object.assign({ ml: 1 }, { children: option.username }))] }))), renderInput: (params) => (_jsx(TextField, Object.assign({}, params, { variant: "outlined", placeholder: `${intl.formatMessage(messages.placeholder)}`, InputProps: Object.assign(Object.assign({}, params.InputProps), { className: classes.input, startAdornment: (_jsxs(_Fragment, { children: [_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(Icon, Object.assign({ className: classes.icon }, { children: "search" })) })), params.InputProps.startAdornment] })) }) }))) }), _jsx(Box, Object.assign({ className: classes.invitedBox }, { children: invited.map((option, index) => (_jsx(Chip, { avatar: _jsx(Avatar, { alt: option.username, src: option.avatar }), label: option.username, onDelete: () => {
+    return (_jsxs(React.Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className), onClick: handleClose, variant: scGroup ? 'contained' : 'outlined', color: scGroup ? 'secondary' : 'inherit', startIcon: _jsx(Icon, { children: "add" }) }, rest, { children: _jsx(FormattedMessage, { id: "ui.groupInviteButton", defaultMessage: "ui.groupInviteButton" }) })), open && (_jsx(DialogRoot, { DialogContentProps: { dividers: false }, open: true, className: classes.dialogRoot, title: _jsxs(_Fragment, { children: [_jsx(IconButton, { onClick: handleClose, children: _jsx(Icon, { children: "arrow_back" }) }), _jsx(Typography, { className: classes.dialogTitle, children: _jsx(FormattedMessage, { id: "ui.groupInviteButton.dialog.title", defaultMessage: "ui.groupInviteButton.dialog.title" }) }), _jsx(LoadingButton, { size: "small", color: "secondary", variant: "contained", onClick: handleSendInvitations, loading: isSending, disabled: !invited.length, children: _jsx(FormattedMessage, { id: "ui.groupInviteButton.dialog.button.end", defaultMessage: "ui.groupInviteButton.dialog.button.end" }) })] }), children: _jsxs(Box, { className: classes.dialogContent, children: [_jsx(Autocomplete, { className: classes.autocomplete, loading: loading, size: "small", multiple: true, freeSolo: true, disableClearable: true, options: suggested, onChange: handleChange, onInputChange: handleInputChange, inputValue: value, filterOptions: filterOptions, value: invited, getOptionLabel: (option) => (option ? option.username : '...'), isOptionEqualToValue: (option, value) => (option ? value.id === option.id : false), renderTags: () => null, renderOption: (props, option) => (_jsxs(Box, Object.assign({ component: "li" }, props, { children: [_jsx(Avatar, { alt: option.username, src: option.avatar }), _jsx(Typography, { ml: 1, children: option.username })] }))), renderInput: (params) => (_jsx(TextField, Object.assign({}, params, { variant: "outlined", placeholder: `${intl.formatMessage(messages.placeholder)}`, InputProps: Object.assign(Object.assign({}, params.InputProps), { className: classes.input, startAdornment: (_jsxs(_Fragment, { children: [_jsx(InputAdornment, { position: "start", children: _jsx(Icon, { className: classes.icon, children: "search" }) }), params.InputProps.startAdornment] })) }) }))) }), _jsx(Box, { className: classes.invitedBox, children: invited.map((option, index) => (_jsx(Chip, { avatar: _jsx(Avatar, { alt: option.username, src: option.avatar }), label: option.username, onDelete: () => {
                                     handleDelete(option);
-                                }, style: { marginRight: 8 } }, index))) })), _jsxs(Box, Object.assign({ className: classes.suggested }, { children: [list.length !== 0 && (_jsx(Typography, Object.assign({ variant: "h4", fontWeight: "bold" }, { children: _jsx(FormattedMessage, { id: "ui.groupInviteButton.dialog.content.list", defaultMessage: "ui.groupInviteButton.dialog.content.list" }) }))), list.slice(0, 5).map((user, index) => (_jsx(User, { elevation: 0, actions: _jsx(_Fragment, {}), user: user, userId: user.id, buttonProps: { onClick: () => handleUserInvite(user) } }, index)))] }))] })) })))] }));
+                                }, style: { marginRight: 8 } }, index))) }), _jsxs(Box, { className: classes.suggested, children: [list.length !== 0 && (_jsx(Typography, { variant: "h4", fontWeight: "bold", children: _jsx(FormattedMessage, { id: "ui.groupInviteButton.dialog.content.list", defaultMessage: "ui.groupInviteButton.dialog.content.list" }) })), list.slice(0, 5).map((user, index) => (_jsx(User, { elevation: 0, actions: _jsx(_Fragment, {}), user: user, userId: user.id, buttonProps: { onClick: () => handleUserInvite(user) } }, index)))] })] }) }))] }));
 }

package/lib/esm/components/GroupInvitedWidget/GroupInvitedWidget.js

@@ -199,6 +199,6 @@ export default function GroupInvitedWidget(inProps) {
     if (!state.initialized) {
         return _jsx(Skeleton, {});
     }
-    const content = (_jsxs(CardContent, { children: [_jsx(Typography, Object.assign({ className: classes.title, variant: "h5" }, { children: _jsx(FormattedMessage, { id: "ui.groupInvitedWidget.title", defaultMessage: "ui.groupInvitedWidget.title" }) })), _jsxs(React.Fragment, { children: [_jsx(List, { children: state.results.slice(0, state.visibleItems).map((user) => (_jsx(ListItem, { children: _jsx(User, { elevation: 0, actions: _jsx(Button, Object.assign({ disabled: true, size: "small" }, { children: _jsx(FormattedMessage, { id: "ui.groupInvitedWidget.status", defaultMessage: "ui.groupInvitedWidget.status" }) })), user: user, userId: user.id }) }, user.id))) }), state.count > state.visibleItems && (_jsx(Button, Object.assign({ className: classes.showMore, onClick: handleToggleDialogOpen }, { children: _jsx(FormattedMessage, { id: "ui.groupInvitedWidget.button.showMore", defaultMessage: "ui.groupInvitedWidget.button.showMore" }) })))] }), openDialog && (_jsx(DialogRoot, Object.assign({ className: classes.dialogRoot, title: _jsx(FormattedMessage, { defaultMessage: "ui.groupInvitedWidget.dialogTitle", id: "ui.groupInvitedWidget.dialogTitle", values: { total: (_b = state === null || state === void 0 ? void 0 : state.results) === null || _b === void 0 ? void 0 : _b.length } }), onClose: handleToggleDialogOpen, open: openDialog }, DialogProps, { children: _jsx(InfiniteScroll, Object.assign({ dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: _jsx(UserSkeleton, Object.assign({ elevation: 0 }, UserProps)), height: isMobile ? '100%' : 400, endMessage: _jsx(Typography, Object.assign({ className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.groupInvitedWidget.noMoreResults", defaultMessage: "ui.groupInvitedWidget.noMoreResults" }) })) }, { children: _jsx(List, { children: state.results.map((user) => (_jsx(ListItem, { children: _jsx(User, { elevation: 0, actions: _jsx(Button, Object.assign({ disabled: true, size: "small" }, { children: _jsx(FormattedMessage, { id: "ui.groupInvitedWidget.status", defaultMessage: "ui.groupInvitedWidget.status" }) })), user: user, userId: user.id }) }, user.id))) }) })) })))] }));
+    const content = (_jsxs(CardContent, { children: [_jsx(Typography, { className: classes.title, variant: "h5", children: _jsx(FormattedMessage, { id: "ui.groupInvitedWidget.title", defaultMessage: "ui.groupInvitedWidget.title" }) }), _jsxs(React.Fragment, { children: [_jsx(List, { children: state.results.slice(0, state.visibleItems).map((user) => (_jsx(ListItem, { children: _jsx(User, { elevation: 0, actions: _jsx(Button, { disabled: true, size: "small", children: _jsx(FormattedMessage, { id: "ui.groupInvitedWidget.status", defaultMessage: "ui.groupInvitedWidget.status" }) }), user: user, userId: user.id }) }, user.id))) }), state.count > state.visibleItems && (_jsx(Button, { className: classes.showMore, onClick: handleToggleDialogOpen, children: _jsx(FormattedMessage, { id: "ui.groupInvitedWidget.button.showMore", defaultMessage: "ui.groupInvitedWidget.button.showMore" }) }))] }), openDialog && (_jsx(DialogRoot, Object.assign({ className: classes.dialogRoot, title: _jsx(FormattedMessage, { defaultMessage: "ui.groupInvitedWidget.dialogTitle", id: "ui.groupInvitedWidget.dialogTitle", values: { total: (_b = state === null || state === void 0 ? void 0 : state.results) === null || _b === void 0 ? void 0 : _b.length } }), onClose: handleToggleDialogOpen, open: openDialog }, DialogProps, { children: _jsx(InfiniteScroll, { dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: _jsx(UserSkeleton, Object.assign({ elevation: 0 }, UserProps)), height: isMobile ? '100%' : 400, endMessage: _jsx(Typography, { className: classes.endMessage, children: _jsx(FormattedMessage, { id: "ui.groupInvitedWidget.noMoreResults", defaultMessage: "ui.groupInvitedWidget.noMoreResults" }) }), children: _jsx(List, { children: state.results.map((user) => (_jsx(ListItem, { children: _jsx(User, { elevation: 0, actions: _jsx(Button, { disabled: true, size: "small", children: _jsx(FormattedMessage, { id: "ui.groupInvitedWidget.status", defaultMessage: "ui.groupInvitedWidget.status" }) }), user: user, userId: user.id }) }, user.id))) }) }) })))] }));
     return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: content })));
 }

package/lib/esm/components/GroupMembersButton/GroupMembersButton.js

@@ -128,5 +128,5 @@ export default function GroupMembersButton(inProps) {
     // RENDER
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down('md'));
-    return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className), onClick: handleToggleDialogOpen, disabled: loading || !scGroup || scGroup.subscribers_counter === 0 }, rest, { children: loading || !scGroup ? (_jsx(AvatarGroupSkeleton, Object.assign({}, rest))) : (_jsx(AvatarGroup, Object.assign({ total: scGroup.subscribers_counter }, { children: members.map((c) => (_jsx(Avatar, { alt: c.username, src: c.avatar }, c.id))) }))) })), open && (_jsx(DialogRoot, Object.assign({ className: classes.dialogRoot, title: _jsx(FormattedMessage, { defaultMessage: "ui.groupMembersButton.dialogTitle", id: "ui.groupMembersButton.dialogTitle", values: { total: scGroup.subscribers_counter } }), onClose: handleToggleDialogOpen, open: open }, DialogProps, { children: _jsx(InfiniteScroll, Object.assign({ dataLength: members.length, next: fetchMembers, hasMoreNext: next !== null || loading, loaderNext: _jsx(UserSkeleton, { elevation: 0 }), height: isMobile ? '100%' : 400, endMessage: _jsx(Typography, Object.assign({ className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.groupMembersButton.noOtherMembers", defaultMessage: "ui.groupMembersButton.noOtherMembers" }) })) }, { children: _jsx(List, { children: members.map((member) => (_jsx(ListItem, { children: _jsx(User, { elevation: 0, user: member, onClick: handleToggleDialogOpen }) }, member.id))) }) })) })))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className), onClick: handleToggleDialogOpen, disabled: loading || !scGroup || scGroup.subscribers_counter === 0 }, rest, { children: loading || !scGroup ? (_jsx(AvatarGroupSkeleton, Object.assign({}, rest))) : (_jsx(AvatarGroup, { total: scGroup.subscribers_counter, children: members.map((c) => (_jsx(Avatar, { alt: c.username, src: c.avatar }, c.id))) })) })), open && (_jsx(DialogRoot, Object.assign({ className: classes.dialogRoot, title: _jsx(FormattedMessage, { defaultMessage: "ui.groupMembersButton.dialogTitle", id: "ui.groupMembersButton.dialogTitle", values: { total: scGroup.subscribers_counter } }), onClose: handleToggleDialogOpen, open: open }, DialogProps, { children: _jsx(InfiniteScroll, { dataLength: members.length, next: fetchMembers, hasMoreNext: next !== null || loading, loaderNext: _jsx(UserSkeleton, { elevation: 0 }), height: isMobile ? '100%' : 400, endMessage: _jsx(Typography, { className: classes.endMessage, children: _jsx(FormattedMessage, { id: "ui.groupMembersButton.noOtherMembers", defaultMessage: "ui.groupMembersButton.noOtherMembers" }) }), children: _jsx(List, { children: members.map((member) => (_jsx(ListItem, { children: _jsx(User, { elevation: 0, user: member, onClick: handleToggleDialogOpen }) }, member.id))) }) }) })))] }));
 }

package/lib/esm/components/GroupMembersWidget/GroupMembersWidget.js

@@ -189,12 +189,12 @@ export default function GroupMembersWidget(inProps) {
     if (!state.initialized) {
         return _jsx(Skeleton, {});
     }
-    const content = (_jsxs(_Fragment, { children: [_jsxs(CardContent, { children: [_jsx(Typography, Object.assign({ className: classes.title, variant: "h5" }, { children: _jsx(FormattedMessage, { id: "ui.groupMembersWidget.title", defaultMessage: "ui.groupMembersWidget.title" }) })), !state.count ? (_jsx(Typography, Object.assign({ className: classes.noResults, variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.groupMembersWidget.subtitle.noResults", defaultMessage: "" }) }))) : (_jsxs(React.Fragment, { children: [_jsx(List, { children: state.results.slice(0, state.visibleItems).map((user) => {
+    const content = (_jsxs(_Fragment, { children: [_jsxs(CardContent, { children: [_jsx(Typography, { className: classes.title, variant: "h5", children: _jsx(FormattedMessage, { id: "ui.groupMembersWidget.title", defaultMessage: "ui.groupMembersWidget.title" }) }), !state.count ? (_jsx(Typography, { className: classes.noResults, variant: "body2", children: _jsx(FormattedMessage, { id: "ui.groupMembersWidget.subtitle.noResults", defaultMessage: "" }) })) : (_jsxs(React.Fragment, { children: [_jsx(List, { children: state.results.slice(0, state.visibleItems).map((user) => {
                                     var _a, _b;
-                                    return (_jsx(ListItem, { children: _jsx(User, { elevation: 0, actions: isGroupAdmin ? (_jsx(GroupSettingsIconButton, { group: scGroup, user: user, onRemoveSuccess: () => handleRefresh(user.id) })) : ((_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.id) !== user.id ? (_jsx(Button, Object.assign({ size: "small", variant: "outlined", component: Link, to: scRoutingContext.url(SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, user) }, { children: _jsx(FormattedMessage, { id: "ui.groupSettingsIconButton.item.message", defaultMessage: "ui.groupSettingsIconButton.item.message" }) }))) : null, isGroupAdmin: ((_b = scGroup === null || scGroup === void 0 ? void 0 : scGroup.managed_by) === null || _b === void 0 ? void 0 : _b.id) === user.id, user: user, userId: user.id }) }, user.id));
-                                }) }), state.count > state.visibleItems && (_jsx(Button, Object.assign({ className: classes.showMore, onClick: handleToggleDialogOpen }, { children: _jsx(FormattedMessage, { id: "ui.groupMembersWidget.button.showMore", defaultMessage: "ui.groupMembersWidget.button.showMore" }) })))] })), openDialog && (_jsx(DialogRoot, Object.assign({ className: classes.dialogRoot, title: _jsx(FormattedMessage, { defaultMessage: "ui.groupMembersWidget.dialogTitle", id: "ui.groupMembersWidget.dialogTitle", values: { total: scGroup.subscribers_counter } }), onClose: handleToggleDialogOpen, open: openDialog }, DialogProps, { children: _jsx(InfiniteScroll, Object.assign({ dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: _jsx(UserSkeleton, Object.assign({ elevation: 0 }, UserProps)), height: isMobile ? '100%' : 400, endMessage: _jsx(Typography, Object.assign({ className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.groupMembersWidget.noMoreResults", defaultMessage: "ui.groupMembersWidget.noMoreResults" }) })) }, { children: _jsx(List, { children: state.results.map((user) => {
+                                    return (_jsx(ListItem, { children: _jsx(User, { elevation: 0, actions: isGroupAdmin ? (_jsx(GroupSettingsIconButton, { group: scGroup, user: user, onRemoveSuccess: () => handleRefresh(user.id) })) : ((_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.id) !== user.id ? (_jsx(Button, { size: "small", variant: "outlined", component: Link, to: scRoutingContext.url(SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, user), children: _jsx(FormattedMessage, { id: "ui.groupSettingsIconButton.item.message", defaultMessage: "ui.groupSettingsIconButton.item.message" }) })) : null, isGroupAdmin: ((_b = scGroup === null || scGroup === void 0 ? void 0 : scGroup.managed_by) === null || _b === void 0 ? void 0 : _b.id) === user.id, user: user, userId: user.id }) }, user.id));
+                                }) }), state.count > state.visibleItems && (_jsx(Button, { className: classes.showMore, onClick: handleToggleDialogOpen, children: _jsx(FormattedMessage, { id: "ui.groupMembersWidget.button.showMore", defaultMessage: "ui.groupMembersWidget.button.showMore" }) }))] })), openDialog && (_jsx(DialogRoot, Object.assign({ className: classes.dialogRoot, title: _jsx(FormattedMessage, { defaultMessage: "ui.groupMembersWidget.dialogTitle", id: "ui.groupMembersWidget.dialogTitle", values: { total: scGroup.subscribers_counter } }), onClose: handleToggleDialogOpen, open: openDialog }, DialogProps, { children: _jsx(InfiniteScroll, { dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: _jsx(UserSkeleton, Object.assign({ elevation: 0 }, UserProps)), height: isMobile ? '100%' : 400, endMessage: _jsx(Typography, { className: classes.endMessage, children: _jsx(FormattedMessage, { id: "ui.groupMembersWidget.noMoreResults", defaultMessage: "ui.groupMembersWidget.noMoreResults" }) }), children: _jsx(List, { children: state.results.map((user) => {
                                     var _a, _b;
-                                    return (_jsx(ListItem, { children: _jsx(User, { elevation: 0, actions: isGroupAdmin ? (_jsx(GroupSettingsIconButton, { group: scGroup, user: user, onRemoveSuccess: () => handleRefresh(user.id) })) : ((_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.id) !== user.id ? (_jsx(Button, Object.assign({ size: "small", variant: "outlined", component: Link, to: scRoutingContext.url(SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, user) }, { children: _jsx(FormattedMessage, { id: "ui.groupSettingsIconButton.item.message", defaultMessage: "ui.groupSettingsIconButton.item.message" }) }))) : null, isGroupAdmin: ((_b = scGroup === null || scGroup === void 0 ? void 0 : scGroup.managed_by) === null || _b === void 0 ? void 0 : _b.id) === user.id, user: user, userId: user.id }) }, user.id));
-                                }) }) })) })))] }), _jsx(CardActions, Object.assign({ className: classes.actions }, { children: _jsx(GroupInviteButton, { groupId: scGroup === null || scGroup === void 0 ? void 0 : scGroup.id, group: scGroup }) }))] }));
+                                    return (_jsx(ListItem, { children: _jsx(User, { elevation: 0, actions: isGroupAdmin ? (_jsx(GroupSettingsIconButton, { group: scGroup, user: user, onRemoveSuccess: () => handleRefresh(user.id) })) : ((_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.id) !== user.id ? (_jsx(Button, { size: "small", variant: "outlined", component: Link, to: scRoutingContext.url(SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, user), children: _jsx(FormattedMessage, { id: "ui.groupSettingsIconButton.item.message", defaultMessage: "ui.groupSettingsIconButton.item.message" }) })) : null, isGroupAdmin: ((_b = scGroup === null || scGroup === void 0 ? void 0 : scGroup.managed_by) === null || _b === void 0 ? void 0 : _b.id) === user.id, user: user, userId: user.id }) }, user.id));
+                                }) }) }) })))] }), _jsx(CardActions, { className: classes.actions, children: _jsx(GroupInviteButton, { groupId: scGroup === null || scGroup === void 0 ? void 0 : scGroup.id, group: scGroup }) })] }));
     return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: content })));
 }

package/lib/esm/components/GroupRequestsWidget/GroupRequestsWidget.js

@@ -185,6 +185,6 @@ export default function GroupRequestsWidget(inProps) {
     if (!state.initialized) {
         return _jsx(Skeleton, {});
     }
-    const content = (_jsxs(CardContent, { children: [_jsx(Typography, Object.assign({ className: classes.title, variant: "h5" }, { children: _jsx(FormattedMessage, { id: "ui.groupRequestsWidget.title", defaultMessage: "ui.groupRequestsWidget.title" }) })), _jsxs(React.Fragment, { children: [_jsx(List, { children: state.results.slice(0, state.visibleItems).map((user) => (_jsx(ListItem, { children: _jsx(User, { elevation: 0, actions: _jsx(GroupSubscribeButton, Object.assign({ group: scGroup, groupId: scGroup === null || scGroup === void 0 ? void 0 : scGroup.id, user: user, onSubscribe: () => handleSubscribeAction(user) }, GroupSubscribeButtonProps)), user: user, userId: user.id }) }, user.id))) }), state.count > state.visibleItems && (_jsx(Button, Object.assign({ className: classes.showMore, onClick: handleToggleDialogOpen }, { children: _jsx(FormattedMessage, { id: "ui.groupRequestsWidget.button.showMore", defaultMessage: "ui.groupRequestsWidget.button.showMore" }) })))] }), openDialog && (_jsx(DialogRoot, Object.assign({ className: classes.dialogRoot, title: _jsx(FormattedMessage, { defaultMessage: "ui.groupRequestsWidget.dialogTitle", id: "ui.groupRequestsWidget.dialogTitle", values: { total: scGroup.subscribers_counter } }), onClose: handleToggleDialogOpen, open: openDialog }, DialogProps, { children: _jsx(InfiniteScroll, Object.assign({ dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: _jsx(UserSkeleton, Object.assign({ elevation: 0 }, UserProps)), height: isMobile ? '100%' : 400, endMessage: _jsx(Typography, Object.assign({ className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.groupRequestsWidget.noMoreResults", defaultMessage: "ui.groupRequestsWidget.noMoreResults" }) })) }, { children: _jsx(List, { children: state.results.map((user) => (_jsx(ListItem, { children: _jsx(User, { elevation: 0, actions: _jsx(GroupSubscribeButton, Object.assign({ group: scGroup, groupId: scGroup === null || scGroup === void 0 ? void 0 : scGroup.id, user: user, onSubscribe: () => handleSubscribeAction(user) }, GroupSubscribeButtonProps)), user: user, userId: user.id }) }, user.id))) }) })) })))] }));
+    const content = (_jsxs(CardContent, { children: [_jsx(Typography, { className: classes.title, variant: "h5", children: _jsx(FormattedMessage, { id: "ui.groupRequestsWidget.title", defaultMessage: "ui.groupRequestsWidget.title" }) }), _jsxs(React.Fragment, { children: [_jsx(List, { children: state.results.slice(0, state.visibleItems).map((user) => (_jsx(ListItem, { children: _jsx(User, { elevation: 0, actions: _jsx(GroupSubscribeButton, Object.assign({ group: scGroup, groupId: scGroup === null || scGroup === void 0 ? void 0 : scGroup.id, user: user, onSubscribe: () => handleSubscribeAction(user) }, GroupSubscribeButtonProps)), user: user, userId: user.id }) }, user.id))) }), state.count > state.visibleItems && (_jsx(Button, { className: classes.showMore, onClick: handleToggleDialogOpen, children: _jsx(FormattedMessage, { id: "ui.groupRequestsWidget.button.showMore", defaultMessage: "ui.groupRequestsWidget.button.showMore" }) }))] }), openDialog && (_jsx(DialogRoot, Object.assign({ className: classes.dialogRoot, title: _jsx(FormattedMessage, { defaultMessage: "ui.groupRequestsWidget.dialogTitle", id: "ui.groupRequestsWidget.dialogTitle", values: { total: scGroup.subscribers_counter } }), onClose: handleToggleDialogOpen, open: openDialog }, DialogProps, { children: _jsx(InfiniteScroll, { dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: _jsx(UserSkeleton, Object.assign({ elevation: 0 }, UserProps)), height: isMobile ? '100%' : 400, endMessage: _jsx(Typography, { className: classes.endMessage, children: _jsx(FormattedMessage, { id: "ui.groupRequestsWidget.noMoreResults", defaultMessage: "ui.groupRequestsWidget.noMoreResults" }) }), children: _jsx(List, { children: state.results.map((user) => (_jsx(ListItem, { children: _jsx(User, { elevation: 0, actions: _jsx(GroupSubscribeButton, Object.assign({ group: scGroup, groupId: scGroup === null || scGroup === void 0 ? void 0 : scGroup.id, user: user, onSubscribe: () => handleSubscribeAction(user) }, GroupSubscribeButtonProps)), user: user, userId: user.id }) }, user.id))) }) }) })))] }));
     return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: content })));
 }

package/lib/esm/components/GroupSettingsIconButton/GroupSettingsIconButton.js

@@ -120,18 +120,18 @@ export default function GroupSettingsIconButton(inProps) {
     const renderList = () => {
         if (isMobile) {
             return [
-                _jsx(ListItem, Object.assign({ className: classes.item, component: Link, to: scRoutingContext.url(SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, user) }, { children: _jsx(FormattedMessage, { id: "ui.groupSettingsIconButton.item.message", defaultMessage: "ui.groupSettingsIconButton.item.message" }) }), "message"),
-                _jsx(ListItem, Object.assign({ className: classes.item, onClick: handleOpenDialog }, { children: _jsx(FormattedMessage, { id: "ui.groupSettingsIconButton.item.remove", defaultMessage: "ui.groupSettingsIconButton.item.remove" }) }), "delete")
+                _jsx(ListItem, { className: classes.item, component: Link, to: scRoutingContext.url(SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, user), children: _jsx(FormattedMessage, { id: "ui.groupSettingsIconButton.item.message", defaultMessage: "ui.groupSettingsIconButton.item.message" }) }, "message"),
+                _jsx(ListItem, { className: classes.item, onClick: handleOpenDialog, children: _jsx(FormattedMessage, { id: "ui.groupSettingsIconButton.item.remove", defaultMessage: "ui.groupSettingsIconButton.item.remove" }) }, "delete")
             ];
         }
         else {
             return [
-                _jsx(MenuItem, Object.assign({ className: classes.item, component: Link, to: scRoutingContext.url(SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, user) }, { children: _jsx(FormattedMessage, { id: "ui.groupSettingsIconButton.item.message", defaultMessage: "ui.groupSettingsIconButton.item.message" }) }), "message"),
-                _jsx(MenuItem, Object.assign({ className: classes.item, onClick: handleOpenDialog }, { children: _jsx(FormattedMessage, { id: "ui.groupSettingsIconButton.item.remove", defaultMessage: "ui.groupSettingsIconButton.item.remove" }) }), "delete")
+                _jsx(MenuItem, { className: classes.item, component: Link, to: scRoutingContext.url(SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, user), children: _jsx(FormattedMessage, { id: "ui.groupSettingsIconButton.item.message", defaultMessage: "ui.groupSettingsIconButton.item.message" }) }, "message"),
+                _jsx(MenuItem, { className: classes.item, onClick: handleOpenDialog, children: _jsx(FormattedMessage, { id: "ui.groupSettingsIconButton.item.remove", defaultMessage: "ui.groupSettingsIconButton.item.remove" }) }, "delete")
             ];
         }
     };
-    return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { onClick: handleOpen }, { children: _jsx(Icon, { children: "more_vert" }) })), isMobile ? (_jsx(SwipeableDrawerRoot, Object.assign({ className: classes.drawerRoot, anchor: "bottom", open: Boolean(anchorEl), onClose: handleClose, onOpen: handleOpen, PaperProps: { className: classes.paper }, disableSwipeToOpen: true }, { children: _jsx(List, { children: renderList() }) }))) : (_jsx(MenuRoot, Object.assign({ className: classes.menuRoot, anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose, PaperProps: { className: classes.paper } }, { children: renderList() }))), openConfirmDialog && (_jsx(ConfirmDialog, { open: openConfirmDialog, title: _jsx(FormattedMessage, { id: "ui.groupSettingsIconButton.dialog.msg", defaultMessage: "ui.groupSettingsIconButton.dialog.msg", values: {
+    return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { onClick: handleOpen, children: _jsx(Icon, { children: "more_vert" }) })), isMobile ? (_jsx(SwipeableDrawerRoot, { className: classes.drawerRoot, anchor: "bottom", open: Boolean(anchorEl), onClose: handleClose, onOpen: handleOpen, PaperProps: { className: classes.paper }, disableSwipeToOpen: true, children: _jsx(List, { children: renderList() }) })) : (_jsx(MenuRoot, { className: classes.menuRoot, anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose, PaperProps: { className: classes.paper }, children: renderList() })), openConfirmDialog && (_jsx(ConfirmDialog, { open: openConfirmDialog, title: _jsx(FormattedMessage, { id: "ui.groupSettingsIconButton.dialog.msg", defaultMessage: "ui.groupSettingsIconButton.dialog.msg", values: {
                         // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                         // @ts-ignore
                         b: (...chunks) => _jsx("strong", { children: chunks }),

package/lib/esm/components/Groups/Groups.js

@@ -1,6 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { Box, Button, Grid, TextField, Typography, useMediaQuery, useTheme } from '@mui/material';
 import { Endpoints, GroupService, http } from '@selfcommunity/api-services';
@@ -16,6 +16,8 @@ import { PREFIX } from './constants';
 import Group, { GroupSkeleton } from '../Group';
 import { DEFAULT_PAGINATION_OFFSET } from '../../constants/Pagination';
 import InfiniteScroll from '../../shared/InfiniteScroll';
+import PubSub from 'pubsub-js';
+import { SCGroupEventType, SCTopicType } from '../../constants/PubSub';
 const classes = {
     root: `${PREFIX}-root`,
     filters: `${PREFIX}-filter`,
@@ -83,6 +85,8 @@ export default function Groups(inProps) {
         scPreferencesContext.preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY].value, [scPreferencesContext.preferences]);
     // CONST
     const authUserId = scUserContext.user ? scUserContext.user.id : null;
+    // REFS
+    const updatesSubscription = useRef(null);
     // HANDLERS
     const handleScrollUp = () => {
         window.scrollTo({ left: 0, top: 0, behavior: 'smooth' });
@@ -119,6 +123,28 @@ export default function Groups(inProps) {
             fetchGroups();
         }
     }, [contentAvailability, authUserId, search]);
+    /**
+     * Subscriber for pubsub callback
+     */
+    const onDeleteGroupHandler = useCallback((_msg, deleted) => {
+        setGroups((prev) => {
+            if (prev.some((e) => e.id === deleted)) {
+                return prev.filter((e) => e.id !== deleted);
+            }
+            return prev;
+        });
+    }, [groups]);
+    /**
+     * On mount, subscribe to receive event updates (only delete)
+     */
+    useEffect(() => {
+        if (groups) {
+            updatesSubscription.current = PubSub.subscribe(`${SCTopicType.GROUP}.${SCGroupEventType.DELETE}`, onDeleteGroupHandler);
+        }
+        return () => {
+            updatesSubscription.current && PubSub.unsubscribe(updatesSubscription.current);
+        };
+    }, [groups]);
     const handleNext = useMemo(() => () => {
         if (!next) {
             return;
@@ -155,11 +181,11 @@ export default function Groups(inProps) {
      * Renders groups list
      */
     const filteredGroups = sortByAttr(getFilteredGroups(), 'order');
-    const content = (_jsxs(_Fragment, { children: [showFilters && groups.length !== 0 && (_jsx(Grid, Object.assign({ container: true, direction: "row", justifyContent: "center", alignItems: "center", className: classes.filters }, { children: filters ? (filters) : (_jsx(Grid, Object.assign({ item: true, xs: 12, md: 6 }, { children: _jsx(TextField, { fullWidth: true, value: search, label: _jsx(FormattedMessage, { id: "ui.groups.filterByName", defaultMessage: "ui.groups.filterByName" }), variant: "outlined", onChange: handleOnChangeFilterName, disabled: loading }) }))) }))), _jsx(_Fragment, { children: !groups.length ? (_jsx(Box, Object.assign({ className: classes.noResults }, { children: !onlyStaffEnabled ? (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ variant: "h4" }, { children: _jsx(FormattedMessage, { id: "ui.groups.noGroups.title", defaultMessage: "ui.groups.noGroups.title" }) })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.groups.noGroups.subtitle", defaultMessage: "ui.groups.noGroups.subtitle" }) }))] })) : (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ variant: "h4" }, { children: _jsx(FormattedMessage, { id: "ui.groups.noGroups.title.onlyStaff", defaultMessage: "ui.groups.noGroups.title.onlyStaff" }) })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.groups.noGroups.subtitle.onlyStaff", defaultMessage: "ui.groups.noGroups.subtitle.onlyStaff" }) }))] })) }))) : (_jsx(InfiniteScroll, Object.assign({ dataLength: groups.length, next: handleNext, hasMoreNext: Boolean(next), loaderNext: isMobile ? _jsx(GroupSkeleton, {}) : _jsx(Skeleton, { groupsNumber: 2 }), endMessage: _jsx(Typography, Object.assign({ component: "div", className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.groups.endMessage", defaultMessage: "ui.groups.endMessage", values: {
+    const content = (_jsxs(_Fragment, { children: [showFilters && groups.length !== 0 && (_jsx(Grid, { container: true, direction: "row", justifyContent: "center", alignItems: "center", className: classes.filters, children: filters ? (filters) : (_jsx(Grid, { item: true, xs: 12, md: 6, children: _jsx(TextField, { fullWidth: true, value: search, label: _jsx(FormattedMessage, { id: "ui.groups.filterByName", defaultMessage: "ui.groups.filterByName" }), variant: "outlined", onChange: handleOnChangeFilterName, disabled: loading }) })) })), _jsx(_Fragment, { children: !groups.length ? (_jsx(Box, { className: classes.noResults, children: !onlyStaffEnabled ? (_jsxs(_Fragment, { children: [_jsx(Typography, { variant: "h4", children: _jsx(FormattedMessage, { id: "ui.groups.noGroups.title", defaultMessage: "ui.groups.noGroups.title" }) }), _jsx(Typography, { variant: "body1", children: _jsx(FormattedMessage, { id: "ui.groups.noGroups.subtitle", defaultMessage: "ui.groups.noGroups.subtitle" }) })] })) : (_jsxs(_Fragment, { children: [_jsx(Typography, { variant: "h4", children: _jsx(FormattedMessage, { id: "ui.groups.noGroups.title.onlyStaff", defaultMessage: "ui.groups.noGroups.title.onlyStaff" }) }), _jsx(Typography, { variant: "body1", children: _jsx(FormattedMessage, { id: "ui.groups.noGroups.subtitle.onlyStaff", defaultMessage: "ui.groups.noGroups.subtitle.onlyStaff" }) })] })) })) : (_jsx(InfiniteScroll, { dataLength: groups.length, next: handleNext, hasMoreNext: Boolean(next), loaderNext: isMobile ? _jsx(GroupSkeleton, {}) : _jsx(Skeleton, { groupsNumber: 2 }), endMessage: _jsx(Typography, { component: "div", className: classes.endMessage, children: _jsx(FormattedMessage, { id: "ui.groups.endMessage", defaultMessage: "ui.groups.endMessage", values: {
                                 // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                                 // @ts-ignore
-                                button: (chunk) => (_jsx(Button, Object.assign({ color: "secondary", variant: "text", onClick: handleScrollUp }, { children: chunk })))
-                            } }) })) }, { children: _jsx(Grid, Object.assign({ container: true, spacing: { xs: 2 }, className: classes.groups }, { children: filteredGroups.map((group) => (_jsx(Grid, Object.assign({ item: true, xs: 12, sm: 8, md: 6, className: classes.item }, { children: _jsx(Group, Object.assign({ group: group, groupId: group.id, actionRedirect: true }, GroupComponentProps)) }), group.id))) })) }))) })] }));
+                                button: (chunk) => (_jsx(Button, { color: "secondary", variant: "text", onClick: handleScrollUp, children: chunk }))
+                            } }) }), children: _jsx(Grid, { container: true, spacing: { xs: 2 }, className: classes.groups, children: filteredGroups.map((group) => (_jsx(Grid, { item: true, xs: 12, sm: 8, md: 6, className: classes.item, children: _jsx(Group, Object.assign({ group: group, groupId: group.id, actionRedirect: true }, GroupComponentProps)) }, group.id))) }) })) })] }));
     // RENDER
     if (!contentAvailability && !scUserContext.user) {
         return _jsx(HiddenPlaceholder, {});

package/lib/esm/components/Groups/Skeleton.js

@@ -36,5 +36,5 @@ const Root = styled(Box, {
  */
 export default function GroupsSkeleton(inProps) {
     const { className, GroupSkeletonProps = {}, groupsNumber = 20 } = inProps, rest = __rest(inProps, ["className", "GroupSkeletonProps", "groupsNumber"]);
-    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsx(Grid, Object.assign({ container: true, spacing: { xs: 3 }, className: classes.groups }, { children: [...Array(groupsNumber)].map((category, index) => (_jsx(Grid, Object.assign({ item: true, xs: 12, sm: 8, md: 6 }, { children: _jsx(GroupSkeleton, Object.assign({ elevation: 0, variant: 'outlined' }, GroupSkeletonProps)) }), index))) })) })));
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsx(Grid, { container: true, spacing: { xs: 3 }, className: classes.groups, children: [...Array(groupsNumber)].map((category, index) => (_jsx(Grid, { item: true, xs: 12, sm: 8, md: 6, children: _jsx(GroupSkeleton, Object.assign({ elevation: 0, variant: 'outlined' }, GroupSkeletonProps)) }, index))) }) })));
 }

package/lib/esm/components/Incubator/Incubator.js

@@ -27,7 +27,7 @@ const Root = styled(Widget, {
 })(() => ({}));
 function LinearProgressWithLabel(_a) {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsxs(Box, Object.assign({ className: className }, { children: [_jsx(LinearProgress, Object.assign({ variant: "determinate" }, props)), _jsx(Box, Object.assign({ sx: { position: 'absolute', top: '3px', left: props.value + 2 + '%', transform: 'translateX(-50%)' } }, { children: props.subscribers !== 0 && (_jsx(Typography, Object.assign({ variant: "body2", color: "text.secondary" }, { children: props.subscribers }))) })), _jsxs(Grid, Object.assign({ container: true, spacing: 2, className: className }, { children: [_jsx(Grid, Object.assign({ item: true, xs: true }, { children: _jsx(Typography, { children: _jsx(FormattedMessage, { defaultMessage: "ui.incubator.progressBar.proposal", id: "ui.incubator.progressBar.proposal" }) }) })), _jsx(Grid, Object.assign({ item: true, xs: true }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.incubator.progressBar.collectingSubscribers", id: "ui.incubator.progressBar.collectingSubscribers" }) })), _jsx(Grid, Object.assign({ item: true, xs: true }, { children: _jsx(Typography, Object.assign({ align: "right" }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.incubator.progressBar.approved", id: "ui.incubator.progressBar.approved" }) })) }))] }))] })));
+    return (_jsxs(Box, { className: className, children: [_jsx(LinearProgress, Object.assign({ variant: "determinate" }, props)), _jsx(Box, { sx: { position: 'absolute', top: '3px', left: props.value + 2 + '%', transform: 'translateX(-50%)' }, children: props.subscribers !== 0 && (_jsx(Typography, { variant: "body2", color: "text.secondary", children: props.subscribers })) }), _jsxs(Grid, { container: true, spacing: 2, className: className, children: [_jsx(Grid, { item: true, xs: true, children: _jsx(Typography, { children: _jsx(FormattedMessage, { defaultMessage: "ui.incubator.progressBar.proposal", id: "ui.incubator.progressBar.proposal" }) }) }), _jsx(Grid, { item: true, xs: true, children: _jsx(FormattedMessage, { defaultMessage: "ui.incubator.progressBar.collectingSubscribers", id: "ui.incubator.progressBar.collectingSubscribers" }) }), _jsx(Grid, { item: true, xs: true, children: _jsx(Typography, { align: "right", children: _jsx(FormattedMessage, { defaultMessage: "ui.incubator.progressBar.approved", id: "ui.incubator.progressBar.approved" }) }) })] })] }));
 }
 /**
  * > API documentation for the Community-JS Incubator component. Learn about the available props and the CSS API.
@@ -87,7 +87,7 @@ export default function Incubator(inProps) {
     if (autoHide) {
         return _jsx(HiddenPlaceholder, {});
     }
-    return (_jsxs(_Fragment, { children: [_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsxs(CardContent, { children: [_jsx(Button, Object.assign({ variant: "text", className: classes.name }, ButtonProps, { children: scIncubator.name })), _jsx(Typography, Object.assign({ component: 'span' }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.incubator.proposedBy", id: "ui.incubator.proposedBy", values: {
-                                        username: (_jsx(Link, Object.assign({}, (!scIncubator.user.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, scIncubator.user) }), { onClick: scIncubator.user.deleted ? () => setOpenAlert(true) : null }, { children: scIncubator.user.username })))
-                                    } }) })), _jsx(Typography, Object.assign({ component: 'p', className: !detailView ? classes.slogan : null }, { children: scIncubator.slogan })), _jsx(LinearProgressWithLabel, { className: classes.progressBar, value: renderVotes(scIncubator.subscribers_count, scIncubator.subscribers_threshold), subscribers: scIncubator.subscribers_count })] }), _jsx(CardActions, { children: _jsx(IncubatorSubscribeButton, Object.assign({ incubator: scIncubator }, subscribeButtonProps)) })] })), openAlert && _jsx(UserDeletedSnackBar, { open: openAlert, handleClose: () => setOpenAlert(false) })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsxs(CardContent, { children: [_jsx(Button, Object.assign({ variant: "text", className: classes.name }, ButtonProps, { children: scIncubator.name })), _jsx(Typography, { component: 'span', children: _jsx(FormattedMessage, { defaultMessage: "ui.incubator.proposedBy", id: "ui.incubator.proposedBy", values: {
+                                        username: (_jsx(Link, Object.assign({}, (!scIncubator.user.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, scIncubator.user) }), { onClick: scIncubator.user.deleted ? () => setOpenAlert(true) : null, children: scIncubator.user.username })))
+                                    } }) }), _jsx(Typography, { component: 'p', className: !detailView ? classes.slogan : null, children: scIncubator.slogan }), _jsx(LinearProgressWithLabel, { className: classes.progressBar, value: renderVotes(scIncubator.subscribers_count, scIncubator.subscribers_threshold), subscribers: scIncubator.subscribers_count })] }), _jsx(CardActions, { children: _jsx(IncubatorSubscribeButton, Object.assign({ incubator: scIncubator }, subscribeButtonProps)) })] })), openAlert && _jsx(UserDeletedSnackBar, { open: openAlert, handleClose: () => setOpenAlert(false) })] }));
 }

package/lib/esm/components/Incubator/Skeleton.js

@@ -40,5 +40,5 @@ const Root = styled(Widget, {
  *
  */
 export default function IncubatorSkeleton(props) {
-    return (_jsxs(Root, Object.assign({ className: classes.root }, props, { children: [_jsxs(CardContent, { children: [_jsx(Typography, Object.assign({ className: classes.primary }, { children: _jsx(Skeleton, { animation: "wave", height: 20, width: "40%", variant: "text" }) })), _jsxs(Typography, Object.assign({ className: classes.secondary }, { children: [_jsx(Skeleton, { animation: "wave", height: 10, width: "50%", variant: "text" }), _jsx(Skeleton, { animation: "wave", height: 10, width: "80%", variant: "text" })] })), _jsxs(Grid, Object.assign({ container: true, spacing: 1, className: classes.progressBar }, { children: [_jsx(Grid, Object.assign({ item: true, xs: 12, md: 12 }, { children: _jsx(Skeleton, { animation: "wave", height: 20, width: "100%", variant: "rectangular" }) })), _jsx(Grid, Object.assign({ item: true, xs: true }, { children: _jsx(Skeleton, { animation: "wave", height: 10, width: "100%", variant: "text" }) })), _jsx(Grid, Object.assign({ item: true, xs: true }, { children: _jsx(Skeleton, { animation: "wave", height: 10, width: "100%", variant: "text" }) })), _jsx(Grid, Object.assign({ item: true, xs: true }, { children: _jsx(Skeleton, { animation: "wave", height: 10, width: "100%", variant: "text" }) }))] }))] }), _jsx(CardActions, Object.assign({ className: classes.action }, { children: _jsx(Button, Object.assign({ disabled: true, variant: 'outlined', size: 'small' }, { children: _jsx(Skeleton, { animation: "wave", height: 20, width: 50, variant: "text" }) })) }))] })));
+    return (_jsxs(Root, Object.assign({ className: classes.root }, props, { children: [_jsxs(CardContent, { children: [_jsx(Typography, { className: classes.primary, children: _jsx(Skeleton, { animation: "wave", height: 20, width: "40%", variant: "text" }) }), _jsxs(Typography, { className: classes.secondary, children: [_jsx(Skeleton, { animation: "wave", height: 10, width: "50%", variant: "text" }), _jsx(Skeleton, { animation: "wave", height: 10, width: "80%", variant: "text" })] }), _jsxs(Grid, { container: true, spacing: 1, className: classes.progressBar, children: [_jsx(Grid, { item: true, xs: 12, md: 12, children: _jsx(Skeleton, { animation: "wave", height: 20, width: "100%", variant: "rectangular" }) }), _jsx(Grid, { item: true, xs: true, children: _jsx(Skeleton, { animation: "wave", height: 10, width: "100%", variant: "text" }) }), _jsx(Grid, { item: true, xs: true, children: _jsx(Skeleton, { animation: "wave", height: 10, width: "100%", variant: "text" }) }), _jsx(Grid, { item: true, xs: true, children: _jsx(Skeleton, { animation: "wave", height: 10, width: "100%", variant: "text" }) })] })] }), _jsx(CardActions, { className: classes.action, children: _jsx(Button, { disabled: true, variant: 'outlined', size: 'small', children: _jsx(Skeleton, { animation: "wave", height: 20, width: 50, variant: "text" }) }) })] })));
 }

package/lib/esm/components/IncubatorDetail/IncubatorDetail.js

@@ -235,6 +235,6 @@ export default function IncubatorDetail(inProps) {
     /**
      * Renders root element
      */
-    return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ title: _jsxs(_Fragment, { children: [_jsx(Avatar, { className: classes.avatar, alt: scIncubator.user.avatar, src: scIncubator.user.avatar }), _jsxs(Box, { children: [_jsxs(Typography, Object.assign({ className: classes.title }, { children: [`${intl.formatMessage(messages.intro, { name: scIncubator.name })}`, " "] })), _jsx(Typography, Object.assign({ component: 'span' }, { children: _jsxs(Link, Object.assign({}, (!scIncubator.user.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, scIncubator.user) }), { onClick: scIncubator.user.deleted ? () => setOpenAlert(true) : null }, { children: ["@", scIncubator.user.username] })) }))] })] }), open: open, onClose: onClose, className: classNames(classes.root, className) }, rest, { children: _jsxs(Box, { children: [_jsx(Incubator, Object.assign({ elevation: 0, incubator: scIncubator, detailView: true, subscribeButtonProps: { onSubscribe: handleUpdates } }, IncubatorProps)), _jsx(Box, Object.assign({ className: classes.subscribers }, { children: loading && !scIncubator ? (_jsx(AvatarGroupSkeleton, Object.assign({}, rest))) : (_jsx(_Fragment, { children: total > 0 ? (_jsx(Button, Object.assign({ onClick: handleToggleSubscribersDialog, disabled: loading || !scIncubator }, { children: _jsxs(AvatarGroup, Object.assign({}, rest, { children: [subscribers.map((u) => (_jsx(Avatar, { alt: u.username, src: u.avatar }, u.id))), [...Array(Math.max(0, total - subscribers.length))].map((x, i // Add max to 0 to prevent creation of array with negative index during state update
-                                            ) => (_jsx(Avatar, {}, i)))] })) }))) : null })) })), openSubscribersDialog && (_jsx(BaseDialog, Object.assign({ title: _jsxs(_Fragment, { children: [_jsx(FormattedMessage, { defaultMessage: "ui.incubatorDetail.subscribersSection.title", id: "ui.incubatorDetail.subscribersSection.title" }), " (", total, ")"] }), onClose: handleToggleSubscribersDialog, open: openSubscribersDialog }, { children: loading ? (_jsx(CentralProgress, { size: 50 })) : (_jsx(InfiniteScroll, Object.assign({ dataLength: total, next: fetchSubscribers, hasMoreNext: next !== null, loaderNext: _jsx(CentralProgress, { size: 30 }), height: 400, endMessage: _jsx(Typography, Object.assign({ variant: "body2", align: "center", fontWeight: "bold" }, { children: _jsx(FormattedMessage, { id: "ui.incubatorDetail.subscribersSection.noMoreSubscribers", defaultMessage: "ui.incubatorDetail.subscribersSection.noMoreSubscribers" }) })) }, { children: _jsx(List, { children: subscribers.map((s, index) => (_jsx(ListItem, { children: _jsx(User, { elevation: 0, user: s }, index) }, (s.id, index)))) }) }))) }))), _jsx(Widget, Object.assign({ elevation: 1, className: classes.shareCard }, { children: _jsxs(CardContent, { children: [_jsx(Typography, Object.assign({ variant: 'h6' }, { children: _jsx(FormattedMessage, { id: "ui.incubatorDetail.shareSection.title", defaultMessage: "ui.incubatorDetail.shareSection.title" }) })), _jsx(Typography, Object.assign({ variant: 'subtitle1' }, { children: _jsx(FormattedMessage, { id: "ui.incubatorDetail.shareSection.share", defaultMessage: "ui.incubatorDetail.shareSection.share" }) })), _jsxs(FormGroup, Object.assign({ className: classes.copyUrlForm }, { children: [_jsx(TextField, { className: classes.copyText, variant: "outlined", value: portal }), _jsx(Button, Object.assign({ className: classes.copyButton, variant: "contained", onClick: copy }, { children: _jsx(FormattedMessage, { id: "ui.incubatorDetail.shareSection.button.copy", defaultMessage: "ui.incubatorDetail.shareSection.button.copy" }) }))] })), alert && (_jsx(Alert, Object.assign({ onClose: () => setAlert(false) }, { children: _jsx(FormattedMessage, { id: "ui.incubatorDetail.shareSection.copied", defaultMessage: "ui.incubatorDetail.shareSection.copied" }) }))), isSocialShareEnabled && (_jsx(Typography, Object.assign({ variant: 'subtitle2' }, { children: _jsx(FormattedMessage, { id: "ui.incubatorDetail.shareSection.invite", defaultMessage: "ui.incubatorDetail.shareSection.invite" }) }))), _jsxs(Box, Object.assign({ className: classes.shareSection }, { children: [facebookShareEnabled && (_jsx(Icon, Object.assign({ classes: { root: classes.shareMenuIcon }, fontSize: "small", onClick: () => window.open(FACEBOOK_SHARE + portal, 'facebook-share-dialog', 'width=626,height=436') }, { children: "facebook" }))), xShareEnabled && (_jsx(Icon, Object.assign({ classes: { root: classes.shareMenuIcon }, fontSize: "small", onClick: () => window.open(X_SHARE + portal, 'x-share-dialog', 'width=626,height=436') }, { children: "x" }))), linkedinShareEnabled && (_jsx(Icon, Object.assign({ classes: { root: classes.shareMenuIcon }, fontSize: "small", onClick: () => window.open(LINKEDIN_SHARE + portal, 'linkedin-share-dialog', 'width=626,height=436') }, { children: "linkedin" })))] }))] }) }))] }) })), openAlert && _jsx(UserDeletedSnackBar, { open: openAlert, handleClose: () => setOpenAlert(false) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ title: _jsxs(_Fragment, { children: [_jsx(Avatar, { className: classes.avatar, alt: scIncubator.user.avatar, src: scIncubator.user.avatar }), _jsxs(Box, { children: [_jsxs(Typography, { className: classes.title, children: [`${intl.formatMessage(messages.intro, { name: scIncubator.name })}`, " "] }), _jsx(Typography, { component: 'span', children: _jsxs(Link, Object.assign({}, (!scIncubator.user.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, scIncubator.user) }), { onClick: scIncubator.user.deleted ? () => setOpenAlert(true) : null, children: ["@", scIncubator.user.username] })) })] })] }), open: open, onClose: onClose, className: classNames(classes.root, className) }, rest, { children: _jsxs(Box, { children: [_jsx(Incubator, Object.assign({ elevation: 0, incubator: scIncubator, detailView: true, subscribeButtonProps: { onSubscribe: handleUpdates } }, IncubatorProps)), _jsx(Box, { className: classes.subscribers, children: loading && !scIncubator ? (_jsx(AvatarGroupSkeleton, Object.assign({}, rest))) : (_jsx(_Fragment, { children: total > 0 ? (_jsx(Button, { onClick: handleToggleSubscribersDialog, disabled: loading || !scIncubator, children: _jsxs(AvatarGroup, Object.assign({}, rest, { children: [subscribers.map((u) => (_jsx(Avatar, { alt: u.username, src: u.avatar }, u.id))), [...Array(Math.max(0, total - subscribers.length))].map((x, i // Add max to 0 to prevent creation of array with negative index during state update
+                                            ) => (_jsx(Avatar, {}, i)))] })) })) : null })) }), openSubscribersDialog && (_jsx(BaseDialog, { title: _jsxs(_Fragment, { children: [_jsx(FormattedMessage, { defaultMessage: "ui.incubatorDetail.subscribersSection.title", id: "ui.incubatorDetail.subscribersSection.title" }), " (", total, ")"] }), onClose: handleToggleSubscribersDialog, open: openSubscribersDialog, children: loading ? (_jsx(CentralProgress, { size: 50 })) : (_jsx(InfiniteScroll, { dataLength: total, next: fetchSubscribers, hasMoreNext: next !== null, loaderNext: _jsx(CentralProgress, { size: 30 }), height: 400, endMessage: _jsx(Typography, { variant: "body2", align: "center", fontWeight: "bold", children: _jsx(FormattedMessage, { id: "ui.incubatorDetail.subscribersSection.noMoreSubscribers", defaultMessage: "ui.incubatorDetail.subscribersSection.noMoreSubscribers" }) }), children: _jsx(List, { children: subscribers.map((s, index) => (_jsx(ListItem, { children: _jsx(User, { elevation: 0, user: s }, index) }, (s.id, index)))) }) })) })), _jsx(Widget, { elevation: 1, className: classes.shareCard, children: _jsxs(CardContent, { children: [_jsx(Typography, { variant: 'h6', children: _jsx(FormattedMessage, { id: "ui.incubatorDetail.shareSection.title", defaultMessage: "ui.incubatorDetail.shareSection.title" }) }), _jsx(Typography, { variant: 'subtitle1', children: _jsx(FormattedMessage, { id: "ui.incubatorDetail.shareSection.share", defaultMessage: "ui.incubatorDetail.shareSection.share" }) }), _jsxs(FormGroup, { className: classes.copyUrlForm, children: [_jsx(TextField, { className: classes.copyText, variant: "outlined", value: portal }), _jsx(Button, { className: classes.copyButton, variant: "contained", onClick: copy, children: _jsx(FormattedMessage, { id: "ui.incubatorDetail.shareSection.button.copy", defaultMessage: "ui.incubatorDetail.shareSection.button.copy" }) })] }), alert && (_jsx(Alert, { onClose: () => setAlert(false), children: _jsx(FormattedMessage, { id: "ui.incubatorDetail.shareSection.copied", defaultMessage: "ui.incubatorDetail.shareSection.copied" }) })), isSocialShareEnabled && (_jsx(Typography, { variant: 'subtitle2', children: _jsx(FormattedMessage, { id: "ui.incubatorDetail.shareSection.invite", defaultMessage: "ui.incubatorDetail.shareSection.invite" }) })), _jsxs(Box, { className: classes.shareSection, children: [facebookShareEnabled && (_jsx(Icon, { classes: { root: classes.shareMenuIcon }, fontSize: "small", onClick: () => window.open(FACEBOOK_SHARE + portal, 'facebook-share-dialog', 'width=626,height=436'), children: "facebook" })), xShareEnabled && (_jsx(Icon, { classes: { root: classes.shareMenuIcon }, fontSize: "small", onClick: () => window.open(X_SHARE + portal, 'x-share-dialog', 'width=626,height=436'), children: "x" })), linkedinShareEnabled && (_jsx(Icon, { classes: { root: classes.shareMenuIcon }, fontSize: "small", onClick: () => window.open(LINKEDIN_SHARE + portal, 'linkedin-share-dialog', 'width=626,height=436'), children: "linkedin" }))] })] }) })] }) })), openAlert && _jsx(UserDeletedSnackBar, { open: openAlert, handleClose: () => setOpenAlert(false) })] }));
 }

package/lib/esm/components/IncubatorListWidget/CreateIncubatorDialog/CreateIncubatorDialog.js

@@ -75,10 +75,10 @@ export default function CreateIncubatorDialog(props) {
     }
     let dialogContent;
     if (submitted) {
-        dialogContent = (_jsx(Typography, Object.assign({ variant: 'subtitle2', className: classes.submittedMessage }, { children: _jsx(FormattedMessage, { id: "ui.incubatorListWidget.createIncubatorDialog.propose.success", defaultMessage: "ui.incubatorListWidget.createIncubatorDialog.propose.success" }) })));
+        dialogContent = (_jsx(Typography, { variant: 'subtitle2', className: classes.submittedMessage, children: _jsx(FormattedMessage, { id: "ui.incubatorListWidget.createIncubatorDialog.propose.success", defaultMessage: "ui.incubatorListWidget.createIncubatorDialog.propose.success" }) }));
     }
     else {
-        dialogContent = (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ component: 'span', className: classes.intro }, { children: _jsx(FormattedMessage, { id: "ui.incubatorsListDialog.createIncubatorDialog.intro", defaultMessage: "ui.incubatorsListDialog.createIncubatorDialog.intro" }) })), _jsxs(FormGroup, Object.assign({ className: classes.form }, { children: [_jsx(TextField, { required: true, error: Boolean(error), className: classes.name, placeholder: `${intl.formatMessage(messages.name)}`, margin: "normal", value: name, onChange: (event) => setName(event.target.value) }), _jsx(TextField, { multiline: true, error: Boolean(error), className: classes.slogan, placeholder: `${intl.formatMessage(messages.slogan)}`, margin: "normal", value: slogan, onChange: (event) => setSlogan(event.target.value) })] })), _jsx(LoadingButton, Object.assign({ loading: isSubmitting, disabled: !name || Boolean(error), variant: "contained", onClick: handleSubmit }, { children: _jsx(FormattedMessage, { id: "ui.incubatorListWidget.createIncubatorDialog.button", defaultMessage: "ui.incubatorListWidget.createIncubatorDialog.button" }) }))] }));
+        dialogContent = (_jsxs(_Fragment, { children: [_jsx(Typography, { component: 'span', className: classes.intro, children: _jsx(FormattedMessage, { id: "ui.incubatorsListDialog.createIncubatorDialog.intro", defaultMessage: "ui.incubatorsListDialog.createIncubatorDialog.intro" }) }), _jsxs(FormGroup, { className: classes.form, children: [_jsx(TextField, { required: true, error: Boolean(error), className: classes.name, placeholder: `${intl.formatMessage(messages.name)}`, margin: "normal", value: name, onChange: (event) => setName(event.target.value) }), _jsx(TextField, { multiline: true, error: Boolean(error), className: classes.slogan, placeholder: `${intl.formatMessage(messages.slogan)}`, margin: "normal", value: slogan, onChange: (event) => setSlogan(event.target.value) })] }), _jsx(LoadingButton, { loading: isSubmitting, disabled: !name || Boolean(error), variant: "contained", onClick: handleSubmit, children: _jsx(FormattedMessage, { id: "ui.incubatorListWidget.createIncubatorDialog.button", defaultMessage: "ui.incubatorListWidget.createIncubatorDialog.button" }) })] }));
     }
     // RENDER
     return (_jsx(Root, Object.assign({ title: _jsx(FormattedMessage, { id: "ui.incubatorListWidget.createIncubatorDialog.title", defaultMessage: "ui.incubatorListWidget.createIncubatorDialog.title" }), open: open, onClose: onClose, className: classNames(classes.root, className) }, rest, { children: dialogContent })));

package/lib/esm/components/IncubatorListWidget/IncubatorListWidget.js

@@ -220,9 +220,9 @@ export default function IncubatorListWidget(inProps) {
     if (!state.initialized) {
         return _jsx(Skeleton, {});
     }
-    const content = (_jsxs(CardContent, { children: [_jsxs(Box, Object.assign({ className: classes.header }, { children: [_jsx(Typography, Object.assign({ className: classes.title, variant: 'h5' }, { children: _jsx(FormattedMessage, { id: "ui.incubatorListWidget.title", defaultMessage: "ui.incubatorListWidget.title" }) })), _jsx(IconButton, Object.assign({ className: classes.helpPopover, color: "primary", "aria-label": "info", component: "span", onClick: handleClickHelpButton }, { children: _jsx(Icon, { children: "help_outline" }) })), isOpen && (_jsx(Popover, Object.assign({ open: isOpen, anchorEl: anchorEl, onClose: handlePopoverClose, anchorOrigin: {
+    const content = (_jsxs(CardContent, { children: [_jsxs(Box, { className: classes.header, children: [_jsx(Typography, { className: classes.title, variant: 'h5', children: _jsx(FormattedMessage, { id: "ui.incubatorListWidget.title", defaultMessage: "ui.incubatorListWidget.title" }) }), _jsx(IconButton, { className: classes.helpPopover, color: "primary", "aria-label": "info", component: "span", onClick: handleClickHelpButton, children: _jsx(Icon, { children: "help_outline" }) }), isOpen && (_jsx(Popover, { open: isOpen, anchorEl: anchorEl, onClose: handlePopoverClose, anchorOrigin: {
                             vertical: 'bottom',
                             horizontal: 'right'
-                        } }, { children: _jsx(Box, Object.assign({ sx: { p: '10px' } }, { children: _jsx(Typography, Object.assign({ component: 'span', sx: { whiteSpace: 'pre-line' } }, { children: _jsx(FormattedMessage, { id: "ui.incubatorListWidget.popover", defaultMessage: "ui.incubatorListWidget.popover" }) })) })) })))] })), !state.count ? (_jsx(Typography, Object.assign({ className: classes.noResults, variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.incubatorListWidget.noResults", defaultMessage: "ui.incubatorListWidget.noResults" }) }))) : (_jsxs(React.Fragment, { children: [_jsx(List, { children: state.results.slice(0, state.visibleItems).map((incubator) => (_jsx(ListItem, { children: _jsx(Incubator, Object.assign({ elevation: 0, incubator: incubator, subscribeButtonProps: { onSubscribe: handleSubscriptionsUpdate }, ButtonProps: { onClick: () => handleIncubatorDetailDialogOpening(incubator) } }, IncubatorProps)) }, incubator.id))) }), _jsxs(Box, Object.assign({ className: classes.actions }, { children: [state.count > state.visibleItems && (_jsx(Button, Object.assign({ className: classes.showMore, onClick: handleToggleDialogOpen }, { children: _jsx(FormattedMessage, { id: "ui.incubatorListWidget.ShowAll", defaultMessage: "ui.incubatorListWidget.ShowAll" }) }))), _jsx(Button, Object.assign({ size: "small", onClick: () => setOpenCreateIncubatorDialog(true) }, { children: _jsx(FormattedMessage, { id: "ui.incubatorListWidget.SuggestNewTopic", defaultMessage: "ui.incubatorListWidget.SuggestNewTopic" }) }))] }))] })), openDialog && (_jsx(DialogRoot, Object.assign({ className: classes.dialogRoot, title: _jsx(FormattedMessage, { id: "ui.incubatorListWidget.title", defaultMessage: "ui.incubatorListWidget.title" }), onClose: handleToggleDialogOpen, open: openDialog }, DialogProps, { children: _jsx(InfiniteScroll, Object.assign({ dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: _jsx(IncubatorSkeleton, Object.assign({ elevation: 0 }, IncubatorProps)), height: isMobile ? '100vh' : 400, endMessage: _jsx(Typography, Object.assign({ className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.incubatorListWidget.noMoreIncubators", defaultMessage: "ui.incubatorListWidget.noMoreIncubators" }) })) }, { children: _jsx(List, { children: state.results.map((incubator) => (_jsx(ListItem, { children: _jsx(Incubator, Object.assign({ elevation: 0, incubator: incubator, subscribeButtonProps: { onSubscribe: handleSubscriptionsUpdate }, ButtonProps: { onClick: () => handleIncubatorDetailDialogOpening(incubator) } }, IncubatorProps)) }, incubator.id))) }) })) }))), openCreateIncubatorDialog && (_jsx(CreateIncubatorDialog, { className: classes.createDialog, open: openCreateIncubatorDialog, onClose: handleCreateIncubatorDialogClose })), openIncubatorDetailDialog && (_jsx(IncubatorDetail, { open: openIncubatorDetailDialog, onClose: handleIncubatorDetailDialogClose, incubator: detailObj, onSubscriptionsUpdate: handleSubscriptionsUpdate }))] }));
+                        }, children: _jsx(Box, { sx: { p: '10px' }, children: _jsx(Typography, { component: 'span', sx: { whiteSpace: 'pre-line' }, children: _jsx(FormattedMessage, { id: "ui.incubatorListWidget.popover", defaultMessage: "ui.incubatorListWidget.popover" }) }) }) }))] }), !state.count ? (_jsx(Typography, { className: classes.noResults, variant: "body2", children: _jsx(FormattedMessage, { id: "ui.incubatorListWidget.noResults", defaultMessage: "ui.incubatorListWidget.noResults" }) })) : (_jsxs(React.Fragment, { children: [_jsx(List, { children: state.results.slice(0, state.visibleItems).map((incubator) => (_jsx(ListItem, { children: _jsx(Incubator, Object.assign({ elevation: 0, incubator: incubator, subscribeButtonProps: { onSubscribe: handleSubscriptionsUpdate }, ButtonProps: { onClick: () => handleIncubatorDetailDialogOpening(incubator) } }, IncubatorProps)) }, incubator.id))) }), _jsxs(Box, { className: classes.actions, children: [state.count > state.visibleItems && (_jsx(Button, { className: classes.showMore, onClick: handleToggleDialogOpen, children: _jsx(FormattedMessage, { id: "ui.incubatorListWidget.ShowAll", defaultMessage: "ui.incubatorListWidget.ShowAll" }) })), _jsx(Button, { size: "small", onClick: () => setOpenCreateIncubatorDialog(true), children: _jsx(FormattedMessage, { id: "ui.incubatorListWidget.SuggestNewTopic", defaultMessage: "ui.incubatorListWidget.SuggestNewTopic" }) })] })] })), openDialog && (_jsx(DialogRoot, Object.assign({ className: classes.dialogRoot, title: _jsx(FormattedMessage, { id: "ui.incubatorListWidget.title", defaultMessage: "ui.incubatorListWidget.title" }), onClose: handleToggleDialogOpen, open: openDialog }, DialogProps, { children: _jsx(InfiniteScroll, { dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: _jsx(IncubatorSkeleton, Object.assign({ elevation: 0 }, IncubatorProps)), height: isMobile ? '100vh' : 400, endMessage: _jsx(Typography, { className: classes.endMessage, children: _jsx(FormattedMessage, { id: "ui.incubatorListWidget.noMoreIncubators", defaultMessage: "ui.incubatorListWidget.noMoreIncubators" }) }), children: _jsx(List, { children: state.results.map((incubator) => (_jsx(ListItem, { children: _jsx(Incubator, Object.assign({ elevation: 0, incubator: incubator, subscribeButtonProps: { onSubscribe: handleSubscriptionsUpdate }, ButtonProps: { onClick: () => handleIncubatorDetailDialogOpening(incubator) } }, IncubatorProps)) }, incubator.id))) }) }) }))), openCreateIncubatorDialog && (_jsx(CreateIncubatorDialog, { className: classes.createDialog, open: openCreateIncubatorDialog, onClose: handleCreateIncubatorDialogClose })), openIncubatorDetailDialog && (_jsx(IncubatorDetail, { open: openIncubatorDetailDialog, onClose: handleIncubatorDetailDialogClose, incubator: detailObj, onSubscriptionsUpdate: handleSubscriptionsUpdate }))] }));
     return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: content })));
 }