@selfcommunity/react-ui 0.7.9-alpha.2 → 0.7.9-alpha.20

package/lib/cjs/components/PrivateMessageThread/PrivateMessageThread.js

@@ -43,6 +43,8 @@ const classes = {
     newMessageContent: `${constants_1.PREFIX}-new-message-content`,
     sender: `${constants_1.PREFIX}-sender`,
     receiver: `${constants_1.PREFIX}-receiver`,
+    avatar: `${constants_1.PREFIX}-avatar`,
+    item: `${constants_1.PREFIX}-item`,
     autocomplete: `${constants_1.PREFIX}-autocomplete`,
     autocompleteDialog: `${constants_1.PREFIX}-autocomplete-dialog`,
     editor: `${constants_1.PREFIX}-editor`
@@ -95,7 +97,7 @@ function PrivateMessageThread(inProps) {
         props: inProps,
         name: constants_1.PREFIX
     });
-    const { userObj, openNewMessage = false, onNewMessageClose = null, onNewMessageSent = null, onSingleMessageOpen = null, className } = props, rest = tslib_1.__rest(props, ["userObj", "openNewMessage", "onNewMessageClose", "onNewMessageSent", "onSingleMessageOpen", "className"]);
+    const { threadObj, openNewMessage = false, onNewMessageClose = null, onNewMessageSent = null, onSingleMessageOpen = null, className, type } = props, rest = tslib_1.__rest(props, ["threadObj", "openNewMessage", "onNewMessageClose", "onNewMessageSent", "onSingleMessageOpen", "className", "type"]);
     // CONTEXT
     const scUserContext = (0, react_1.useContext)(react_core_1.SCUserContext);
     // STATE
@@ -106,7 +108,7 @@ function PrivateMessageThread(inProps) {
     const [loading, setLoading] = (0, react_1.useState)(false);
     const [isHovered, setIsHovered] = (0, react_1.useState)({});
     const [followers, setFollowers] = (0, react_1.useState)([]);
-    const isNew = userObj && userObj === types_1.SCPrivateMessageStatusType.NEW;
+    const isNew = threadObj && threadObj === types_1.SCPrivateMessageStatusType.NEW;
     const authUserId = scUserContext.user ? scUserContext.user.id : null;
     const [singleMessageUser, setSingleMessageUser] = (0, react_1.useState)(null);
     const [receiver, setReceiver] = (0, react_1.useState)(null);
@@ -115,7 +117,7 @@ function PrivateMessageThread(inProps) {
     const [openDeleteMessageDialog, setOpenDeleteMessageDialog] = (0, react_1.useState)(false);
     const [recipients, setRecipients] = (0, react_1.useState)([]);
     const { enqueueSnackbar, closeSnackbar } = (0, notistack_1.useSnackbar)();
-    const isNumber = typeof userObj === 'number';
+    const isNumber = typeof threadObj === 'number';
     const messageReceiver = (item, loggedUserId) => {
         var _a, _b, _c;
         return ((_a = item === null || item === void 0 ? void 0 : item.receiver) === null || _a === void 0 ? void 0 : _a.id) !== loggedUserId ? (_b = item === null || item === void 0 ? void 0 : item.receiver) === null || _b === void 0 ? void 0 : _b.id : (_c = item === null || item === void 0 ? void 0 : item.sender) === null || _c === void 0 ? void 0 : _c.id;
@@ -128,7 +130,7 @@ function PrivateMessageThread(inProps) {
     // HOOKS
     // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
     // @ts-ignore
-    const { scUser } = (0, react_core_1.useSCFetchUser)({ id: userObj, userObj });
+    const { scUser } = (0, react_core_1.useSCFetchUser)({ id: threadObj, threadObj });
     const messagesEndRef = (0, react_1.useRef)(null);
     const scrollToBottom = () => {
         var _a;
@@ -256,9 +258,9 @@ function PrivateMessageThread(inProps) {
      * Fetches thread
      */
     function fetchThread() {
-        if (userObj && typeof userObj !== 'string') {
+        if (threadObj && typeof threadObj !== 'string' && type !== types_1.SCPrivateMessageType.GROUP) {
             setLoadingMessageObjs(true);
-            const _userObjId = isNumber ? userObj : messageReceiver(userObj, authUserId);
+            const _userObjId = isNumber ? threadObj : messageReceiver(threadObj, authUserId);
             api_services_1.PrivateMessageService.getAThread({ user: _userObjId, limit: 10 })
                 .then((res) => {
                 setMessageObjs(res.results);
@@ -291,6 +293,19 @@ function PrivateMessageThread(inProps) {
                 utils_1.Logger.error(Errors_1.SCOPE_SC_UI, { error });
             });
         }
+        else if (type === types_1.SCPrivateMessageType.GROUP) {
+            api_services_1.PrivateMessageService.getAThread({ group: isNumber ? threadObj : threadObj.group.id, limit: 10 })
+                .then((res) => {
+                setMessageObjs(res.results);
+                setPrevious(res.next && updateAndDeleteURLParameters(res.next, 'before_message', res.results[0].id, 'offset'));
+                setLoadingMessageObjs(false);
+            })
+                .catch((error) => {
+                setLoadingMessageObjs(false);
+                console.log(error);
+                utils_1.Logger.error(Errors_1.SCOPE_SC_UI, { error });
+            });
+        }
     }
     const isNewerThan60Seconds = (creationTime) => {
         const date = new Date(creationTime);
@@ -355,11 +370,15 @@ function PrivateMessageThread(inProps) {
                 .request({
                 url: api_services_1.Endpoints.SendMessage.url(),
                 method: api_services_1.Endpoints.SendMessage.method,
-                data: {
-                    recipients: openNewMessage || isNew || singleMessageThread ? ids : [isNumber && userObj ? userObj : messageReceiver(userObj, authUserId)],
-                    message: message,
-                    file_uuid: file && !message ? file : null
-                }
+                data: Object.assign(Object.assign({}, (type === types_1.SCPrivateMessageType.GROUP
+                    ? { group: isNumber ? threadObj : threadObj.group.id }
+                    : {
+                        recipients: openNewMessage || isNew || singleMessageThread
+                            ? ids
+                            : [isNumber && threadObj ? threadObj : messageReceiver(threadObj, authUserId)]
+                    })), { 
+                    // recipients: openNewMessage || isNew || singleMessageThread ? ids : [isNumber && threadObj ? threadObj : messageReceiver(threadObj, authUserId)],
+                    message: message, file_uuid: file && !message ? file : null })
             })
                 .then((res) => {
                 const isOne = res.data.length <= 1;
@@ -405,13 +424,13 @@ function PrivateMessageThread(inProps) {
         if (!authUserId) {
             return;
         }
-        if (userObj) {
+        if (threadObj) {
             fetchThread();
         }
         else {
             reset();
         }
-    }, [userObj, authUserId, scUser]);
+    }, [threadObj, authUserId, scUser]);
     /**
      * Notification subscriber
      */
@@ -426,7 +445,7 @@ function PrivateMessageThread(inProps) {
         if (index !== -1) {
             setMessageObjs((prev) => [...prev, res.notification_obj.message]);
         }
-        if (isNumber ? userObj === res.thread_id : userObj.id === res.thread_id) {
+        if (isNumber ? threadObj === res.thread_id : threadObj.id === res.thread_id) {
             scrollToBottom();
         }
     };
@@ -453,11 +472,17 @@ function PrivateMessageThread(inProps) {
                     react_1.default.createElement("ul", null,
                         react_1.default.createElement(material_1.ListSubheader, null,
                             react_1.default.createElement(material_1.Typography, { align: "center", className: classes.subHeader }, key)),
-                        formattedMessages[key].map((msg) => (react_1.default.createElement(PrivateMessageThreadItem_1.default, { className: authUserId === msg.sender.id ? classes.sender : classes.receiver, message: msg, key: msg.id, mouseEvents: {
-                                onMouseEnter: () => handleMouseEnter(msg.id),
-                                onMouseLeave: () => handleMouseLeave(msg.id)
-                            }, isHovering: isHovered[msg.id], showMenuIcon: authUserId === msg.sender.id, onMenuIconClick: () => handleOpenDeleteMessageDialog(msg) }))))))))),
-            react_1.default.createElement(PrivateMessageEditor_1.default, { className: classes.editor, send: handleSend, autoHide: !(scUser === null || scUser === void 0 ? void 0 : scUser.can_send_pm_to), autoHideDeletion: (receiver === null || receiver === void 0 ? void 0 : receiver.deleted) || (scUser === null || scUser === void 0 ? void 0 : scUser.deleted), onThreadChangeId: isNumber ? userObj : userObj.receiver.id, error: error, onErrorRemove: () => setError(false) }),
+                        formattedMessages[key].map((msg) => {
+                            var _a;
+                            return (react_1.default.createElement(material_1.Box, { className: classes.item, key: msg.id },
+                                msg.group && ((_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.username) !== msg.sender.username && (react_1.default.createElement(material_1.ListItemAvatar, null,
+                                    react_1.default.createElement(material_1.Avatar, { alt: msg.sender.username, src: msg.sender.avatar, className: classes.avatar }))),
+                                react_1.default.createElement(PrivateMessageThreadItem_1.default, { className: authUserId === msg.sender.id ? classes.sender : classes.receiver, message: msg, key: msg.id, mouseEvents: {
+                                        onMouseEnter: () => handleMouseEnter(msg.id),
+                                        onMouseLeave: () => handleMouseLeave(msg.id)
+                                    }, isHovering: isHovered[msg.id], showMenuIcon: authUserId === msg.sender.id, onMenuIconClick: () => handleOpenDeleteMessageDialog(msg) })));
+                        }))))))),
+            react_1.default.createElement(PrivateMessageEditor_1.default, { className: classes.editor, send: handleSend, autoHide: type === types_1.SCPrivateMessageType.USER && !(scUser === null || scUser === void 0 ? void 0 : scUser.can_send_pm_to), autoHideDeletion: type === types_1.SCPrivateMessageType.USER && ((receiver === null || receiver === void 0 ? void 0 : receiver.deleted) || (scUser === null || scUser === void 0 ? void 0 : scUser.deleted)), onThreadChangeId: isNumber ? threadObj : type === types_1.SCPrivateMessageType.USER ? threadObj.receiver.id : threadObj.group.id, error: error, onErrorRemove: () => setError(false) }),
             openDeleteMessageDialog && (react_1.default.createElement(ConfirmDialog_1.default, { open: openDeleteMessageDialog, title: react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.privateMessage.component.delete.message.dialog.msg", defaultMessage: "ui.privateMessage.component.delete.message.dialog.msg" }), btnConfirm: react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.privateMessage.component.delete.message.dialog.confirm", defaultMessage: "ui.privateMessage.component.delete.message.dialog.confirm" }), onConfirm: handleDeleteMessage, onClose: handleCloseDeleteMessageDialog }))));
     }
     /**
@@ -485,6 +510,6 @@ function PrivateMessageThread(inProps) {
     /**
      * Renders the component
      */
-    return (react_1.default.createElement(Root, Object.assign({}, rest, { className: (0, classnames_1.default)(classes.root, className) }), userObj !== null && !isNew && !singleMessageThread ? renderThread() : renderNewOrNoMessageBox()));
+    return (react_1.default.createElement(Root, Object.assign({}, rest, { className: (0, classnames_1.default)(classes.root, className) }), threadObj !== null && !isNew && !singleMessageThread ? renderThread() : renderNewOrNoMessageBox()));
 }
 exports.default = PrivateMessageThread;

package/lib/cjs/index.d.ts

@@ -80,6 +80,7 @@ import BaseItem, { BaseItemProps } from './shared/BaseItem';
 import BaseDialog, { BaseDialogProps } from './shared/BaseDialog';
 import MediaChunkUploader, { MediaChunkUploaderProps } from './shared/MediaChunkUploader';
 import { File, EditMediaProps, Link, Share } from './shared/Media';
+import HiddenPlaceholder from './shared/HiddenPlaceholder';
 import UrlTextField from './shared/UrlTextField';
 import UsernameTextField from './shared/UsernameTextField';
 import EmailTextField from './shared/EmailTextField';
@@ -108,14 +109,17 @@ import ChangeGroupCover, { ChangeGroupCoverProps } from './components/ChangeGrou
 import ChangeGroupPicture, { ChangeGroupPictureProps } from './components/ChangeGroupPicture';
 import GroupHeader, { GroupHeaderProps, GroupHeaderSkeleton } from './components/GroupHeader';
 import GroupMembersButton, { GroupMembersButtonProps } from './components/GroupMembersButton';
-import CreateGroupButton from './components/CreateGroupButton';
-import CreateButton, { CreateGroupButtonProps } from './components/CreateGroupButton';
+import CreateGroupButton, { CreateGroupButtonProps } from './components/CreateGroupButton';
+import EditGroupButton, { EditGroupButtonProps } from './components/EditGroupButton';
 import GroupInviteButton, { GroupInviteButtonProps } from './components/GroupInviteButton';
 import GroupInfoWidget, { GroupInfoWidgetProps, GroupInfoWidgetSkeleton } from './components/GroupInfoWidget';
 import Group, { GroupProps } from './components/Group';
 import GroupSubscribeButton, { GroupSubscribeButtonProps } from './components/GroupSubscribeButton';
 import GroupMembersWidget, { GroupMembersWidgetProps, GroupMembersWidgetSkeleton } from './components/GroupMembersWidget';
 import GroupRequestsWidget, { GroupRequestsWidgetProps, GroupRequestsWidgetSkeleton } from './components/GroupRequestsWidget';
+import Groups, { GroupsProps, GroupsSkeleton } from './components/Groups';
+import GroupForm, { GroupFormProps } from './components/GroupForm';
+import GroupSettingsIconButton, { GroupSettingsIconButtonProps } from './components/GroupSettingsIconButton';
 /**
  * Constants
  */
@@ -140,4 +144,4 @@ import FeedObjectMediaPreview, { FeedObjectMediaPreviewProps } from './component
 /**
  * List all exports
  */
-export { AccountDataPortability, AccountDataPortabilityProps, AccountDataPortabilityButton, AccountDataPortabilityButtonProps, AccountDelete, AccountDeleteProps, AccountDeleteButton, AccountDeleteButtonProps, AccountRecover, AccountRecoverProps, AccountReset, AccountResetProps, AccountVerify, AccountVerifyProps, AccountChangeMailValidation, AccountChangeMailValidationProps, NavigationSettingsIconButton, NavigationSettingsIconButtonProps, NavigationSettingsItem, NavigationToolbarMobile, NavigationToolbarMobileProps, NavigationToolbarMobileSkeleton, NavigationToolbar, NavigationToolbarProps, NavigationToolbarSkeleton, NavigationMenuIconButton, NavigationMenuContent, NavigationMenuIconButtonProps, BottomNavigation, BottomNavigationProps, BroadcastMessages, BroadcastMessagesProps, BroadcastMessagesSkeleton, Category, CategoryProps, CategorySkeleton, CategoryAutocomplete, CategoryAutocompleteProps, CategoryFollowersButton, CategoryFollowersButtonProps, CategoryHeader, CategoryHeaderProps, CategoryHeaderSkeleton, Categories, CategoriesProps, CategoriesSkeleton, CategoriesSkeletonProps, UserFollowedCategoriesWidget, UserFollowedCategoriesWidgetProps, UserFollowedCategoriesWidgetSkeleton, CategoriesPopularWidget, CategoriesPopularWidgetSkeleton, CategoriesSuggestionWidget, CategoriesSuggestionWidgetProps, CategoriesSuggestionWidgetSkeleton, ChangeCover, ChangePicture, ChangePictureProps, ChangeCoverProps, Composer, ComposerProps, ComposerIconButton, ComposerIconButtonProps, Editor, EditorProps, EditorSkeleton, FriendshipUserButton, FriendshipButtonProps, Feed, FeedRef, FeedProps, FeedSidebarProps, FeedSkeleton, CategoryFollowButton, CategoryFollowButtonProps, FollowUserButton, FollowUserButtonProps, ConnectionUserButton, FeedObject, FeedObjectProps, FeedObjectSkeleton, FeedObjectMediaPreview, FeedObjectMediaPreviewProps, FeedUpdatesWidget, FeedUpdatesWidgetProps, FeedUpdatesWidgetSkeleton, GenericSkeleton, AvatarGroupSkeleton, CommentObject, CommentsObject, CommentsObjectProps, CommentObjectProps, CommentsObjectSkeleton, CommentObjectSkeleton, CommentObjectReply, CommentObjectReplyProps, CommentsFeedObject, CommentsFeedObjectProps, CommentsFeedObjectSkeleton, ReplyComment, InlineComposerWidget, InlineComposerWidgetProps, InlineComposerWidgetSkeleton, Notification, NotificationProps, NotificationSkeleton, UserSuggestionWidget, UserSuggestionWidgetProps, UserSuggestionWidgetSkeleton, PlatformWidget, PlatformWidgetProps, PlatformWidgetSkeleton, LocationAutocomplete, LocationAutocompleteProps, LoyaltyProgramWidget, LoyaltyProgramWidgetProps, LoyaltyProgramWidgetSkeleton, CategoryTrendingFeedWidget, CategoryTrendingFeedWidgetProps, CategoryTrendingFeedWidgetSkeleton, CategoryTrendingUsersWidget, CategoryTrendingUsersWidgetProps, CategoryTrendingPeopleWidgetSkeleton, RelatedFeedObjectsWidget, RelatedFeedObjectWidgetProps, RelatedFeedObjectsWidgetSkeleton, UserActionIconButton, UserActionIconButtonProps, UserCounters, UserCountersProps, UserProfileHeader, UserProfileHeaderProps, UserProfileHeaderSkeleton, UserInfoDialog, UserInfoDialogProps, UserInfo, UserInfoProps, UserInfoSkeleton, UserProfileBlocked, UserProfileBlockedProps, SCUserProfileFields, SCUserProfileSettings, UserProfileEdit, UserProfileEditProps, UserProfileEditSkeleton, UserProfileEditSectionPublicInfo, UserProfileEditSectionPublicInfoProps, UserProfileEditSectionSettings, UserProfileEditSectionSettingsProps, UserProfileEditSectionAccount, UserProfileEditSectionAccountProps, UserFollowedUsersWidget, UserFollowedUsersWidgetProps, UserFollowedUsersWidgetSkeleton, UserFollowersWidget, UserFollowersWidgetProps, UserFollowersWidgetSkeleton, UserConnectionsWidget, UserConnectionsWidgetProps, UserConnectionsWidgetSkeleton, UserConnectionsRequestsWidget, UserConnectionsRequestsWidgetProps, UserConnectionsRequestsWidgetSkeleton, UserConnectionsRequestsSentWidget, UserConnectionsRequestsSentWidgetProps, UserConnectionsRequestsSentWidgetSkeleton, UserSocialAssociation, UserSocialAssociationProps, SCUserSocialAssociations, CustomAdv, CustomAdvProps, CustomAdvSkeleton, User, UserProps, UserSkeleton, PrivateMessageThread, PrivateMessageThreadProps, PrivateMessageThreadSkeleton, PrivateMessageThreadItem, PrivateMessageThreadItemProps, PrivateMessageThreadItemSkeleton, PrivateMessageSnippetItem, PrivateMessageSnippetItemProps, PrivateMessageSnippetItemSkeleton, PrivateMessageEditor, PrivateMessageEditorProps, PrivateMessageEditorSkeleton, PrivateMessageSnippets, PrivateMessageSnippetsProps, PrivateMessageSnippetsSkeleton, PrivateMessageComponent, PrivateMessageComponentProps, PrivateMessageComponentSkeleton, PrivateMessageSettingsIconButton, PrivateMessageSettingsIconButtonProps, ToastNotifications, ToastNotificationsProps, ToastNotificationsSkeleton, SnippetNotifications, SnippetNotificationsProps, SnippetNotificationsSkeleton, SearchAutocomplete, SearchAutocompleteProps, SearchDialog, SearchDialogProps, Widget, WidgetProps, SCFeedWidgetType, SCFeedObjectTemplateType, SCCommentsOrderBy, SCFeedObjectActivitiesType, SCMediaObjectType, SCMediaChunkType, SCNotificationObjectTemplateType, SCBroadcastMessageTemplateType, ChangeGroupCover, ChangeGroupCoverProps, ChangeGroupPicture, ChangeGroupPictureProps, GroupHeader, GroupHeaderProps, GroupHeaderSkeleton, GroupMembersButton, GroupMembersButtonProps, CreateGroupButton, CreateButton, CreateGroupButtonProps, GroupInviteButton, GroupInviteButtonProps, GroupInfoWidget, GroupInfoWidgetProps, GroupInfoWidgetSkeleton, Group, GroupProps, GroupSubscribeButton, GroupSubscribeButtonProps, GroupMembersWidget, GroupMembersWidgetProps, GroupMembersWidgetSkeleton, GroupRequestsWidget, GroupRequestsWidgetProps, GroupRequestsWidgetSkeleton, UrlTextField, UsernameTextField, EmailTextField, PasswordTextField, PhoneTextField, MetadataField, InfiniteScroll, StickyBox, useStickyBox, StickyBoxProps, StickyBoxComponent, UseStickyBoxProps, TagChip, TagChipProps, UserDeletedSnackBar, UserDeletedSnackBarProps, UserAvatar, UserAvatarProps, Lightbox, CentralProgress, ConfirmDialog, LanguageSwitcher, MediaChunkUploader, MediaChunkUploaderProps, File, Link, Share, EditMediaProps, MEDIA_TYPE_EMBED, FACEBOOK_SHARE, TWITTER_SHARE, LINKEDIN_SHARE, DEFAULT_PRELOAD_OFFSET_VIEWPORT, MIN_PRELOAD_OFFSET_VIEWPORT, MAX_PRELOAD_OFFSET_VIEWPORT, ConsentSolution, ConsentSolutionProps, ConsentSolutionSkeleton, ConsentSolutionButton, ConsentSolutionButtonProps, LEGAL_POLICIES, DEFAULT_FIELDS, DEFAULT_PAGINATION_QUERY_PARAM_NAME, DEFAULT_PAGINATION_OFFSET, DEFAULT_PAGINATION_LIMIT, DEFAULT_WIDGETS_NUMBER, PollSuggestionWidget, PollSuggestionWidgetProps, Incubator, IncubatorSubscribeButton, IncubatorSubscribeButtonProps, IncubatorProps, IncubatorListWidget, IncubatorListWidgetProps, IncubatorDetail, IncubatorDetailProps, IncubatorSuggestionWidget, IncubatorSuggestionWidgetProps, ContributionUtils, bytesToSize, getUnseenNotification, getUnseenNotificationCounter, MessageUploaderUtils, getRelativeTime, Footer, FooterProps, FooterSkeleton, BaseItem, BaseItemProps, BaseDialog, BaseDialogProps };
+export { AccountDataPortability, AccountDataPortabilityProps, AccountDataPortabilityButton, AccountDataPortabilityButtonProps, AccountDelete, AccountDeleteProps, AccountDeleteButton, AccountDeleteButtonProps, AccountRecover, AccountRecoverProps, AccountReset, AccountResetProps, AccountVerify, AccountVerifyProps, AccountChangeMailValidation, AccountChangeMailValidationProps, NavigationSettingsIconButton, NavigationSettingsIconButtonProps, NavigationSettingsItem, NavigationToolbarMobile, NavigationToolbarMobileProps, NavigationToolbarMobileSkeleton, NavigationToolbar, NavigationToolbarProps, NavigationToolbarSkeleton, NavigationMenuIconButton, NavigationMenuContent, NavigationMenuIconButtonProps, BottomNavigation, BottomNavigationProps, BroadcastMessages, BroadcastMessagesProps, BroadcastMessagesSkeleton, Category, CategoryProps, CategorySkeleton, CategoryAutocomplete, CategoryAutocompleteProps, CategoryFollowersButton, CategoryFollowersButtonProps, CategoryHeader, CategoryHeaderProps, CategoryHeaderSkeleton, Categories, CategoriesProps, CategoriesSkeleton, CategoriesSkeletonProps, UserFollowedCategoriesWidget, UserFollowedCategoriesWidgetProps, UserFollowedCategoriesWidgetSkeleton, CategoriesPopularWidget, CategoriesPopularWidgetSkeleton, CategoriesSuggestionWidget, CategoriesSuggestionWidgetProps, CategoriesSuggestionWidgetSkeleton, ChangeCover, ChangePicture, ChangePictureProps, ChangeCoverProps, Composer, ComposerProps, ComposerIconButton, ComposerIconButtonProps, Editor, EditorProps, EditorSkeleton, FriendshipUserButton, FriendshipButtonProps, Feed, FeedRef, FeedProps, FeedSidebarProps, FeedSkeleton, CategoryFollowButton, CategoryFollowButtonProps, FollowUserButton, FollowUserButtonProps, ConnectionUserButton, FeedObject, FeedObjectProps, FeedObjectSkeleton, FeedObjectMediaPreview, FeedObjectMediaPreviewProps, FeedUpdatesWidget, FeedUpdatesWidgetProps, FeedUpdatesWidgetSkeleton, GenericSkeleton, AvatarGroupSkeleton, CommentObject, CommentsObject, CommentsObjectProps, CommentObjectProps, CommentsObjectSkeleton, CommentObjectSkeleton, CommentObjectReply, CommentObjectReplyProps, CommentsFeedObject, CommentsFeedObjectProps, CommentsFeedObjectSkeleton, ReplyComment, InlineComposerWidget, InlineComposerWidgetProps, InlineComposerWidgetSkeleton, Notification, NotificationProps, NotificationSkeleton, UserSuggestionWidget, UserSuggestionWidgetProps, UserSuggestionWidgetSkeleton, PlatformWidget, PlatformWidgetProps, PlatformWidgetSkeleton, LocationAutocomplete, LocationAutocompleteProps, LoyaltyProgramWidget, LoyaltyProgramWidgetProps, LoyaltyProgramWidgetSkeleton, CategoryTrendingFeedWidget, CategoryTrendingFeedWidgetProps, CategoryTrendingFeedWidgetSkeleton, CategoryTrendingUsersWidget, CategoryTrendingUsersWidgetProps, CategoryTrendingPeopleWidgetSkeleton, RelatedFeedObjectsWidget, RelatedFeedObjectWidgetProps, RelatedFeedObjectsWidgetSkeleton, UserActionIconButton, UserActionIconButtonProps, UserCounters, UserCountersProps, UserProfileHeader, UserProfileHeaderProps, UserProfileHeaderSkeleton, UserInfoDialog, UserInfoDialogProps, UserInfo, UserInfoProps, UserInfoSkeleton, UserProfileBlocked, UserProfileBlockedProps, SCUserProfileFields, SCUserProfileSettings, UserProfileEdit, UserProfileEditProps, UserProfileEditSkeleton, UserProfileEditSectionPublicInfo, UserProfileEditSectionPublicInfoProps, UserProfileEditSectionSettings, UserProfileEditSectionSettingsProps, UserProfileEditSectionAccount, UserProfileEditSectionAccountProps, UserFollowedUsersWidget, UserFollowedUsersWidgetProps, UserFollowedUsersWidgetSkeleton, UserFollowersWidget, UserFollowersWidgetProps, UserFollowersWidgetSkeleton, UserConnectionsWidget, UserConnectionsWidgetProps, UserConnectionsWidgetSkeleton, UserConnectionsRequestsWidget, UserConnectionsRequestsWidgetProps, UserConnectionsRequestsWidgetSkeleton, UserConnectionsRequestsSentWidget, UserConnectionsRequestsSentWidgetProps, UserConnectionsRequestsSentWidgetSkeleton, UserSocialAssociation, UserSocialAssociationProps, SCUserSocialAssociations, CustomAdv, CustomAdvProps, CustomAdvSkeleton, User, UserProps, UserSkeleton, PrivateMessageThread, PrivateMessageThreadProps, PrivateMessageThreadSkeleton, PrivateMessageThreadItem, PrivateMessageThreadItemProps, PrivateMessageThreadItemSkeleton, PrivateMessageSnippetItem, PrivateMessageSnippetItemProps, PrivateMessageSnippetItemSkeleton, PrivateMessageEditor, PrivateMessageEditorProps, PrivateMessageEditorSkeleton, PrivateMessageSnippets, PrivateMessageSnippetsProps, PrivateMessageSnippetsSkeleton, PrivateMessageComponent, PrivateMessageComponentProps, PrivateMessageComponentSkeleton, PrivateMessageSettingsIconButton, PrivateMessageSettingsIconButtonProps, ToastNotifications, ToastNotificationsProps, ToastNotificationsSkeleton, SnippetNotifications, SnippetNotificationsProps, SnippetNotificationsSkeleton, SearchAutocomplete, SearchAutocompleteProps, SearchDialog, SearchDialogProps, Widget, WidgetProps, SCFeedWidgetType, SCFeedObjectTemplateType, SCCommentsOrderBy, SCFeedObjectActivitiesType, SCMediaObjectType, SCMediaChunkType, SCNotificationObjectTemplateType, SCBroadcastMessageTemplateType, ChangeGroupCover, ChangeGroupCoverProps, ChangeGroupPicture, ChangeGroupPictureProps, GroupHeader, GroupHeaderProps, GroupHeaderSkeleton, GroupMembersButton, GroupMembersButtonProps, CreateGroupButton, CreateGroupButtonProps, EditGroupButton, EditGroupButtonProps, GroupInviteButton, GroupInviteButtonProps, GroupInfoWidget, GroupInfoWidgetProps, GroupInfoWidgetSkeleton, Group, GroupProps, GroupSubscribeButton, GroupSubscribeButtonProps, GroupMembersWidget, GroupMembersWidgetProps, GroupMembersWidgetSkeleton, GroupRequestsWidget, GroupRequestsWidgetProps, GroupRequestsWidgetSkeleton, Groups, GroupsProps, GroupsSkeleton, GroupForm, GroupFormProps, HiddenPlaceholder, UrlTextField, UsernameTextField, EmailTextField, PasswordTextField, PhoneTextField, MetadataField, InfiniteScroll, StickyBox, useStickyBox, StickyBoxProps, StickyBoxComponent, UseStickyBoxProps, TagChip, TagChipProps, UserDeletedSnackBar, UserDeletedSnackBarProps, UserAvatar, UserAvatarProps, Lightbox, CentralProgress, ConfirmDialog, LanguageSwitcher, MediaChunkUploader, MediaChunkUploaderProps, File, Link, Share, EditMediaProps, MEDIA_TYPE_EMBED, FACEBOOK_SHARE, TWITTER_SHARE, LINKEDIN_SHARE, DEFAULT_PRELOAD_OFFSET_VIEWPORT, MIN_PRELOAD_OFFSET_VIEWPORT, MAX_PRELOAD_OFFSET_VIEWPORT, ConsentSolution, ConsentSolutionProps, ConsentSolutionSkeleton, ConsentSolutionButton, ConsentSolutionButtonProps, LEGAL_POLICIES, DEFAULT_FIELDS, DEFAULT_PAGINATION_QUERY_PARAM_NAME, DEFAULT_PAGINATION_OFFSET, DEFAULT_PAGINATION_LIMIT, DEFAULT_WIDGETS_NUMBER, PollSuggestionWidget, PollSuggestionWidgetProps, Incubator, IncubatorSubscribeButton, IncubatorSubscribeButtonProps, IncubatorProps, IncubatorListWidget, IncubatorListWidgetProps, IncubatorDetail, IncubatorDetailProps, IncubatorSuggestionWidget, IncubatorSuggestionWidgetProps, ContributionUtils, bytesToSize, getUnseenNotification, getUnseenNotificationCounter, MessageUploaderUtils, getRelativeTime, Footer, FooterProps, FooterSkeleton, BaseItem, BaseItemProps, BaseDialog, BaseDialogProps, GroupSettingsIconButton, GroupSettingsIconButtonProps };

package/lib/cjs/index.js

@@ -2,8 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GenericSkeleton = exports.FeedUpdatesWidgetSkeleton = exports.FeedUpdatesWidget = exports.FeedObjectMediaPreview = exports.FeedObjectSkeleton = exports.FeedObject = exports.ConnectionUserButton = exports.FollowUserButton = exports.CategoryFollowButton = exports.FeedSkeleton = exports.Feed = exports.FriendshipUserButton = exports.EditorSkeleton = exports.Editor = exports.ComposerIconButton = exports.Composer = exports.ChangePicture = exports.ChangeCover = exports.CategoriesSuggestionWidgetSkeleton = exports.CategoriesSuggestionWidget = exports.CategoriesPopularWidgetSkeleton = exports.CategoriesPopularWidget = exports.UserFollowedCategoriesWidgetSkeleton = exports.UserFollowedCategoriesWidget = exports.CategoriesSkeleton = exports.Categories = exports.CategoryHeaderSkeleton = exports.CategoryHeader = exports.CategoryFollowersButton = exports.CategoryAutocomplete = exports.CategorySkeleton = exports.Category = exports.BroadcastMessagesSkeleton = exports.BroadcastMessages = exports.BottomNavigation = exports.NavigationMenuContent = exports.NavigationMenuIconButton = exports.NavigationToolbarSkeleton = exports.NavigationToolbar = exports.NavigationToolbarMobileSkeleton = exports.NavigationToolbarMobile = exports.NavigationSettingsIconButton = exports.AccountChangeMailValidation = exports.AccountVerify = exports.AccountReset = exports.AccountRecover = exports.AccountDeleteButton = exports.AccountDelete = exports.AccountDataPortabilityButton = exports.AccountDataPortability = void 0;
 exports.UserConnectionsRequestsSentWidget = exports.UserConnectionsRequestsWidgetSkeleton = exports.UserConnectionsRequestsWidget = exports.UserConnectionsWidgetSkeleton = exports.UserConnectionsWidget = exports.UserFollowersWidgetSkeleton = exports.UserFollowersWidget = exports.UserFollowedUsersWidgetSkeleton = exports.UserFollowedUsersWidget = exports.UserProfileEditSectionAccount = exports.UserProfileEditSectionSettings = exports.UserProfileEditSectionPublicInfo = exports.UserProfileEditSkeleton = exports.UserProfileEdit = exports.SCUserProfileSettings = exports.SCUserProfileFields = exports.UserProfileBlocked = exports.UserInfoSkeleton = exports.UserInfo = exports.UserInfoDialog = exports.UserProfileHeaderSkeleton = exports.UserProfileHeader = exports.UserCounters = exports.UserActionIconButton = exports.RelatedFeedObjectsWidgetSkeleton = exports.RelatedFeedObjectsWidget = exports.CategoryTrendingPeopleWidgetSkeleton = exports.CategoryTrendingUsersWidget = exports.CategoryTrendingFeedWidgetSkeleton = exports.CategoryTrendingFeedWidget = exports.LoyaltyProgramWidgetSkeleton = exports.LoyaltyProgramWidget = exports.LocationAutocomplete = exports.PlatformWidgetSkeleton = exports.PlatformWidget = exports.UserSuggestionWidgetSkeleton = exports.UserSuggestionWidget = exports.NotificationSkeleton = exports.Notification = exports.InlineComposerWidgetSkeleton = exports.InlineComposerWidget = exports.ReplyComment = exports.CommentsFeedObjectSkeleton = exports.CommentsFeedObject = exports.CommentObjectReply = exports.CommentObjectSkeleton = exports.CommentsObjectSkeleton = exports.CommentsObject = exports.CommentObject = exports.AvatarGroupSkeleton = void 0;
-exports.UsernameTextField = exports.UrlTextField = exports.GroupRequestsWidgetSkeleton = exports.GroupRequestsWidget = exports.GroupMembersWidgetSkeleton = exports.GroupMembersWidget = exports.GroupSubscribeButton = exports.Group = exports.GroupInfoWidgetSkeleton = exports.GroupInfoWidget = exports.GroupInviteButton = exports.CreateButton = exports.CreateGroupButton = exports.GroupMembersButton = exports.GroupHeaderSkeleton = exports.GroupHeader = exports.ChangeGroupPicture = exports.ChangeGroupCover = exports.SCBroadcastMessageTemplateType = exports.SCNotificationObjectTemplateType = exports.SCFeedObjectActivitiesType = exports.SCCommentsOrderBy = exports.SCFeedObjectTemplateType = exports.Widget = exports.SearchDialog = exports.SearchAutocomplete = exports.SnippetNotificationsSkeleton = exports.SnippetNotifications = exports.ToastNotificationsSkeleton = exports.ToastNotifications = exports.PrivateMessageSettingsIconButton = exports.PrivateMessageComponentSkeleton = exports.PrivateMessageComponent = exports.PrivateMessageSnippetsSkeleton = exports.PrivateMessageSnippets = exports.PrivateMessageEditorSkeleton = exports.PrivateMessageEditor = exports.PrivateMessageSnippetItemSkeleton = exports.PrivateMessageSnippetItem = exports.PrivateMessageThreadItemSkeleton = exports.PrivateMessageThreadItem = exports.PrivateMessageThreadSkeleton = exports.PrivateMessageThread = exports.UserSkeleton = exports.User = exports.CustomAdvSkeleton = exports.CustomAdv = exports.SCUserSocialAssociations = exports.UserSocialAssociation = exports.UserConnectionsRequestsSentWidgetSkeleton = void 0;
-exports.BaseDialog = exports.BaseItem = exports.FooterSkeleton = exports.Footer = exports.getRelativeTime = exports.MessageUploaderUtils = exports.getUnseenNotificationCounter = exports.getUnseenNotification = exports.bytesToSize = exports.ContributionUtils = exports.IncubatorSuggestionWidget = exports.IncubatorDetail = exports.IncubatorListWidget = exports.IncubatorSubscribeButton = exports.Incubator = exports.PollSuggestionWidget = exports.DEFAULT_WIDGETS_NUMBER = exports.DEFAULT_PAGINATION_LIMIT = exports.DEFAULT_PAGINATION_OFFSET = exports.DEFAULT_PAGINATION_QUERY_PARAM_NAME = exports.DEFAULT_FIELDS = exports.LEGAL_POLICIES = exports.ConsentSolutionButton = exports.ConsentSolutionSkeleton = exports.ConsentSolution = exports.MAX_PRELOAD_OFFSET_VIEWPORT = exports.MIN_PRELOAD_OFFSET_VIEWPORT = exports.DEFAULT_PRELOAD_OFFSET_VIEWPORT = exports.LINKEDIN_SHARE = exports.TWITTER_SHARE = exports.FACEBOOK_SHARE = exports.MEDIA_TYPE_EMBED = exports.Share = exports.Link = exports.File = exports.MediaChunkUploader = exports.LanguageSwitcher = exports.ConfirmDialog = exports.CentralProgress = exports.Lightbox = exports.UserAvatar = exports.UserDeletedSnackBar = exports.TagChip = exports.useStickyBox = exports.StickyBox = exports.InfiniteScroll = exports.MetadataField = exports.PhoneTextField = exports.PasswordTextField = exports.EmailTextField = void 0;
+exports.GroupsSkeleton = exports.Groups = exports.GroupRequestsWidgetSkeleton = exports.GroupRequestsWidget = exports.GroupMembersWidgetSkeleton = exports.GroupMembersWidget = exports.GroupSubscribeButton = exports.Group = exports.GroupInfoWidgetSkeleton = exports.GroupInfoWidget = exports.GroupInviteButton = exports.EditGroupButton = exports.CreateGroupButton = exports.GroupMembersButton = exports.GroupHeaderSkeleton = exports.GroupHeader = exports.ChangeGroupPicture = exports.ChangeGroupCover = exports.SCBroadcastMessageTemplateType = exports.SCNotificationObjectTemplateType = exports.SCFeedObjectActivitiesType = exports.SCCommentsOrderBy = exports.SCFeedObjectTemplateType = exports.Widget = exports.SearchDialog = exports.SearchAutocomplete = exports.SnippetNotificationsSkeleton = exports.SnippetNotifications = exports.ToastNotificationsSkeleton = exports.ToastNotifications = exports.PrivateMessageSettingsIconButton = exports.PrivateMessageComponentSkeleton = exports.PrivateMessageComponent = exports.PrivateMessageSnippetsSkeleton = exports.PrivateMessageSnippets = exports.PrivateMessageEditorSkeleton = exports.PrivateMessageEditor = exports.PrivateMessageSnippetItemSkeleton = exports.PrivateMessageSnippetItem = exports.PrivateMessageThreadItemSkeleton = exports.PrivateMessageThreadItem = exports.PrivateMessageThreadSkeleton = exports.PrivateMessageThread = exports.UserSkeleton = exports.User = exports.CustomAdvSkeleton = exports.CustomAdv = exports.SCUserSocialAssociations = exports.UserSocialAssociation = exports.UserConnectionsRequestsSentWidgetSkeleton = void 0;
+exports.getRelativeTime = exports.MessageUploaderUtils = exports.getUnseenNotificationCounter = exports.getUnseenNotification = exports.bytesToSize = exports.ContributionUtils = exports.IncubatorSuggestionWidget = exports.IncubatorDetail = exports.IncubatorListWidget = exports.IncubatorSubscribeButton = exports.Incubator = exports.PollSuggestionWidget = exports.DEFAULT_WIDGETS_NUMBER = exports.DEFAULT_PAGINATION_LIMIT = exports.DEFAULT_PAGINATION_OFFSET = exports.DEFAULT_PAGINATION_QUERY_PARAM_NAME = exports.DEFAULT_FIELDS = exports.LEGAL_POLICIES = exports.ConsentSolutionButton = exports.ConsentSolutionSkeleton = exports.ConsentSolution = exports.MAX_PRELOAD_OFFSET_VIEWPORT = exports.MIN_PRELOAD_OFFSET_VIEWPORT = exports.DEFAULT_PRELOAD_OFFSET_VIEWPORT = exports.LINKEDIN_SHARE = exports.TWITTER_SHARE = exports.FACEBOOK_SHARE = exports.MEDIA_TYPE_EMBED = exports.Share = exports.Link = exports.File = exports.MediaChunkUploader = exports.LanguageSwitcher = exports.ConfirmDialog = exports.CentralProgress = exports.Lightbox = exports.UserAvatar = exports.UserDeletedSnackBar = exports.TagChip = exports.useStickyBox = exports.StickyBox = exports.InfiniteScroll = exports.MetadataField = exports.PhoneTextField = exports.PasswordTextField = exports.EmailTextField = exports.UsernameTextField = exports.UrlTextField = exports.HiddenPlaceholder = exports.GroupForm = void 0;
+exports.GroupSettingsIconButton = exports.BaseDialog = exports.BaseItem = exports.FooterSkeleton = exports.Footer = void 0;
 const tslib_1 = require("tslib");
 /**
  * Components
@@ -221,6 +222,8 @@ const Media_1 = require("./shared/Media");
 Object.defineProperty(exports, "File", { enumerable: true, get: function () { return Media_1.File; } });
 Object.defineProperty(exports, "Link", { enumerable: true, get: function () { return Media_1.Link; } });
 Object.defineProperty(exports, "Share", { enumerable: true, get: function () { return Media_1.Share; } });
+const HiddenPlaceholder_1 = tslib_1.__importDefault(require("./shared/HiddenPlaceholder"));
+exports.HiddenPlaceholder = HiddenPlaceholder_1.default;
 const UrlTextField_1 = tslib_1.__importDefault(require("./shared/UrlTextField"));
 exports.UrlTextField = UrlTextField_1.default;
 const UsernameTextField_1 = tslib_1.__importDefault(require("./shared/UsernameTextField"));
@@ -284,8 +287,8 @@ const GroupMembersButton_1 = tslib_1.__importDefault(require("./components/Group
 exports.GroupMembersButton = GroupMembersButton_1.default;
 const CreateGroupButton_1 = tslib_1.__importDefault(require("./components/CreateGroupButton"));
 exports.CreateGroupButton = CreateGroupButton_1.default;
-const CreateGroupButton_2 = tslib_1.__importDefault(require("./components/CreateGroupButton"));
-exports.CreateButton = CreateGroupButton_2.default;
+const EditGroupButton_1 = tslib_1.__importDefault(require("./components/EditGroupButton"));
+exports.EditGroupButton = EditGroupButton_1.default;
 const GroupInviteButton_1 = tslib_1.__importDefault(require("./components/GroupInviteButton"));
 exports.GroupInviteButton = GroupInviteButton_1.default;
 const GroupInfoWidget_1 = tslib_1.__importStar(require("./components/GroupInfoWidget"));
@@ -301,6 +304,13 @@ Object.defineProperty(exports, "GroupMembersWidgetSkeleton", { enumerable: true,
 const GroupRequestsWidget_1 = tslib_1.__importStar(require("./components/GroupRequestsWidget"));
 exports.GroupRequestsWidget = GroupRequestsWidget_1.default;
 Object.defineProperty(exports, "GroupRequestsWidgetSkeleton", { enumerable: true, get: function () { return GroupRequestsWidget_1.GroupRequestsWidgetSkeleton; } });
+const Groups_1 = tslib_1.__importStar(require("./components/Groups"));
+exports.Groups = Groups_1.default;
+Object.defineProperty(exports, "GroupsSkeleton", { enumerable: true, get: function () { return Groups_1.GroupsSkeleton; } });
+const GroupForm_1 = tslib_1.__importDefault(require("./components/GroupForm"));
+exports.GroupForm = GroupForm_1.default;
+const GroupSettingsIconButton_1 = tslib_1.__importDefault(require("./components/GroupSettingsIconButton"));
+exports.GroupSettingsIconButton = GroupSettingsIconButton_1.default;
 /**
  * Constants
  */

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

@@ -12,7 +12,7 @@ const classes = {
     root: `${PREFIX}-root`,
     ios: `${PREFIX}-ios`,
     action: `${PREFIX}-action`,
-    composer: `${PREFIX}-composer`,
+    composer: `${PREFIX}-composer`
 };
 const Root = styled(MuiBottomNavigation, {
     name: PREFIX,
@@ -60,6 +60,7 @@ export default function BottomNavigation(inProps) {
     const { preferences, features } = useSCPreferences();
     // MEMO
     const privateMessagingEnabled = useMemo(() => features.includes(SCFeatureName.PRIVATE_MESSAGING), [features]);
+    const groupsEnabled = useMemo(() => features.includes(SCFeatureName.GROUPING), [features]);
     const isIOS = useMemo(() => iOS(), []);
     // RENDER
     return (React.createElement(Root, Object.assign({ className: classNames(className, classes.root, { [classes.ios]: isIOS }) }, rest), children
@@ -69,6 +70,7 @@ export default function BottomNavigation(inProps) {
             (scUserContext.user || preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY].value) &&
                 preferences[SCPreferences.CONFIGURATIONS_EXPLORE_STREAM_ENABLED].value ? (React.createElement(BottomNavigationAction, { key: "explore", className: classes.action, component: Link, to: scRoutingContext.url(SCRoutes.EXPLORE_ROUTE_NAME, {}), value: scRoutingContext.url(SCRoutes.EXPLORE_ROUTE_NAME, {}), icon: React.createElement(Icon, null, "explore") })) : null,
             React.createElement(BottomNavigationAction, { key: "composer", className: classNames(classes.composer, classes.action), component: ComposerIconButton, disableRipple: true }),
+            groupsEnabled && scUserContext.user ? (React.createElement(BottomNavigationAction, { key: "groups", className: classes.action, component: Link, to: scRoutingContext.url(SCRoutes.GROUPS_ROUTE_NAME, {}), value: scRoutingContext.url(SCRoutes.GROUPS_ROUTE_NAME, {}), icon: React.createElement(Icon, null, "groups") })) : null,
             scUserContext.user ? (React.createElement(BottomNavigationAction, { key: "notifications", className: classes.action, component: Link, to: scRoutingContext.url(SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}), value: scRoutingContext.url(SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}), icon: React.createElement(Badge, { badgeContent: scUserContext.user.unseen_notification_banners_counter + scUserContext.user.unseen_interactions_counter, color: "secondary" },
                     React.createElement(Icon, null, "notifications_active")) })) : null,
             privateMessagingEnabled && scUserContext.user ? (React.createElement(BottomNavigationAction, { key: "messages", className: classes.action, component: Link, to: scRoutingContext.url(SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, {}), value: scRoutingContext.url(SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, {}), icon: React.createElement(Badge, { badgeContent: 0, color: "secondary" },

package/lib/esm/components/ChangeGroupCover/ChangeGroupCover.js

@@ -23,6 +23,10 @@ const messages = defineMessages({
     errorLoadImage: {
         id: 'ui.changeGroupCover.button.change.alertErrorImage',
         defaultMessage: 'ui.changeGroupCover.button.change.alertErrorImage'
+    },
+    errorImageSize: {
+        id: 'ui.changeGroupCover.alert',
+        defaultMessage: 'ui.changeGroupCover.alert'
     }
 });
 /**
@@ -73,7 +77,26 @@ export default function ChangeGroupCover(inProps) {
      */
     const handleUpload = (event) => {
         fileInput = event.target.files[0];
-        isCreationMode ? onChange && onChange(fileInput) : handleSave();
+        if (fileInput) {
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                const img = new Image();
+                img.onload = () => {
+                    if (img.width < 1920) {
+                        setAlert(intl.formatMessage(messages.errorImageSize));
+                    }
+                    else {
+                        isCreationMode ? onChange && onChange(fileInput) : handleSave();
+                    }
+                };
+                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                // @ts-ignore
+                img.src = e.target.result;
+            };
+            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+            // @ts-ignore
+            reader.readAsDataURL(fileInput);
+        }
     };
     /**
      * Handles cover saving after upload action

package/lib/esm/components/ChangeGroupPicture/ChangeGroupPicture.js

@@ -14,8 +14,8 @@ import { defineMessages, useIntl } from 'react-intl';
 import { LoadingButton } from '@mui/lab';
 const messages = defineMessages({
     errorLoadImage: {
-        id: 'ui.changeGroupCover.button.change.alertErrorImage',
-        defaultMessage: 'ui.changeGroupCover.button.change.alertErrorImage'
+        id: 'ui.changeGroupPicture.alert',
+        defaultMessage: 'ui.changeGroupPicture.alert'
     }
 });
 const classes = {
@@ -57,12 +57,12 @@ export default function ChangeGroupPicture(inProps) {
         name: PREFIX
     });
     const { groupId, onChange, autoHide, className, isCreationMode = false } = props, rest = __rest(props, ["groupId", "onChange", "autoHide", "className", "isCreationMode"]);
+    //CONTEXT
+    const scUserContext = useContext(SCUserContext);
     //STATE
+    let fileInput = useRef(null);
     const [loading, setLoading] = useState(false);
     const [alert, setAlert] = useState(null);
-    let fileInput = useRef(null);
-    //CONTEXT
-    const scUserContext = useContext(SCUserContext);
     // INTL
     const intl = useIntl();
     // Anonymous
@@ -73,26 +73,47 @@ export default function ChangeGroupPicture(inProps) {
      * Handles avatar upload
      * @param event
      */
-    function handleUpload(event) {
+    const handleUpload = (event) => {
         fileInput = event.target.files[0];
-        isCreationMode ? onChange && onChange(fileInput) : handleSave();
-    }
+        if (fileInput) {
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                const img = new Image();
+                img.onload = () => {
+                    if (img.width < 600 && img.height < 600) {
+                        setAlert(intl.formatMessage(messages.errorLoadImage));
+                    }
+                    else {
+                        isCreationMode ? onChange && onChange(fileInput) : handleSave();
+                    }
+                };
+                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                // @ts-ignore
+                img.src = e.target.result;
+            };
+            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+            // @ts-ignore
+            reader.readAsDataURL(fileInput);
+        }
+    };
     /**
      * Performs save avatar after upload
      */
     function handleSave() {
         setLoading(true);
         const formData = new FormData();
+        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+        // @ts-ignore
         formData.append('image_original', fileInput);
         GroupService.changeGroupAvatarOrCover(groupId, formData, { headers: { 'Content-Type': 'multipart/form-data' } })
             .then((data) => {
+            onChange && onChange(data.image_big);
             setLoading(false);
-            onChange && onChange(data.image_bigger);
         })
             .catch((error) => {
-            setAlert(intl.formatMessage(messages.errorLoadImage));
-            setLoading(false);
             Logger.error(SCOPE_SC_UI, error);
+            setLoading(false);
+            setAlert(intl.formatMessage(messages.errorLoadImage));
         });
     }
     /**

package/lib/esm/components/Composer/Attributes/Attributes.d.ts

@@ -16,7 +16,7 @@ export interface AttributesProps extends Omit<BoxProps, 'value' | 'onChange' | '
      * @param value
      * @default empty object
      */
-    onClick?: (attribute: 'categories' | 'addressing' | 'location') => void;
+    onClick?: (attribute: 'categories' | 'group' | 'addressing' | 'location') => void;
 }
 declare const _default: (props: AttributesProps) => JSX.Element;
 export default _default;

package/lib/esm/components/Composer/Attributes/Attributes.js

@@ -13,7 +13,7 @@ const Root = styled(Box, {
     slot: 'AttributesRoot'
 })(() => ({}));
 export default (props) => {
-    var _a, _b;
+    var _a, _b, _c;
     // PROPS
     const { className = null, value = null, onChange = null, onClick = null } = props;
     // HANDLERS
@@ -23,6 +23,12 @@ export default (props) => {
     const handleClickCategory = useCallback(() => {
         onClick && onClick('categories');
     }, [onClick]);
+    const handleDeleteGroup = useCallback(() => {
+        onChange && onChange(Object.assign(Object.assign({}, value), { group: null }));
+    }, [value, onChange]);
+    const handleClickGroup = useCallback(() => {
+        onClick && onClick('group');
+    }, [onClick]);
     const handleDeleteTag = useCallback((id) => () => {
         onChange && onChange(Object.assign(Object.assign({}, value), { addressing: value.addressing.filter((tag) => tag.id !== id) }));
     }, [value, onChange]);
@@ -38,7 +44,8 @@ export default (props) => {
     return (React.createElement(Root, { className: classNames(classes.root, className) },
         ((_a = value === null || value === void 0 ? void 0 : value.categories) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
             (value === null || value === void 0 ? void 0 : value.categories.map((c) => (React.createElement(Chip, { key: c.id, label: c.name, onDelete: handleDeleteCategory(c.id), icon: React.createElement(Icon, null, "category"), onClick: handleClickCategory })))),
-        ((_b = value === null || value === void 0 ? void 0 : value.addressing) === null || _b === void 0 ? void 0 : _b.length) > 0 &&
+        (value === null || value === void 0 ? void 0 : value.group) && (React.createElement(Chip, { key: value === null || value === void 0 ? void 0 : value.group.id, label: value === null || value === void 0 ? void 0 : value.group.name, onDelete: handleDeleteGroup, icon: React.createElement(Icon, null, "groups"), onClick: handleClickGroup, disabled: !((_b = value === null || value === void 0 ? void 0 : value.group) === null || _b === void 0 ? void 0 : _b.subscription_status) })),
+        ((_c = value === null || value === void 0 ? void 0 : value.addressing) === null || _c === void 0 ? void 0 : _c.length) > 0 &&
             (value === null || value === void 0 ? void 0 : value.addressing.map((t) => (React.createElement(TagChip, { key: t.id, tag: t, onDelete: handleDeleteTag(t.id), icon: React.createElement(Icon, null, "label"), onClick: handleClickTag })))),
         (value === null || value === void 0 ? void 0 : value.location) && (React.createElement(Chip, { icon: React.createElement(Icon, null, "add_location_alt"), label: value === null || value === void 0 ? void 0 : value.location.location, onDelete: handleDeleteLocation, onClick: handleClickLocation }))));
 };

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

@@ -1,5 +1,5 @@
 import { SyntheticEvent } from 'react';
-import { SCCategoryType, SCContributionType, SCFeedDiscussionType, SCFeedPostType, SCFeedStatusType, SCMediaType, SCPollType, SCTagType } from '@selfcommunity/types';
+import { SCCategoryType, SCContributionType, SCFeedDiscussionType, SCFeedPostType, SCFeedStatusType, SCGroupType, SCMediaType, SCPollType, SCTagType } from '@selfcommunity/types';
 import { DialogProps } from '@mui/material';
 import { EditorProps } from '../Editor';
 import { SCMediaObjectType } from '../../types/media';
@@ -27,6 +27,7 @@ export interface ComposerProps extends Omit<DialogProps, 'defaultValue' | 'scrol
         title?: string;
         text?: string;
         categories?: SCCategoryType[];
+        group?: SCGroupType;
         audience?: string;
         addressing?: SCTagType[];
         medias?: SCMediaType[];

package/lib/esm/components/Composer/Composer.js

@@ -57,7 +57,9 @@ const COMPOSER_INITIAL_STATE = {
     html: '',
     htmlError: null,
     categories: [],
+    group: null,
     categoriesError: null,
+    groupsError: null,
     addressing: null,
     addressingError: null,
     medias: [],
@@ -131,7 +133,7 @@ export default function Composer(inProps) {
     const [isSubmitting, setIsSubmitting] = useState(false);
     const [layer, setLayer] = useState();
     const [state, dispatch] = useReducer(reducer, Object.assign(Object.assign(Object.assign({}, COMPOSER_INITIAL_STATE), defaultValue), { key: random() }));
-    const { key, id, type, title, titleError, html, categories, addressing, audience, medias, poll, pollError, location, error } = state;
+    const { key, id, type, title, titleError, html, categories, group, addressing, audience, medias, poll, pollError, location, error } = state;
     const destructureFeedObject = (_feedObject) => {
         if (_feedObject.type === SCContributionType.POST) {
             _feedObject = _feedObject;
@@ -151,6 +153,7 @@ export default function Composer(inProps) {
                     title: _feedObject.title,
                     html: _feedObject.html,
                     categories: _feedObject.categories,
+                    group: _feedObject.group,
                     addressing: _feedObject.addressing,
                     medias: _feedObject.medias,
                     poll: _feedObject.poll,
@@ -302,18 +305,23 @@ export default function Composer(inProps) {
         }
     }), [handleAddLayer, handleRemoveLayer, handleChangeCategories, categories]);
     const handleChangeAudience = useCallback((value) => {
-        dispatch({ type: 'addressing', value });
+        if (group || typeof value === 'object') {
+            dispatch({ type: 'group', value });
+        }
+        else {
+            dispatch({ type: 'addressing', value });
+        }
         setLayer(null);
-    }, []);
+    }, [group]);
     const handleAddAudienceLayer = useCallback(() => handleAddLayer({
         name: 'audience',
         Component: AudienceLayer,
         ComponentProps: {
             onClose: handleRemoveLayer,
             onSave: handleChangeAudience,
-            defaultValue: addressing
+            defaultValue: group || typeof addressing === 'object' ? group : addressing
         }
-    }), [handleAddLayer, handleRemoveLayer, handleChangeAudience, addressing]);
+    }), [handleAddLayer, handleRemoveLayer, handleChangeAudience, addressing, group]);
     const handleChangeLocation = useCallback((value) => {
         dispatch({ type: 'location', value });
         setLayer(null);
@@ -404,6 +412,9 @@ export default function Composer(inProps) {
         if (features.includes(SCFeatureName.TAGGING) && addressing !== null) {
             data.addressing = addressing.map((t) => t.id);
         }
+        if (features.includes(SCFeatureName.GROUPING) && group !== null) {
+            data.group = group.id;
+        }
         setIsSubmitting(true);
         // Finding right url
         const _type = type === COMPOSER_TYPE_POLL ? SCContributionType.POST : type;
@@ -431,7 +442,7 @@ export default function Composer(inProps) {
             dispatch({ type: 'multiple', value: formatHttpErrorCode(error) });
         })
             .then(() => setIsSubmitting(false));
-    }, [scUserContext.user, feedObjectType, id, type, title, html, categories, addressing, audience, medias, poll, location, hasPoll]);
+    }, [scUserContext.user, feedObjectType, id, type, title, html, categories, group, addressing, audience, medias, poll, location, hasPoll]);
     //edited here
     const handleClose = useCallback((event, reason) => {
         if (unloadRef.current) {
@@ -486,13 +497,29 @@ export default function Composer(inProps) {
         }
         switch (type) {
             case COMPOSER_TYPE_POLL:
-                return (React.createElement(ContentPoll, { key: key, onChange: handleChangePoll, value: { html, categories, addressing, medias, poll, location }, error: pollError, disabled: isSubmitting }));
+                return (React.createElement(ContentPoll, { key: key, onChange: handleChangePoll, value: { html, group, addressing, medias, poll, location }, error: pollError, disabled: isSubmitting }));
             case SCContributionType.DISCUSSION:
-                return (React.createElement(ContentDiscussion, { key: key, value: { title, html, categories, addressing, medias, poll, location }, error: { titleError, error }, onChange: handleChangeDiscussion, disabled: isSubmitting, EditorProps: Object.assign({ toolbar: true, uploadImage: true }, EditorProps) }));
+                return (React.createElement(ContentDiscussion, { key: key, value: { title, html, categories, group, addressing, medias, poll, location }, error: { titleError, error }, onChange: handleChangeDiscussion, disabled: isSubmitting, EditorProps: Object.assign({ toolbar: true, uploadImage: true }, EditorProps) }));
             default:
-                return (React.createElement(ContentPost, { key: key, value: { html, categories, addressing, medias, poll, location }, error: { error }, onChange: handleChangePost, disabled: isSubmitting, EditorProps: Object.assign({ toolbar: false, uploadImage: false }, EditorProps) }));
+                return (React.createElement(ContentPost, { key: key, value: { html, categories, group, addressing, medias, poll, location }, error: { error }, onChange: handleChangePost, disabled: isSubmitting, EditorProps: Object.assign({ toolbar: false, uploadImage: false }, EditorProps) }));
         }
-    }, [key, type, title, html, categories, addressing, medias, poll, pollError, location, error, handleChangePoll, handleChangePost, isSubmitting]);
+    }, [
+        key,
+        type,
+        title,
+        html,
+        categories,
+        group,
+        addressing,
+        medias,
+        poll,
+        pollError,
+        location,
+        error,
+        handleChangePoll,
+        handleChangePost,
+        isSubmitting
+    ]);
     if (!scUserContext.user && !(scUserContext.loading && open)) {
         return null;
     }
@@ -504,7 +531,7 @@ export default function Composer(inProps) {
                 React.createElement(LoadingButton, { size: "small", type: "submit", color: "secondary", variant: "contained", disabled: !canSubmit, loading: isSubmitting },
                     React.createElement(FormattedMessage, { id: "ui.composer.submit", defaultMessage: "ui.composer.submit" }))),
             React.createElement(DialogContent, { className: classes.content },
-                React.createElement(Attributes, { value: { categories, addressing, location }, className: classes.attributes, onChange: handleChangeAttributes, onClick: handleClickAttributes }),
+                React.createElement(Attributes, { value: { categories, group, addressing, location }, className: classes.attributes, onChange: handleChangeAttributes, onClick: handleClickAttributes }),
                 content,
                 medias && medias.length > 0 && (React.createElement(Box, { className: classes.medias }, mediaObjectTypes.map((mediaObjectType) => {
                     if (mediaObjectType.previewComponent) {
@@ -524,7 +551,7 @@ export default function Composer(inProps) {
                 }),
                 React.createElement(IconButton, { disabled: isSubmitting, onClick: handleAddCategoryLayer },
                     React.createElement(Icon, null, "category")),
-                React.createElement(IconButton, { disabled: isSubmitting || !features.includes(SCFeatureName.TAGGING), onClick: handleAddAudienceLayer }, addressing === null || addressing.length === 0 ? React.createElement(Icon, null, "public") : React.createElement(Icon, null, "label")),
+                React.createElement(IconButton, { disabled: isSubmitting || !features.includes(SCFeatureName.TAGGING) || Boolean(feedObject === null || feedObject === void 0 ? void 0 : feedObject.group), onClick: handleAddAudienceLayer }, (!group && addressing === null) || (addressing === null || addressing === void 0 ? void 0 : addressing.length) === 0 ? React.createElement(Icon, null, "public") : group ? React.createElement(Icon, null, "groups") : React.createElement(Icon, null, "label")),
                 preferences[SCPreferences.ADDONS_POST_GEOLOCATION_ENABLED].value && (React.createElement(IconButton, { disabled: isSubmitting, onClick: handleAddLocationLayer, color: location !== null ? 'primary' : 'default' },
                     React.createElement(Icon, null, "add_location_alt"))))),
         layer && (React.createElement(LayerTransitionRoot, { className: classes.layerTransitionRoot, in: true, container: dialogRef.current, direction: "left" },