@selfcommunity/react-ui 0.7.55 → 0.8.0-alpha.0

package/lib/cjs/components/Footer/Footer.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const system_1 = require("@mui/system");
 const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
@@ -92,12 +93,8 @@ function Footer(inProps) {
      * Renders root object
      */
     if (loading) {
-        return react_1.default.createElement(Skeleton_1.default, null);
+        return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
     }
-    return (react_1.default.createElement(Root, Object.assign({}, rest, { className: (0, classnames_1.default)(classes.root, className) }),
-        startActions,
-        react_1.default.createElement(material_1.Box, { className: classes.itemList }, (0, utils_1.sortByAttr)(_menu.items, 'order').map((item, index) => (react_1.default.createElement(material_1.Button, { component: react_core_1.Link, key: item.id, className: classes.item, to: item.url, variant: "text" }, item.label)))),
-        endActions,
-        react_1.default.createElement(material_1.Typography, { textAlign: "center", className: classes.copyright, variant: "body2", dangerouslySetInnerHTML: { __html: copyright } })));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({}, rest, { className: (0, classnames_1.default)(classes.root, className) }, { children: [startActions, (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.itemList }, { children: (0, utils_1.sortByAttr)(_menu.items, 'order').map((item, index) => ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ component: react_core_1.Link, className: classes.item, to: item.url, variant: "text" }, { children: item.label }), item.id))) })), endActions, (0, jsx_runtime_1.jsx)(material_1.Typography, { textAlign: "center", className: classes.copyright, variant: "body2", dangerouslySetInnerHTML: { __html: copyright } })] })));
 }
 exports.default = Footer;

package/lib/cjs/components/Footer/Skeleton.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const Skeleton_1 = tslib_1.__importDefault(require("@mui/material/Skeleton"));
@@ -34,8 +34,6 @@ const Root = (0, styles_1.styled)(material_1.Box, {
  *
  */
 function FooterSkeleton(props) {
-    return (react_1.default.createElement(Root, Object.assign({ className: classes.root }, props),
-        react_1.default.createElement(Skeleton_1.default, { animation: "wave", height: 10, style: { marginBottom: 10 } }),
-        react_1.default.createElement(Skeleton_1.default, { animation: "wave", height: 10, width: "60%" })));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, props, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 10, style: { marginBottom: 10 } }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 10, width: "60%" })] })));
 }
 exports.default = FooterSkeleton;

package/lib/cjs/components/FriendshipUserButton/FriendshipUserButton.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const styles_1 = require("@mui/material/styles");
 const types_1 = require("@selfcommunity/types");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
@@ -71,7 +72,7 @@ function FriendshipUserButton(inProps) {
             scContext.settings.handleAnonymousAction();
         }
         else if (react_core_1.UserUtils.isBlocked(scUserContext.user)) {
-            enqueueSnackbar(react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.common.userBlocked", defaultMessage: "ui.common.userBlocked" }), {
+            enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.common.userBlocked", defaultMessage: "ui.common.userBlocked" }), {
                 variant: 'warning',
                 autoHideDuration: 3000
             });
@@ -96,7 +97,7 @@ function FriendshipUserButton(inProps) {
                     setDisabled(true);
                 }
                 else {
-                    enqueueSnackbar(react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.common.actionToUserDeleted", defaultMessage: "ui.common.actionToUserDeleted" }), {
+                    enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.common.actionToUserDeleted", defaultMessage: "ui.common.actionToUserDeleted" }), {
                         variant: 'warning',
                         autoHideDuration: 3000
                     });
@@ -111,16 +112,16 @@ function FriendshipUserButton(inProps) {
         let _status;
         switch (status) {
             case types_1.SCConnectionStatus.CONNECTED:
-                _status = react_1.default.createElement(react_intl_1.FormattedMessage, { defaultMessage: "ui.friendshipUserButton.removeConnection", id: "ui.friendshipUserButton.removeConnection" });
+                _status = (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.friendshipUserButton.removeConnection", id: "ui.friendshipUserButton.removeConnection" });
                 break;
             case types_1.SCConnectionStatus.CONNECTION_REQUEST_SENT:
-                _status = (react_1.default.createElement(react_intl_1.FormattedMessage, { defaultMessage: "ui.friendshipUserButton.cancelConnectionRequest", id: "ui.friendshipUserButton.cancelConnectionRequest" }));
+                _status = ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.friendshipUserButton.cancelConnectionRequest", id: "ui.friendshipUserButton.cancelConnectionRequest" }));
                 break;
             case types_1.SCConnectionStatus.CONNECTION_REQUEST_RECEIVED:
-                _status = react_1.default.createElement(react_intl_1.FormattedMessage, { defaultMessage: "ui.friendshipUserButton.acceptConnection", id: "ui.friendshipUserButton.acceptConnection" });
+                _status = (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.friendshipUserButton.acceptConnection", id: "ui.friendshipUserButton.acceptConnection" });
                 break;
             default:
-                _status = react_1.default.createElement(react_intl_1.FormattedMessage, { defaultMessage: "ui.friendshipUserButton.requestConnection", id: "ui.friendshipUserButton.requestConnection" });
+                _status = (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.friendshipUserButton.requestConnection", id: "ui.friendshipUserButton.requestConnection" });
                 break;
         }
         return _status;
@@ -139,6 +140,6 @@ function FriendshipUserButton(inProps) {
     if (scUserContext.user && scUserContext.user.id === scUser.id) {
         return null;
     }
-    return (react_1.default.createElement(Root, Object.assign({ size: "small", variant: "outlined", disabled: disabled, loading: scUserContext.user ? scConnectionsManager.isLoading(scUser) : null, onClick: handleConnectionStatus, className: (0, classnames_1.default)(classes.root, className) }, rest), getStatus()));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ size: "small", variant: "outlined", disabled: disabled, loading: scUserContext.user ? scConnectionsManager.isLoading(scUser) : null, onClick: handleConnectionStatus, className: (0, classnames_1.default)(classes.root, className) }, rest, { children: getStatus() })));
 }
 exports.default = FriendshipUserButton;

package/lib/cjs/components/Group/Group.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const types_1 = require("@selfcommunity/types");
@@ -89,26 +90,19 @@ function Group(inProps) {
      * @return {JSX.Element}
      */
     function renderAuthenticatedActions() {
-        return (react_1.default.createElement(material_1.Stack, { className: classes.actions, direction: "row", alignItems: "center", justifyContent: "center", spacing: 2 },
-            isGroupAdmin && react_1.default.createElement(material_1.Icon, null, "face"),
-            actionRedirect ? (react_1.default.createElement(material_1.Button, { size: "small", variant: "outlined", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.GROUP_ROUTE_NAME, scGroup) }, scGroup.subscription_status === types_1.SCGroupSubscriptionStatusType.SUBSCRIBED ? (react_1.default.createElement(react_intl_1.FormattedMessage, { defaultMessage: "ui.group.status.enter", id: "ui.group.status.enter" })) : (react_1.default.createElement(react_intl_1.FormattedMessage, { defaultMessage: "ui.group.status.discover", id: "ui.group.status.discover" })))) : (react_1.default.createElement(GroupSubscribeButton_1.default, Object.assign({ group: group, groupId: groupId }, groupSubscribeButtonProps)))));
+        return ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.actions, direction: "row", alignItems: "center", justifyContent: "center", spacing: 2 }, { children: [isGroupAdmin && (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "face" }), actionRedirect ? ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "outlined", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.GROUP_ROUTE_NAME, scGroup) }, { children: scGroup.subscription_status === types_1.SCGroupSubscriptionStatusType.SUBSCRIBED ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.group.status.enter", id: "ui.group.status.enter" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.group.status.discover", id: "ui.group.status.discover" })) }))) : ((0, jsx_runtime_1.jsx)(GroupSubscribeButton_1.default, Object.assign({ group: group, groupId: groupId }, groupSubscribeButtonProps)))] })));
     }
     /**
      * Renders group object
      */
     if (!scGroup) {
-        return react_1.default.createElement(Skeleton_1.default, { elevation: elevation });
+        return (0, jsx_runtime_1.jsx)(Skeleton_1.default, { elevation: elevation });
     }
     /**
      * Renders root object
      */
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(Root, Object.assign({ elevation: elevation }, rest, { className: (0, classnames_1.default)(classes.root, className), ButtonBaseProps: { component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.GROUP_ROUTE_NAME, scGroup) }, image: react_1.default.createElement(material_1.Avatar, { alt: scGroup.name, src: scGroup.image_medium, className: classes.avatar }), primary: react_1.default.createElement(react_1.default.Fragment, null,
-                isMobile
-                    ? (0, string_1.formatCroppedName)(scGroup.name, Group_1.GROUP_NAME_MAX_LENGTH_MOBILE)
-                    : (0, string_1.formatCroppedName)(scGroup.name, Group_1.GROUP_NAME_MAX_LENGTH_DESKTOP),
-                ' ',
-                react_1.default.createElement(material_1.Icon, { className: classes.icon }, (group === null || group === void 0 ? void 0 : group.privacy) === types_1.SCGroupPrivacyType.PRIVATE ? 'private' : 'public')), secondary: `${intl.formatMessage(messages.groupMembers, { total: scGroup.subscribers_counter })}`, actions: hideActions ? null : renderAuthenticatedActions() })),
-        openAlert && react_1.default.createElement(UserDeletedSnackBar_1.default, { open: openAlert, handleClose: () => setOpenAlert(false) })));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ elevation: elevation }, rest, { className: (0, classnames_1.default)(classes.root, className), ButtonBaseProps: { component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.GROUP_ROUTE_NAME, scGroup) }, image: (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: scGroup.name, src: scGroup.image_medium, className: classes.avatar }), primary: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isMobile
+                            ? (0, string_1.formatCroppedName)(scGroup.name, Group_1.GROUP_NAME_MAX_LENGTH_MOBILE)
+                            : (0, string_1.formatCroppedName)(scGroup.name, Group_1.GROUP_NAME_MAX_LENGTH_DESKTOP), ' ', (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ className: classes.icon }, { children: (group === null || group === void 0 ? void 0 : group.privacy) === types_1.SCGroupPrivacyType.PRIVATE ? 'private' : 'public' }))] }), secondary: `${intl.formatMessage(messages.groupMembers, { total: scGroup.subscribers_counter })}`, actions: hideActions ? null : renderAuthenticatedActions() })), openAlert && (0, jsx_runtime_1.jsx)(UserDeletedSnackBar_1.default, { open: openAlert, handleClose: () => setOpenAlert(false) })] }));
 }
 exports.default = Group;

package/lib/cjs/components/Group/Skeleton.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const styles_1 = require("@mui/material/styles");
 const Skeleton_1 = tslib_1.__importDefault(require("@mui/material/Skeleton"));
@@ -36,7 +36,6 @@ const Root = (0, styles_1.styled)(BaseItem_1.default, {
  */
 function GroupSkeleton(props) {
     const theme = (0, material_1.useTheme)();
-    return (react_1.default.createElement(Root, Object.assign({ className: classes.root }, props, { image: react_1.default.createElement(Skeleton_1.default, { animation: "wave", variant: "circular", width: theme.selfcommunity.group.avatar.sizeSmall, height: theme.selfcommunity.group.avatar.sizeSmall }), primary: react_1.default.createElement(Skeleton_1.default, { animation: "wave", height: 10, width: 120, style: { marginBottom: 10 } }), secondary: react_1.default.createElement(Skeleton_1.default, { animation: "wave", height: 10, width: 70, style: { marginBottom: 10 } }), actions: react_1.default.createElement(material_1.Button, { size: "small", variant: "outlined", disabled: true },
-            react_1.default.createElement(Skeleton_1.default, { animation: "wave", height: 10, width: 30, style: { marginTop: 5, marginBottom: 5 } })) })));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, props, { image: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", variant: "circular", width: theme.selfcommunity.group.avatar.sizeSmall, height: theme.selfcommunity.group.avatar.sizeSmall }), primary: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 10, width: 120, style: { marginBottom: 10 } }), secondary: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 10, width: 70, style: { marginBottom: 10 } }), actions: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "outlined", disabled: true }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 10, width: 30, style: { marginTop: 5, marginBottom: 5 } }) })) })));
 }
 exports.default = GroupSkeleton;

package/lib/cjs/components/GroupAutocomplete/GroupAutocomplete.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importStar(require("react"));
 const react_intl_1 = require("react-intl");
 const Autocomplete_1 = tslib_1.__importDefault(require("@mui/material/Autocomplete"));
@@ -50,7 +51,7 @@ const GroupAutocomplete = (inProps) => {
     // Props
     const { onChange, defaultValue = null, disabled = false, TextFieldProps = {
         variant: 'outlined',
-        label: react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupAutocomplete.label", defaultMessage: "ui.groupAutocomplete.label" })
+        label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupAutocomplete.label", defaultMessage: "ui.groupAutocomplete.label" })
     } } = props, rest = tslib_1.__rest(props, ["onChange", "defaultValue", "disabled", "TextFieldProps"]);
     // State
     const [open, setOpen] = (0, react_1.useState)(false);
@@ -79,7 +80,7 @@ const GroupAutocomplete = (inProps) => {
         setValue(value);
     };
     // Render
-    return (react_1.default.createElement(Root, Object.assign({ className: classes.root, open: open, onOpen: handleOpen, onClose: handleClose, options: groups || [], getOptionLabel: (option) => option.name || '', value: value, selectOnFocus: true, clearOnBlur: true, blurOnSelect: true, handleHomeEndKeys: true, clearIcon: null, disabled: disabled || isLoading, noOptionsText: react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupAutocomplete.empty", defaultMessage: "ui.groupAutocomplete.empty" }), onChange: handleChange, isOptionEqualToValue: (option, value) => value.id === option.id, 
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root, open: open, onOpen: handleOpen, onClose: handleClose, options: groups || [], getOptionLabel: (option) => option.name || '', value: value, selectOnFocus: true, clearOnBlur: true, blurOnSelect: true, handleHomeEndKeys: true, clearIcon: null, disabled: disabled || isLoading, noOptionsText: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupAutocomplete.empty", defaultMessage: "ui.groupAutocomplete.empty" }), onChange: handleChange, isOptionEqualToValue: (option, value) => value.id === option.id, 
         // renderTags={(value, getTagProps) => {
         //   return value.map((option: any, index) => (
         //     <Chip key={option.id} id={option.id} label={option.name} color={option.color} {...getTagProps({index})} />
@@ -88,13 +89,9 @@ const GroupAutocomplete = (inProps) => {
         renderOption: (props, option, { inputValue }) => {
             const matches = (0, match_1.default)(option.name, inputValue);
             const parts = (0, parse_1.default)(option.name, matches);
-            return (react_1.default.createElement(material_1.Box, Object.assign({ component: "li" }, props),
-                react_1.default.createElement(material_1.Avatar, { alt: option.name, src: option.image_small, sx: { marginRight: 1 } }),
-                react_1.default.createElement(react_1.default.Fragment, null, parts.map((part, index) => (react_1.default.createElement(material_1.Typography, { key: index, sx: { fontWeight: part.highlight ? 700 : 400, marginRight: 0.2 } }, part.text))))));
+            return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ component: "li" }, props, { children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: option.name, src: option.image_small, sx: { marginRight: 1 } }), (0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: parts.map((part, index) => ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ sx: { fontWeight: part.highlight ? 700 : 400, marginRight: 0.2 } }, { children: part.text }), index))) })] })));
         }, renderInput: (params) => {
-            return (react_1.default.createElement(TextField_1.default, Object.assign({}, params, TextFieldProps, { margin: "dense", InputProps: Object.assign(Object.assign({}, params.InputProps), { autoComplete: 'groups', endAdornment: (react_1.default.createElement(react_1.default.Fragment, null,
-                        isLoading ? react_1.default.createElement(CircularProgress_1.default, { color: "inherit", size: 20 }) : null,
-                        params.InputProps.endAdornment)) }) })));
+            return ((0, jsx_runtime_1.jsx)(TextField_1.default, Object.assign({}, params, TextFieldProps, { margin: "dense", InputProps: Object.assign(Object.assign({}, params.InputProps), { autoComplete: 'groups', endAdornment: ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [isLoading ? (0, jsx_runtime_1.jsx)(CircularProgress_1.default, { color: "inherit", size: 20 }) : null, params.InputProps.endAdornment] })) }) })));
         } }, rest)));
 };
 exports.default = GroupAutocomplete;

package/lib/cjs/components/GroupForm/GroupForm.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const system_1 = require("@mui/system");
 const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
@@ -155,11 +156,11 @@ function GroupForm(inProps) {
         if (data) {
             if (group) {
                 // Edit group
-                pubsub_js_1.default.publish(`${PubSub_1.SCTopicType.GROUP}.${PubSub_1.SCEventType.EDIT}`, data);
+                pubsub_js_1.default.publish(`${PubSub_1.SCTopicType.GROUP}.${PubSub_1.SCGroupEventType.EDIT}`, data);
             }
             else {
                 // Create group
-                pubsub_js_1.default.publish(`${PubSub_1.SCTopicType.GROUP}.${PubSub_1.SCEventType.CREATE}`, data);
+                pubsub_js_1.default.publish(`${PubSub_1.SCTopicType.GROUP}.${PubSub_1.SCGroupEventType.CREATE}`, data);
             }
         }
     }
@@ -219,81 +220,41 @@ function GroupForm(inProps) {
     /**
      * Renders root object
      */
-    return (react_1.default.createElement(Root, Object.assign({ DialogContentProps: { dividers: false }, title: group ? (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupForm.title.edit", defaultMessage: "ui.groupForm.title.edit" })) : (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupForm.title", defaultMessage: "ui.groupForm.title" })), open: open, onClose: onClose, className: (0, classnames_1.default)(classes.root, className), actions: react_1.default.createElement(lab_1.LoadingButton, { loading: field.isSubmitting, disabled: !field.name ||
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ DialogContentProps: { dividers: false }, title: group ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupForm.title.edit", defaultMessage: "ui.groupForm.title.edit" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupForm.title", defaultMessage: "ui.groupForm.title" })), open: open, onClose: onClose, className: (0, classnames_1.default)(classes.root, className), actions: (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ loading: field.isSubmitting, disabled: !field.name ||
                 Object.keys(error).length !== 0 ||
                 field.name.length > Group_1.GROUP_TITLE_MAX_LENGTH ||
-                field.name.description > Group_1.GROUP_DESCRIPTION_MAX_LENGTH, variant: "contained", onClick: handleSubmit, color: "secondary" }, group ? (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupForm.button.edit", defaultMessage: "ui.groupForm.button.edit" })) : (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupForm.button.create", defaultMessage: "ui.groupForm.button.create" }))) }, rest),
-        react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(material_1.Paper, { style: _backgroundCover, classes: { root: classes.cover } },
-                    react_1.default.createElement(material_1.Box, { className: classes.avatar },
-                        react_1.default.createElement(material_1.Avatar, null, field.imageOriginal ? react_1.default.createElement("img", { src: field.imageOriginal, alt: "avatar" }) : react_1.default.createElement(material_1.Icon, null, "icon_image"))),
-                    react_1.default.createElement(react_1.default.Fragment, null,
-                        react_1.default.createElement(ChangeGroupPicture_1.default, { isCreationMode: true, onChange: handleChangeAvatar }),
-                        react_1.default.createElement(ChangeGroupCover_1.default, { isCreationMode: true, onChange: handleChangeCover }))),
-                react_1.default.createElement(material_1.Typography, { className: (0, classnames_1.default)(classes.header, { [classes.error]: error.emotionalImageOriginalError || error.imageOriginalError }), align: "center" }, error.emotionalImageOriginalError || error.imageOriginalError ? (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupForm.header.error", defaultMessage: "ui.groupForm.header.error" })) : (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupForm.header", defaultMessage: "ui.groupForm.header" })))),
-            react_1.default.createElement(material_1.FormGroup, { className: classes.form },
-                react_1.default.createElement(material_1.TextField, { required: true, className: classes.name, placeholder: `${intl.formatMessage(messages.name)}`, margin: "normal", value: field.name, name: "name", onChange: handleChange, InputProps: {
-                        endAdornment: react_1.default.createElement(material_1.Typography, { variant: "body2" }, Group_1.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_1.GROUP_TITLE_MAX_LENGTH), helperText: ((_b = field === null || field === void 0 ? void 0 : field.name) === null || _b === void 0 ? void 0 : _b.length) > Group_1.GROUP_TITLE_MAX_LENGTH ? (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupForm.name.error.maxLength", defaultMessage: "ui.groupForm.name.error.maxLength" })) : null }),
-                react_1.default.createElement(material_1.TextField, { multiline: true, className: classes.description, placeholder: `${intl.formatMessage(messages.description)}`, margin: "normal", value: field.description, name: "description", onChange: handleChange, InputProps: {
-                        endAdornment: (react_1.default.createElement(material_1.Typography, { variant: "body2" }, ((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) ? Group_1.GROUP_DESCRIPTION_MAX_LENGTH - field.description.length : Group_1.GROUP_DESCRIPTION_MAX_LENGTH))
-                    }, error: Boolean(((_d = field.description) === null || _d === void 0 ? void 0 : _d.length) > Group_1.GROUP_DESCRIPTION_MAX_LENGTH), helperText: ((_e = field.description) === null || _e === void 0 ? void 0 : _e.length) > Group_1.GROUP_DESCRIPTION_MAX_LENGTH ? (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupForm.description.error.maxLength", defaultMessage: "ui.groupForm.description.error.maxLength" })) : null }),
-                privateEnabled && (react_1.default.createElement(material_1.Box, { className: classes.privacySection },
-                    react_1.default.createElement(material_1.Typography, { variant: "h4" },
-                        react_1.default.createElement(react_intl_1.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) => react_1.default.createElement("strong", null, chunks)
-                            } })),
-                    react_1.default.createElement(material_1.Stack, { direction: "row", spacing: 1, alignItems: "center" },
-                        react_1.default.createElement(material_1.Typography, { className: (0, classnames_1.default)(classes.switchLabel, { [classes.active]: !field.isPublic }) },
-                            react_1.default.createElement(material_1.Icon, null, "private"),
-                            react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupForm.privacy.private", defaultMessage: "ui.groupForm.privacy.private" })),
-                        react_1.default.createElement(material_1.Switch, { className: classes.switch, checked: field.isPublic, onChange: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['isPublic']: !field.isPublic }))), disabled: group && group.privacy === types_1.SCGroupPrivacyType.PRIVATE }),
-                        react_1.default.createElement(material_1.Typography, { className: (0, classnames_1.default)(classes.switchLabel, { [classes.active]: field.isPublic }) },
-                            react_1.default.createElement(material_1.Icon, null, "public"),
-                            react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupForm.privacy.public", defaultMessage: "ui.groupForm.privacy.public" }))),
-                    react_1.default.createElement(material_1.Typography, { variant: "body2", className: classes.privacySectionInfo }, field.isPublic ? (react_1.default.createElement(react_intl_1.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) => react_1.default.createElement("strong", null, chunks)
-                        } })) : (react_1.default.createElement(react_1.default.Fragment, null, group && group.privacy === types_1.SCGroupPrivacyType.PRIVATE ? (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupForm.privacy.private.info.edit", defaultMessage: "ui.groupForm.private.public.info.edit", values: {
-                            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                            // @ts-ignore
-                            b: (chunks) => react_1.default.createElement("strong", null, chunks)
-                        } })) : (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupForm.privacy.private.info", defaultMessage: "ui.groupForm.private.public.info", values: {
-                            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                            // @ts-ignore
-                            b: (chunks) => react_1.default.createElement("strong", null, chunks)
-                        } }))))))),
-                privateEnabled && visibilityEnabled && (react_1.default.createElement(material_1.Box, { className: classes.visibilitySection }, ((!field.isPublic && !group) || (group && !field.isPublic)) && (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(material_1.Typography, { variant: "h4" },
-                        react_1.default.createElement(react_intl_1.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) => react_1.default.createElement("strong", null, chunks)
-                            } })),
-                    react_1.default.createElement(material_1.Stack, { direction: "row", spacing: 1, alignItems: "center" },
-                        react_1.default.createElement(material_1.Typography, { className: (0, classnames_1.default)(classes.switchLabel, { [classes.active]: !field.isVisible }) },
-                            react_1.default.createElement(material_1.Icon, null, "visibility_off"),
-                            react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupForm.visibility.hidden", defaultMessage: "ui.groupForm.visibility.hidden" })),
-                        react_1.default.createElement(material_1.Switch, { className: classes.switch, checked: field.isVisible, onChange: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['isVisible']: !field.isVisible }))) }),
-                        react_1.default.createElement(material_1.Typography, { className: (0, classnames_1.default)(classes.switchLabel, { [classes.active]: field.isVisible }) },
-                            react_1.default.createElement(material_1.Icon, null, "visibility"),
-                            react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupForm.visibility.visible", defaultMessage: "ui.groupForm.visibility.visible" }))),
-                    react_1.default.createElement(material_1.Typography, { variant: "body2", className: classes.visibilitySectionInfo }, !field.isVisible ? (react_1.default.createElement(react_intl_1.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) => react_1.default.createElement("strong", null, chunks)
-                        } })) : (react_1.default.createElement(react_intl_1.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) => react_1.default.createElement("strong", null, chunks)
-                        } })))))))),
-            !group && (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(material_1.Divider, null),
-                react_1.default.createElement(material_1.Box, { className: classes.inviteSection },
-                    react_1.default.createElement(GroupInviteButton_1.default, { handleInvitations: handleInviteSection })))))));
+                field.name.description > Group_1.GROUP_DESCRIPTION_MAX_LENGTH, variant: "contained", onClick: handleSubmit, color: "secondary" }, { children: group ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupForm.button.edit", defaultMessage: "ui.groupForm.button.edit" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupForm.button.create", defaultMessage: "ui.groupForm.button.create" })) })) }, rest, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.avatar }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { children: field.imageOriginal ? (0, jsx_runtime_1.jsx)("img", { src: field.imageOriginal, alt: "avatar" }) : (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "icon_image" }) }) })), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ChangeGroupPicture_1.default, { isCreationMode: true, onChange: handleChangeAvatar }), (0, jsx_runtime_1.jsx)(ChangeGroupCover_1.default, { isCreationMode: true, onChange: handleChangeCover })] })] })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: (0, classnames_1.default)(classes.header, { [classes.error]: error.emotionalImageOriginalError || error.imageOriginalError }), align: "center" }, { children: error.emotionalImageOriginalError || error.imageOriginalError ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupForm.header.error", defaultMessage: "ui.groupForm.header.error" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupForm.header", defaultMessage: "ui.groupForm.header" })) }))] }), (0, jsx_runtime_1.jsxs)(material_1.FormGroup, Object.assign({ className: classes.form }, { children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { required: true, className: classes.name, placeholder: `${intl.formatMessage(messages.name)}`, margin: "normal", value: field.name, name: "name", onChange: handleChange, InputProps: {
+                                endAdornment: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: Group_1.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_1.GROUP_TITLE_MAX_LENGTH), helperText: ((_b = field === null || field === void 0 ? void 0 : field.name) === null || _b === void 0 ? void 0 : _b.length) > Group_1.GROUP_TITLE_MAX_LENGTH ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupForm.name.error.maxLength", defaultMessage: "ui.groupForm.name.error.maxLength" })) : null }), (0, jsx_runtime_1.jsx)(material_1.TextField, { multiline: true, className: classes.description, placeholder: `${intl.formatMessage(messages.description)}`, margin: "normal", value: field.description, name: "description", onChange: handleChange, InputProps: {
+                                endAdornment: ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: ((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) ? Group_1.GROUP_DESCRIPTION_MAX_LENGTH - field.description.length : Group_1.GROUP_DESCRIPTION_MAX_LENGTH })))
+                            }, error: Boolean(((_d = field.description) === null || _d === void 0 ? void 0 : _d.length) > Group_1.GROUP_DESCRIPTION_MAX_LENGTH), helperText: ((_e = field.description) === null || _e === void 0 ? void 0 : _e.length) > Group_1.GROUP_DESCRIPTION_MAX_LENGTH ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupForm.description.error.maxLength", defaultMessage: "ui.groupForm.description.error.maxLength" })) : null }), privateEnabled && ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.privacySection }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.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) => (0, jsx_runtime_1.jsx)("strong", { children: chunks })
+                                        } }) })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: (0, classnames_1.default)(classes.switchLabel, { [classes.active]: !field.isPublic }) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "private" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupForm.privacy.private", defaultMessage: "ui.groupForm.privacy.private" })] })), (0, jsx_runtime_1.jsx)(material_1.Switch, { className: classes.switch, checked: field.isPublic, onChange: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['isPublic']: !field.isPublic }))), disabled: group && group.privacy === types_1.SCGroupPrivacyType.PRIVATE }), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: (0, classnames_1.default)(classes.switchLabel, { [classes.active]: field.isPublic }) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "public" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupForm.privacy.public", defaultMessage: "ui.groupForm.privacy.public" })] }))] })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", className: classes.privacySectionInfo }, { children: field.isPublic ? ((0, jsx_runtime_1.jsx)(react_intl_1.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) => (0, jsx_runtime_1.jsx)("strong", { children: chunks })
+                                        } })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: group && group.privacy === types_1.SCGroupPrivacyType.PRIVATE ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupForm.privacy.private.info.edit", defaultMessage: "ui.groupForm.private.public.info.edit", values: {
+                                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                                // @ts-ignore
+                                                b: (chunks) => (0, jsx_runtime_1.jsx)("strong", { children: chunks })
+                                            } })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupForm.privacy.private.info", defaultMessage: "ui.groupForm.private.public.info", values: {
+                                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                                // @ts-ignore
+                                                b: (chunks) => (0, jsx_runtime_1.jsx)("strong", { children: chunks })
+                                            } })) })) }))] }))), privateEnabled && visibilityEnabled && ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.visibilitySection }, { children: ((!field.isPublic && !group) || (group && !field.isPublic)) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.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) => (0, jsx_runtime_1.jsx)("strong", { children: chunks })
+                                            } }) })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: (0, classnames_1.default)(classes.switchLabel, { [classes.active]: !field.isVisible }) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "visibility_off" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupForm.visibility.hidden", defaultMessage: "ui.groupForm.visibility.hidden" })] })), (0, jsx_runtime_1.jsx)(material_1.Switch, { className: classes.switch, checked: field.isVisible, onChange: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['isVisible']: !field.isVisible }))) }), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: (0, classnames_1.default)(classes.switchLabel, { [classes.active]: field.isVisible }) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "visibility" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupForm.visibility.visible", defaultMessage: "ui.groupForm.visibility.visible" })] }))] })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", className: classes.visibilitySectionInfo }, { children: !field.isVisible ? ((0, jsx_runtime_1.jsx)(react_intl_1.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) => (0, jsx_runtime_1.jsx)("strong", { children: chunks })
+                                            } })) : ((0, jsx_runtime_1.jsx)(react_intl_1.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) => (0, jsx_runtime_1.jsx)("strong", { children: chunks })
+                                            } })) }))] })) })))] })), !group && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Divider, {}), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.inviteSection }, { children: (0, jsx_runtime_1.jsx)(GroupInviteButton_1.default, { handleInvitations: handleInviteSection }) }))] }))] }) })));
 }
 exports.default = GroupForm;

package/lib/cjs/components/GroupHeader/GroupHeader.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const types_1 = require("@selfcommunity/types");
@@ -119,10 +120,10 @@ function GroupHeader(inProps) {
         var _a;
         if (data && ((_a = data === null || data === void 0 ? void 0 : data.group) === null || _a === void 0 ? void 0 : _a.id) === (scGroup === null || scGroup === void 0 ? void 0 : scGroup.id)) {
             let _group = Object.assign({}, scGroup);
-            if (msg === `${PubSub_1.SCTopicType.GROUP}.${PubSub_1.SCEventType.ADD_MEMBER}`) {
+            if (msg === `${PubSub_1.SCTopicType.GROUP}.${PubSub_1.SCGroupEventType.ADD_MEMBER}`) {
                 _group.subscribers_counter = _group.subscribers_counter + 1;
             }
-            else if (msg === `${PubSub_1.SCTopicType.GROUP}.${PubSub_1.SCEventType.REMOVE_MEMBER}`) {
+            else if (msg === `${PubSub_1.SCTopicType.GROUP}.${PubSub_1.SCGroupEventType.REMOVE_MEMBER}`) {
                 _group.subscribers_counter = Math.max(_group.subscribers_counter - 1, 0);
             }
             setSCGroup(_group);
@@ -133,7 +134,7 @@ function GroupHeader(inProps) {
      */
     (0, react_1.useEffect)(() => {
         if (scGroup) {
-            updatesSubscription.current = pubsub_js_1.default.subscribe(`${PubSub_1.SCTopicType.GROUP}.${PubSub_1.SCEventType.MEMBERS}`, onChangeGroupMembersHandler);
+            updatesSubscription.current = pubsub_js_1.default.subscribe(`${PubSub_1.SCTopicType.GROUP}.${PubSub_1.SCGroupEventType.MEMBERS}`, onChangeGroupMembersHandler);
         }
         return () => {
             updatesSubscription.current && pubsub_js_1.default.unsubscribe(updatesSubscription.current);
@@ -141,42 +142,13 @@ function GroupHeader(inProps) {
     }, [scGroup]);
     // RENDER
     if (!scGroup) {
-        return react_1.default.createElement(Skeleton_1.default, null);
+        return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
     }
     const _backgroundCover = Object.assign({}, (scGroup.emotional_image
         ? { background: `url('${scGroup.emotional_image}') center / cover` }
         : { background: `url('${scPreferences.preferences[react_core_1.SCPreferences.IMAGES_USER_DEFAULT_COVER].value}') center / cover` }));
-    return (react_1.default.createElement(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className) }, rest),
-        react_1.default.createElement(material_1.Paper, { style: _backgroundCover, classes: { root: classes.cover } },
-            react_1.default.createElement(material_1.Box, { className: classes.avatar },
-                react_1.default.createElement(material_1.Avatar, null,
-                    react_1.default.createElement("img", { alt: "group", src: scGroup.image_big ? scGroup.image_big : '' }))),
-            isGroupAdmin && (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(ChangeGroupPicture_1.default, Object.assign({ groupId: scGroup.id, onChange: handleChangeAvatar, className: classes.changePicture }, ChangePictureProps)),
-                react_1.default.createElement("div", { className: classes.changeCover },
-                    react_1.default.createElement(ChangeGroupCover_1.default, Object.assign({ groupId: scGroup.id, onChange: handleChangeCover }, ChangeCoverProps)))))),
-        react_1.default.createElement(material_1.Box, { className: classes.info },
-            isGroupAdmin && react_1.default.createElement(EditGroupButton_1.default, { group: scGroup, groupId: scGroup.id, onEditSuccess: (data) => setSCGroup(data) }),
-            react_1.default.createElement(material_1.Typography, { variant: "h5", className: classes.name }, scGroup.name),
-            privateEnabled && (react_1.default.createElement(material_1.Box, { className: classes.visibility },
-                privateEnabled && (react_1.default.createElement(react_1.default.Fragment, null, scGroup.privacy === types_1.SCGroupPrivacyType.PUBLIC ? (react_1.default.createElement(material_1.Typography, { className: classes.visibilityItem },
-                    react_1.default.createElement(material_1.Icon, null, "public"),
-                    react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupHeader.visibility.public", defaultMessage: "ui.groupHeader.visibility.public" }))) : (react_1.default.createElement(material_1.Typography, { className: classes.visibilityItem },
-                    react_1.default.createElement(material_1.Icon, null, "private"),
-                    react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupHeader.visibility.private", defaultMessage: "ui.groupHeader.visibility.private" }))))),
-                visibilityEnabled && (react_1.default.createElement(react_1.default.Fragment, null,
-                    privateEnabled && react_1.default.createElement(Bullet_1.default, null),
-                    scGroup.visible ? (react_1.default.createElement(material_1.Typography, { className: classes.visibilityItem },
-                        react_1.default.createElement(material_1.Icon, null, "visibility"),
-                        react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupHeader.visibility.visible", defaultMessage: "ui.groupHeader.visibility.visible" }))) : (react_1.default.createElement(material_1.Typography, { className: classes.visibilityItem },
-                        react_1.default.createElement(material_1.Icon, null, "visibility_off"),
-                        react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupHeader.visibility.hidden", defaultMessage: "ui.groupHeader.visibility.hidden" }))))))),
-            react_1.default.createElement(react_1.default.Fragment, null, ((scGroup && scGroup.privacy === types_1.SCGroupPrivacyType.PUBLIC) ||
-                scGroup.subscription_status === types_1.SCGroupSubscriptionStatusType.SUBSCRIBED ||
-                isGroupAdmin) && (react_1.default.createElement(material_1.Box, { className: classes.members },
-                react_1.default.createElement(material_1.Typography, { className: classes.membersCounter, component: "div" },
-                    react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupHeader.members", defaultMessage: "ui.groupHeader.members", values: { total: scGroup.subscribers_counter } })),
-                react_1.default.createElement(GroupMembersButton_1.default, Object.assign({ key: scGroup.subscribers_counter, groupId: scGroup === null || scGroup === void 0 ? void 0 : scGroup.id, group: scGroup, autoHide: !isGroupAdmin }, GroupMembersButtonProps))))),
-            isGroupAdmin ? (react_1.default.createElement(GroupInviteButton_1.default, { group: scGroup, groupId: scGroup.id })) : (react_1.default.createElement(GroupSubscribeButton_1.default, Object.assign({ group: scGroup, onSubscribe: handleSubscribe }, GroupSubscribeButtonProps))))));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.avatar }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { children: (0, jsx_runtime_1.jsx)("img", { alt: "group", src: scGroup.image_big ? scGroup.image_big : '' }) }) })), isGroupAdmin && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ChangeGroupPicture_1.default, Object.assign({ groupId: scGroup.id, onChange: handleChangeAvatar, className: classes.changePicture }, ChangePictureProps)), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: classes.changeCover }, { children: (0, jsx_runtime_1.jsx)(ChangeGroupCover_1.default, Object.assign({ groupId: scGroup.id, onChange: handleChangeCover }, ChangeCoverProps)) }))] }))] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.info }, { children: [isGroupAdmin && (0, jsx_runtime_1.jsx)(EditGroupButton_1.default, { group: scGroup, groupId: scGroup.id, onEditSuccess: (data) => setSCGroup(data) }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", className: classes.name }, { children: scGroup.name })), privateEnabled && ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.visibility }, { children: [privateEnabled && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: scGroup.privacy === types_1.SCGroupPrivacyType.PUBLIC ? ((0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.visibilityItem }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "public" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupHeader.visibility.public", defaultMessage: "ui.groupHeader.visibility.public" })] }))) : ((0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.visibilityItem }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "private" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupHeader.visibility.private", defaultMessage: "ui.groupHeader.visibility.private" })] }))) })), visibilityEnabled && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [privateEnabled && (0, jsx_runtime_1.jsx)(Bullet_1.default, {}), scGroup.visible ? ((0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.visibilityItem }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "visibility" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupHeader.visibility.visible", defaultMessage: "ui.groupHeader.visibility.visible" })] }))) : ((0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.visibilityItem }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "visibility_off" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupHeader.visibility.hidden", defaultMessage: "ui.groupHeader.visibility.hidden" })] })))] }))] }))), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: ((scGroup && scGroup.privacy === types_1.SCGroupPrivacyType.PUBLIC) ||
+                            scGroup.subscription_status === types_1.SCGroupSubscriptionStatusType.SUBSCRIBED ||
+                            isGroupAdmin) && ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.members }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.membersCounter, component: "div" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupHeader.members", defaultMessage: "ui.groupHeader.members", values: { total: scGroup.subscribers_counter } }) })), (0, jsx_runtime_1.jsx)(GroupMembersButton_1.default, Object.assign({ groupId: scGroup === null || scGroup === void 0 ? void 0 : scGroup.id, group: scGroup, autoHide: !isGroupAdmin }, GroupMembersButtonProps), scGroup.subscribers_counter)] }))) }), isGroupAdmin ? ((0, jsx_runtime_1.jsx)(GroupInviteButton_1.default, { group: scGroup, groupId: scGroup.id })) : ((0, jsx_runtime_1.jsx)(GroupSubscribeButton_1.default, Object.assign({ group: scGroup, onSubscribe: handleSubscribe }, GroupSubscribeButtonProps)))] }))] })));
 }
 exports.default = GroupHeader;

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

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const styles_1 = require("@mui/material/styles");
 const Skeleton_1 = tslib_1.__importDefault(require("@mui/material/Skeleton"));
@@ -41,16 +41,6 @@ const Root = (0, styles_1.styled)(material_1.Box, {
  */
 function GroupHeaderSkeleton() {
     const theme = (0, material_1.useTheme)();
-    return (react_1.default.createElement(Root, { className: classes.root },
-        react_1.default.createElement(Skeleton_1.default, { className: classes.cover, animation: "wave", variant: "rectangular" }),
-        react_1.default.createElement(material_1.Box, { className: classes.avatar },
-            react_1.default.createElement(Skeleton_1.default, { animation: "wave", variant: "circular", width: theme.selfcommunity.group.avatar.sizeLarge, height: theme.selfcommunity.group.avatar.sizeLarge })),
-        react_1.default.createElement(material_1.Box, { className: classes.info },
-            react_1.default.createElement(material_1.Typography, { variant: "h5" },
-                react_1.default.createElement(Skeleton_1.default, { animation: "wave", sx: { height: 30, width: 200 } })),
-            react_1.default.createElement(material_1.Typography, null,
-                react_1.default.createElement(Skeleton_1.default, { animation: "wave", sx: { height: 20, width: 150 } })),
-            react_1.default.createElement(material_1.Typography, null,
-                react_1.default.createElement(Skeleton_1.default, { animation: "wave", sx: { height: 20, width: 100 } })))));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { className: classes.cover, animation: "wave", variant: "rectangular" }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.avatar }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", variant: "circular", width: theme.selfcommunity.group.avatar.sizeLarge, height: theme.selfcommunity.group.avatar.sizeLarge }) })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.info }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5" }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", sx: { height: 30, width: 200 } }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", sx: { height: 20, width: 150 } }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", sx: { height: 20, width: 100 } }) })] }))] })));
 }
 exports.default = GroupHeaderSkeleton;