@selfcommunity/react-ui 0.11.0-alpha.8 → 0.11.0-alpha.81

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

@@ -4,7 +4,6 @@ const tslib_1 = require("tslib");
 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");
 const react_intl_1 = require("react-intl");
 const react_core_1 = require("@selfcommunity/react-core");
@@ -22,6 +21,8 @@ const Errors_1 = require("../../constants/Errors");
 const api_services_1 = require("@selfcommunity/api-services");
 const utils_1 = require("@selfcommunity/utils");
 const PubSub_1 = require("../../constants/PubSub");
+const PaywallsConfigurator_1 = tslib_1.__importDefault(require("../PaywallsConfigurator"));
+const constants_2 = require("../PaywallsConfigurator/constants");
 const messages = (0, react_intl_1.defineMessages)({
     name: {
         id: 'ui.groupForm.name.placeholder',
@@ -49,10 +50,11 @@ const classes = {
     privacySectionInfo: `${constants_1.PREFIX}-privacy-section-info`,
     visibilitySection: `${constants_1.PREFIX}-visibility-section`,
     visibilitySectionInfo: `${constants_1.PREFIX}-visibility-section-info`,
+    paywallsConfiguratorWrap: `${constants_1.PREFIX}-paywalls-configurator-wrap`,
     inviteSection: `${constants_1.PREFIX}-invite-section`,
     error: `${constants_1.PREFIX}-error`
 };
-const Root = (0, styles_1.styled)(BaseDialog_1.default, {
+const Root = (0, material_1.styled)(BaseDialog_1.default, {
     name: constants_1.PREFIX,
     slot: 'Root'
 })(() => ({}));
@@ -93,7 +95,7 @@ const Root = (0, styles_1.styled)(BaseDialog_1.default, {
  * @param inProps
  */
 function GroupForm(inProps) {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f, _g;
     //PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
@@ -110,17 +112,25 @@ function GroupForm(inProps) {
         isPublic: group && group.privacy === types_1.SCGroupPrivacyType.PUBLIC,
         isVisible: group ? group.visible : true,
         invitedUsers: null,
-        isSubmitting: false
+        isSubmitting: false,
+        products: ((_a = group === null || group === void 0 ? void 0 : group.paywalls) === null || _a === void 0 ? void 0 : _a.map((p) => p.id)) || [],
+        contentAccessType: ((_b = group === null || group === void 0 ? void 0 : group.paywalls) === null || _b === void 0 ? void 0 : _b.length) ? constants_2.ContentAccessType.PAID : constants_2.ContentAccessType.FREE
     };
+    // CONTEXT
+    const scUserContext = (0, react_core_1.useSCUser)();
     // STATE
     const [field, setField] = (0, react_1.useState)(initialFieldState);
     const [error, setError] = (0, react_1.useState)({});
     // INTL
     const intl = (0, react_intl_1.useIntl)();
+    // CONST
+    const isStaff = (0, react_1.useMemo)(() => scUserContext.user && react_core_1.UserUtils.isStaff(scUserContext.user), [scUserContext.user]);
     // PREFERENCES
     const scPreferences = (0, react_core_1.useSCPreferences)();
     const visibilityEnabled = (0, react_1.useMemo)(() => scPreferences.preferences[react_core_1.SCPreferences.CONFIGURATIONS_GROUPS_VISIBILITY_ENABLED].value, [scPreferences.preferences]);
     const privateEnabled = (0, react_1.useMemo)(() => scPreferences.preferences[react_core_1.SCPreferences.CONFIGURATIONS_GROUPS_PRIVATE_ENABLED].value, [scPreferences.preferences]);
+    // PAYMENTS
+    const { isPaymentsEnabled } = (0, react_core_1.useSCPaymentsEnabled)();
     const _backgroundCover = Object.assign({}, (field.emotionalImageOriginal
         ? { background: `url('${field.emotionalImageOriginal}') center / cover` }
         : { background: `url('${scPreferences.preferences[react_core_1.SCPreferences.IMAGES_USER_DEFAULT_COVER].value}') center / cover` }));
@@ -165,6 +175,7 @@ function GroupForm(inProps) {
         }
     }
     const handleSubmit = () => {
+        var _a;
         setField((prev) => (Object.assign(Object.assign({}, prev), { ['isSubmitting']: true })));
         const formData = new FormData();
         formData.append('name', field.name);
@@ -181,6 +192,12 @@ function GroupForm(inProps) {
         if (field.emotionalImageOriginalFile) {
             formData.append('emotional_image_original', field.emotionalImageOriginalFile);
         }
+        if (field.products.length && field.contentAccessType === constants_2.ContentAccessType.PAID && (isStaff || (group && ((_a = group.paywalls) === null || _a === void 0 ? void 0 : _a.length)))) {
+            formData.append(`products`, JSON.stringify(field.products));
+        }
+        else {
+            formData.append(`products`, '[]');
+        }
         if (!group) {
             for (const key in field.invitedUsers) {
                 formData.append(key, field.invitedUsers[key]);
@@ -195,10 +212,10 @@ function GroupForm(inProps) {
         }
         groupService
             .then((data) => {
-            onSuccess && onSuccess(data);
+            onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(data);
             notifyChanges(data);
-            onClose && onClose();
             setField((prev) => (Object.assign(Object.assign({}, prev), { ['isSubmitting']: false })));
+            onClose === null || onClose === void 0 ? void 0 : onClose();
         })
             .catch((e) => {
             setError(Object.assign(Object.assign({}, error), (0, api_services_1.formatHttpErrorCode)(e)));
@@ -217,17 +234,29 @@ function GroupForm(inProps) {
             setError(error);
         }
     };
+    const handleChangeContentAccessType = (type) => {
+        setField((prev) => (Object.assign(Object.assign({}, prev), { contentAccessType: type })));
+    };
+    const handleChangePaymentsProducts = (products) => {
+        setField((prev) => (Object.assign(Object.assign({}, prev), { products: products.map((product) => product.id) })));
+    };
+    const handleClose = (_event, reason) => {
+        if (reason === 'backdropClick' || reason === 'escapeKeyDown') {
+            return;
+        }
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    };
     /**
      * Renders root object
      */
-    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 ||
+    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, disableEscapeKeyDown: true, onClose: handleClose, 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" }, { 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: {
+                            }, error: Boolean(((_c = field === null || field === void 0 ? void 0 : field.name) === null || _c === void 0 ? void 0 : _c.length) > Group_1.GROUP_TITLE_MAX_LENGTH), helperText: ((_d = field === null || field === void 0 ? void 0 : field.name) === null || _d === void 0 ? void 0 : _d.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: ((_e = field.description) === null || _e === void 0 ? void 0 : _e.length) ? Group_1.GROUP_DESCRIPTION_MAX_LENGTH - field.description.length : Group_1.GROUP_DESCRIPTION_MAX_LENGTH })))
+                            }, error: Boolean(((_f = field.description) === null || _f === void 0 ? void 0 : _f.length) > Group_1.GROUP_DESCRIPTION_MAX_LENGTH), helperText: ((_g = field.description) === null || _g === void 0 ? void 0 : _g.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 })
@@ -255,6 +284,6 @@ function GroupForm(inProps) {
                                                 // 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 }) }))] }))] }) })));
+                                            } })) }))] })) })))] })), isPaymentsEnabled && isStaff && ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.paywallsConfiguratorWrap }, { children: (0, jsx_runtime_1.jsx)(PaywallsConfigurator_1.default, Object.assign({}, (group && { contentId: group.id }), { contentType: types_1.SCContentType.GROUP, onChangeContentAccessType: handleChangeContentAccessType, onChangePaymentProducts: handleChangePaymentsProducts })) }))), !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

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 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");
 const react_core_1 = require("@selfcommunity/react-core");
@@ -22,6 +21,7 @@ const GroupInviteButton_1 = tslib_1.__importDefault(require("../GroupInviteButto
 const PubSub_1 = require("../../constants/PubSub");
 const pubsub_js_1 = tslib_1.__importDefault(require("pubsub-js"));
 const GroupActionsMenu_1 = tslib_1.__importDefault(require("../GroupActionsMenu"));
+const BuyButton_1 = tslib_1.__importDefault(require("../BuyButton"));
 const classes = {
     root: `${constants_1.PREFIX}-root`,
     cover: `${constants_1.PREFIX}-cover`,
@@ -36,7 +36,7 @@ const classes = {
     membersCounter: `${constants_1.PREFIX}-members-counter`,
     multiActions: `${constants_1.PREFIX}-multi-actions`
 };
-const Root = (0, styles_1.styled)(material_1.Box, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'Root'
 })(() => ({}));
@@ -72,7 +72,7 @@ const Root = (0, styles_1.styled)(material_1.Box, {
  * @param inProps
  */
 function GroupHeader(inProps) {
-    var _a;
+    var _a, _b;
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
@@ -89,6 +89,8 @@ function GroupHeader(inProps) {
     const { scGroup, setSCGroup } = (0, react_core_1.useSCFetchGroup)({ id: groupId, group });
     const theme = (0, material_1.useTheme)();
     const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
+    // PAYMENTS
+    const { isPaymentsEnabled } = (0, react_core_1.useSCPaymentsEnabled)();
     // REFS
     const updatesSubscription = (0, react_1.useRef)(null);
     // CONST
@@ -151,7 +153,12 @@ function GroupHeader(inProps) {
     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 ((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 && !isMobile && ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.multiActions }, { children: [(0, jsx_runtime_1.jsx)(EditGroupButton_1.default, { group: scGroup, groupId: scGroup.id, onEditSuccess: (data) => setSCGroup(data) }), (0, jsx_runtime_1.jsx)(GroupActionsMenu_1.default, Object.assign({ group: scGroup, onEditSuccess: (data) => setSCGroup(data) }, GroupActionsProps))] }))), (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) ||
+    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 && !isMobile && ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.multiActions }, { children: [(0, jsx_runtime_1.jsx)(EditGroupButton_1.default, { group: scGroup, groupId: scGroup.id, onEditSuccess: (data) => setSCGroup(data) }), (0, jsx_runtime_1.jsx)(GroupActionsMenu_1.default, Object.assign({ group: scGroup, onEditSuccess: (data) => setSCGroup(data) }, GroupActionsProps))] }))), (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" })] })))] })), isPaymentsEnabled &&
+                                ((_b = scGroup.paywalls) === null || _b === void 0 ? void 0 : _b.length) > 0 &&
+                                (scGroup.privacy === types_1.SCGroupPrivacyType.PUBLIC ||
+                                    (scGroup.privacy === types_1.SCGroupPrivacyType.PRIVATE &&
+                                        scGroup.subscription_status &&
+                                        scGroup.subscription_status !== types_1.SCGroupSubscriptionStatusType.REQUESTED)) && ((0, jsx_runtime_1.jsx)(BuyButton_1.default, { size: "md", variant: "text", startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "dredit-card" }), contentType: types_1.SCContentType.GROUP, content: scGroup, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupHeader.paid", defaultMessage: "ui.groupHeader.paid" }) }))] }))), (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.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(GroupInviteButton_1.default, { group: scGroup, groupId: scGroup.id }), isMobile && (0, jsx_runtime_1.jsx)(GroupActionsMenu_1.default, Object.assign({ group: scGroup, onEditSuccess: (data) => setSCGroup(data) }, GroupActionsProps))] })) : ((0, jsx_runtime_1.jsx)(GroupSubscribeButton_1.default, Object.assign({ group: scGroup, onSubscribe: handleSubscribe }, GroupSubscribeButtonProps)))] }))] })));
 }

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

@@ -1,10 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
 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"));
 const constants_1 = require("./constants");
 const classes = {
     root: `${constants_1.PREFIX}-skeleton-root`,
@@ -12,7 +9,7 @@ const classes = {
     avatar: `${constants_1.PREFIX}-avatar`,
     info: `${constants_1.PREFIX}-info`
 };
-const Root = (0, styles_1.styled)(material_1.Box, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'SkeletonRoot'
 })(() => ({}));
@@ -41,6 +38,6 @@ const Root = (0, styles_1.styled)(material_1.Box, {
  */
 function GroupHeaderSkeleton() {
     const theme = (0, material_1.useTheme)();
-    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 } }) })] }))] })));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { 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)(material_1.Skeleton, { 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)(material_1.Skeleton, { animation: "wave", sx: { height: 30, width: 200 } }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", sx: { height: 20, width: 150 } }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", sx: { height: 20, width: 100 } }) })] }))] })));
 }
 exports.default = GroupHeaderSkeleton;

package/lib/cjs/components/GroupInfoWidget/GroupInfoWidget.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 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 classnames_1 = tslib_1.__importDefault(require("classnames"));
 const Widget_1 = tslib_1.__importDefault(require("../Widget"));
@@ -27,7 +26,7 @@ const classes = {
     admin: `${constants_1.PREFIX}-admin`,
     date: `${constants_1.PREFIX}-date`
 };
-const Root = (0, styles_1.styled)(Widget_1.default, {
+const Root = (0, material_1.styled)(Widget_1.default, {
     name: constants_1.PREFIX,
     slot: 'Root'
 })(() => ({}));

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

@@ -2,12 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Skeleton_1 = require("../Skeleton");
-const styles_1 = require("@mui/material/styles");
+const material_1 = require("@mui/material");
 const constants_1 = require("./constants");
 const classes = {
     root: `${constants_1.PREFIX}-skeleton-root`
 };
-const Root = (0, styles_1.styled)(Skeleton_1.GenericSkeleton, {
+const Root = (0, material_1.styled)(Skeleton_1.GenericSkeleton, {
     name: constants_1.PREFIX,
     slot: 'SkeletonRoot'
 })(() => ({}));

package/lib/cjs/components/GroupInviteButton/GroupInviteButton.d.ts

@@ -1,4 +1,4 @@
-import { ButtonProps } from '@mui/material/Button/Button';
+import { ButtonProps } from '@mui/material';
 import { SCGroupType } from '@selfcommunity/types';
 export interface GroupInviteButtonProps extends ButtonProps {
     /**

package/lib/cjs/components/GroupInviteButton/GroupInviteButton.js

@@ -4,7 +4,6 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importStar(require("react"));
 const system_1 = require("@mui/system");
-const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const react_intl_1 = require("react-intl");
 const react_core_1 = require("@selfcommunity/react-core");
@@ -12,7 +11,6 @@ const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const BaseDialog_1 = tslib_1.__importDefault(require("../../shared/BaseDialog"));
 const lab_1 = require("@mui/lab");
 const api_services_1 = require("@selfcommunity/api-services");
-const Autocomplete_1 = tslib_1.__importDefault(require("@mui/material/Autocomplete"));
 const User_1 = tslib_1.__importDefault(require("../User"));
 const Errors_1 = require("../../constants/Errors");
 const utils_1 = require("@selfcommunity/utils");
@@ -37,12 +35,12 @@ const classes = {
     invitedBox: `${PREFIX}-invited-box`,
     suggested: `${PREFIX}-suggested`
 };
-const Root = (0, styles_1.styled)(material_1.Button, {
+const Root = (0, material_1.styled)(material_1.Button, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => styles.root
 })(({ theme }) => ({}));
-const DialogRoot = (0, styles_1.styled)(BaseDialog_1.default, {
+const DialogRoot = (0, material_1.styled)(BaseDialog_1.default, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => styles.dialogRoot
@@ -257,7 +255,7 @@ function GroupInviteButton(inProps) {
     /**
      * Renders root object
      */
-    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), onClick: handleClose, variant: scGroup ? 'contained' : 'outlined', color: scGroup ? 'secondary' : 'inherit', startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "add" }) }, rest, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupInviteButton", defaultMessage: "ui.groupInviteButton" }) })), open && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ DialogContentProps: { dividers: false }, open: true, className: classes.dialogRoot, title: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: handleClose }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "arrow_back" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.dialogTitle }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupInviteButton.dialog.title", defaultMessage: "ui.groupInviteButton.dialog.title" }) })), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ size: "small", color: "secondary", variant: "contained", onClick: handleSendInvitations, loading: isSending, disabled: !invited.length }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupInviteButton.dialog.button.end", defaultMessage: "ui.groupInviteButton.dialog.button.end" }) }))] }) }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.dialogContent }, { children: [(0, jsx_runtime_1.jsx)(Autocomplete_1.default, { className: classes.autocomplete, loading: loading, size: "small", multiple: true, freeSolo: true, disableClearable: true, options: suggested, onChange: handleChange, onInputChange: handleInputChange, inputValue: value, filterOptions: filterOptions, value: invited, getOptionLabel: (option) => (option ? option.username : '...'), isOptionEqualToValue: (option, value) => (option ? value.id === option.id : false), renderTags: () => null, renderOption: (props, option) => ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ component: "li" }, props, { children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: option.username, src: option.avatar }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ ml: 1 }, { children: option.username }))] }))), renderInput: (params) => ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, { variant: "outlined", placeholder: `${intl.formatMessage(messages.placeholder)}`, InputProps: Object.assign(Object.assign({}, params.InputProps), { className: classes.input, startAdornment: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ className: classes.icon }, { children: "search" })) })), params.InputProps.startAdornment] })) }) }))) }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.invitedBox }, { children: invited.map((option, index) => ((0, jsx_runtime_1.jsx)(material_1.Chip, { avatar: (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: option.username, src: option.avatar }), label: option.username, onDelete: () => {
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), onClick: handleClose, variant: scGroup ? 'contained' : 'outlined', color: scGroup ? 'secondary' : 'inherit', startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "add" }) }, rest, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupInviteButton", defaultMessage: "ui.groupInviteButton" }) })), open && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ DialogContentProps: { dividers: false }, open: true, className: classes.dialogRoot, title: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: handleClose }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "arrow_back" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.dialogTitle }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupInviteButton.dialog.title", defaultMessage: "ui.groupInviteButton.dialog.title" }) })), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ size: "small", color: "secondary", variant: "contained", onClick: handleSendInvitations, loading: isSending, disabled: !invited.length }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupInviteButton.dialog.button.end", defaultMessage: "ui.groupInviteButton.dialog.button.end" }) }))] }) }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.dialogContent }, { children: [(0, jsx_runtime_1.jsx)(material_1.Autocomplete, { className: classes.autocomplete, loading: loading, size: "small", multiple: true, freeSolo: true, disableClearable: true, options: suggested, onChange: handleChange, onInputChange: handleInputChange, inputValue: value, filterOptions: filterOptions, value: invited, getOptionLabel: (option) => (option ? option.username : '...'), isOptionEqualToValue: (option, value) => (option ? value.id === option.id : false), renderTags: () => null, renderOption: (props, option) => ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ component: "li" }, props, { children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: option.username, src: option.avatar }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ ml: 1 }, { children: option.username }))] }))), renderInput: (params) => ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, { variant: "outlined", placeholder: `${intl.formatMessage(messages.placeholder)}`, InputProps: Object.assign(Object.assign({}, params.InputProps), { className: classes.input, startAdornment: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ className: classes.icon }, { children: "search" })) })), params.InputProps.startAdornment] })) }) }))) }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.invitedBox }, { children: invited.map((option, index) => ((0, jsx_runtime_1.jsx)(material_1.Chip, { avatar: (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: option.username, src: option.avatar }), label: option.username, onDelete: () => {
                                     handleDelete(option);
                                 }, style: { marginRight: 8 } }, index))) })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.suggested }, { children: [list.length !== 0 && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4", fontWeight: "bold" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupInviteButton.dialog.content.list", defaultMessage: "ui.groupInviteButton.dialog.content.list" }) }))), list.slice(0, 5).map((user, index) => ((0, jsx_runtime_1.jsx)(User_1.default, { elevation: 0, actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), user: user, userId: user.id, buttonProps: { onClick: () => handleUserInvite(user) } }, index)))] }))] })) })))] }));
 }

package/lib/cjs/components/GroupInvitedWidget/GroupInvitedWidget.js

@@ -3,8 +3,6 @@ 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 styles_1 = require("@mui/material/styles");
-const List_1 = tslib_1.__importDefault(require("@mui/material/List"));
 const material_1 = require("@mui/material");
 const Widget_1 = tslib_1.__importDefault(require("../Widget"));
 const api_services_1 = require("@selfcommunity/api-services");
@@ -31,11 +29,11 @@ const classes = {
     dialogRoot: `${constants_1.PREFIX}-dialog-root`,
     endMessage: `${constants_1.PREFIX}-end-message`
 };
-const Root = (0, styles_1.styled)(Widget_1.default, {
+const Root = (0, material_1.styled)(Widget_1.default, {
     name: constants_1.PREFIX,
     slot: 'Root'
 })(() => ({}));
-const DialogRoot = (0, styles_1.styled)(BaseDialog_1.default, {
+const DialogRoot = (0, material_1.styled)(BaseDialog_1.default, {
     name: constants_1.PREFIX,
     slot: 'DialogRoot'
 })(() => ({}));
@@ -195,13 +193,13 @@ function GroupInvitedWidget(inProps) {
         setOpenDialog((prev) => !prev);
     };
     // RENDER
-    if ((!state.count && state.initialized) || !contentAvailability || !scGroup || !state.count || !state.results.length || !isGroupAdmin) {
+    if ((!state.count && state.initialized) || (!contentAvailability && !scUserContext.user) || !scGroup || !isGroupAdmin) {
         return (0, jsx_runtime_1.jsx)(HiddenPlaceholder_1.default, {});
     }
     if (!state.initialized) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
     }
-    const content = ((0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.title, variant: "h5" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupInvitedWidget.title", defaultMessage: "ui.groupInvitedWidget.title" }) })), (0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(List_1.default, { children: state.results.slice(0, state.visibleItems).map((user) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(User_1.default, { elevation: 0, actions: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ disabled: true, size: "small" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupInvitedWidget.status", defaultMessage: "ui.groupInvitedWidget.status" }) })), user: user, userId: user.id }) }, user.id))) }), state.count > state.visibleItems && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ className: classes.showMore, onClick: handleToggleDialogOpen }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupInvitedWidget.button.showMore", defaultMessage: "ui.groupInvitedWidget.button.showMore" }) })))] }), openDialog && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ className: classes.dialogRoot, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.groupInvitedWidget.dialogTitle", id: "ui.groupInvitedWidget.dialogTitle", values: { total: (_b = state === null || state === void 0 ? void 0 : state.results) === null || _b === void 0 ? void 0 : _b.length } }), onClose: handleToggleDialogOpen, open: openDialog }, DialogProps, { children: (0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, Object.assign({ dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: (0, jsx_runtime_1.jsx)(User_1.UserSkeleton, Object.assign({ elevation: 0 }, UserProps)), height: isMobile ? '100%' : 400, endMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.endMessage }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupInvitedWidget.noMoreResults", defaultMessage: "ui.groupInvitedWidget.noMoreResults" }) })) }, { children: (0, jsx_runtime_1.jsx)(List_1.default, { children: state.results.map((user) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(User_1.default, { elevation: 0, actions: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ disabled: true, size: "small" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupInvitedWidget.status", defaultMessage: "ui.groupInvitedWidget.status" }) })), user: user, userId: user.id }) }, user.id))) }) })) })))] }));
+    const content = ((0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.title, variant: "h5" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupInvitedWidget.title", defaultMessage: "ui.groupInvitedWidget.title" }) })), (0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.List, { children: state.results.slice(0, state.visibleItems).map((user) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(User_1.default, { elevation: 0, actions: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ disabled: true, size: "small" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupInvitedWidget.status", defaultMessage: "ui.groupInvitedWidget.status" }) })), user: user, userId: user.id }) }, user.id))) }), state.count > state.visibleItems && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ className: classes.showMore, onClick: handleToggleDialogOpen }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupInvitedWidget.button.showMore", defaultMessage: "ui.groupInvitedWidget.button.showMore" }) })))] }), openDialog && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ className: classes.dialogRoot, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.groupInvitedWidget.dialogTitle", id: "ui.groupInvitedWidget.dialogTitle", values: { total: (_b = state === null || state === void 0 ? void 0 : state.results) === null || _b === void 0 ? void 0 : _b.length } }), onClose: handleToggleDialogOpen, open: openDialog }, DialogProps, { children: (0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, Object.assign({ dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: (0, jsx_runtime_1.jsx)(User_1.UserSkeleton, Object.assign({ elevation: 0 }, UserProps)), height: isMobile ? '100%' : 400, endMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.endMessage }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupInvitedWidget.noMoreResults", defaultMessage: "ui.groupInvitedWidget.noMoreResults" }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: state.results.map((user) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(User_1.default, { elevation: 0, actions: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ disabled: true, size: "small" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupInvitedWidget.status", defaultMessage: "ui.groupInvitedWidget.status" }) })), user: user, userId: user.id }) }, user.id))) }) })) })))] }));
     return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: content })));
 }
 exports.default = GroupInvitedWidget;

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

@@ -2,12 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const CategoryTrendingUsersWidget_1 = require("../CategoryTrendingUsersWidget");
-const styles_1 = require("@mui/material/styles");
+const material_1 = require("@mui/material");
 const constants_1 = require("./constants");
 const classes = {
     root: `${constants_1.PREFIX}-skeleton-root`
 };
-const Root = (0, styles_1.styled)(CategoryTrendingUsersWidget_1.CategoryTrendingPeopleWidgetSkeleton, {
+const Root = (0, material_1.styled)(CategoryTrendingUsersWidget_1.CategoryTrendingPeopleWidgetSkeleton, {
     name: constants_1.PREFIX,
     slot: 'SkeletonRoot'
 })(() => ({}));

package/lib/cjs/components/GroupMembersButton/GroupMembersButton.d.ts

@@ -1,4 +1,4 @@
-import { ButtonProps } from '@mui/material/Button/Button';
+import { ButtonProps } from '@mui/material';
 import { SCGroupType } from '@selfcommunity/types';
 import { BaseDialogProps } from '../../shared/BaseDialog';
 export interface GroupMembersButtonProps extends Pick<ButtonProps, Exclude<keyof ButtonProps, 'onClick' | 'disabled'>> {

package/lib/cjs/components/GroupMembersButton/GroupMembersButton.js

@@ -3,8 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
-const styles_1 = require("@mui/material/styles");
-const useMediaQuery_1 = tslib_1.__importDefault(require("@mui/material/useMediaQuery"));
 const system_1 = require("@mui/system");
 const api_services_1 = require("@selfcommunity/api-services");
 const react_core_1 = require("@selfcommunity/react-core");
@@ -26,13 +24,13 @@ const classes = {
     dialogRoot: `${PREFIX}-dialog-root`,
     endMessage: `${PREFIX}-end-message`
 };
-const Root = (0, styles_1.styled)(material_1.Button, {
+const Root = (0, material_1.styled)(material_1.Button, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (_props, styles) => styles.root,
     shouldForwardProp: (prop) => prop !== 'subscribers'
 })(() => ({}));
-const DialogRoot = (0, styles_1.styled)(BaseDialog_1.default, {
+const DialogRoot = (0, material_1.styled)(BaseDialog_1.default, {
     name: PREFIX,
     slot: 'DialogRoot',
     overridesResolver: (_props, styles) => styles.dialogRoot
@@ -132,7 +130,7 @@ function GroupMembersButton(inProps) {
     const renderSurplus = (0, react_1.useCallback)(() => (0, buttonCounters_1.numberFormatter)(scGroup.subscribers_counter), [scGroup]);
     // RENDER
     const theme = (0, material_1.useTheme)();
-    const isMobile = (0, useMediaQuery_1.default)(theme.breakpoints.down('md'));
+    const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), onClick: handleToggleDialogOpen, disabled: loading || !scGroup || scGroup.subscribers_counter === 0, 
                 // @ts-expect-error this is needed to use subscribers into SCGroupMembersButton
                 subscribers: scGroup === null || scGroup === void 0 ? void 0 : scGroup.subscribers_counter }, rest, { children: loading || !scGroup ? ((0, jsx_runtime_1.jsx)(AvatarGroupSkeleton_1.default, Object.assign({}, rest))) : ((0, jsx_runtime_1.jsx)(material_1.AvatarGroup, Object.assign({ total: scGroup.subscribers_counter, renderSurplus: renderSurplus }, { children: members.map((c) => ((0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: c.username, src: c.avatar }, c.id))) }))) })), open && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ className: classes.dialogRoot, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.groupMembersButton.dialogTitle", id: "ui.groupMembersButton.dialogTitle", values: { total: scGroup.subscribers_counter } }), onClose: handleToggleDialogOpen, open: open }, DialogProps, { children: (0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, Object.assign({ dataLength: members.length, next: fetchMembers, hasMoreNext: next !== null || loading, loaderNext: (0, jsx_runtime_1.jsx)(User_1.UserSkeleton, { elevation: 0 }), height: isMobile ? '100%' : 400, endMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.endMessage }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupMembersButton.noOtherMembers", defaultMessage: "ui.groupMembersButton.noOtherMembers" }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: members.map((member) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(User_1.default, { elevation: 0, user: member, onClick: handleToggleDialogOpen }) }, member.id))) }) })) })))] }));

package/lib/cjs/components/GroupMembersWidget/GroupMembersWidget.js

@@ -3,8 +3,6 @@ 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 styles_1 = require("@mui/material/styles");
-const List_1 = tslib_1.__importDefault(require("@mui/material/List"));
 const material_1 = require("@mui/material");
 const Widget_1 = tslib_1.__importDefault(require("../Widget"));
 const api_services_1 = require("@selfcommunity/api-services");
@@ -32,11 +30,11 @@ const classes = {
     dialogRoot: `${constants_1.PREFIX}-dialog-root`,
     endMessage: `${constants_1.PREFIX}-end-message`
 };
-const Root = (0, styles_1.styled)(Widget_1.default, {
+const Root = (0, material_1.styled)(Widget_1.default, {
     name: constants_1.PREFIX,
     slot: 'Root'
 })(() => ({}));
-const DialogRoot = (0, styles_1.styled)(BaseDialog_1.default, {
+const DialogRoot = (0, material_1.styled)(BaseDialog_1.default, {
     name: constants_1.PREFIX,
     slot: 'DialogRoot'
 })(() => ({}));
@@ -98,6 +96,8 @@ function GroupMembersWidget(inProps) {
     // MEMO
     const contentAvailability = (0, react_1.useMemo)(() => react_core_1.SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY in scPreferencesContext.preferences &&
         scPreferencesContext.preferences[react_core_1.SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY].value, [scPreferencesContext.preferences]);
+    const privateMessagingEnabled = (0, react_1.useMemo)(() => react_core_1.SCPreferences.ADDONS_PRIVATE_MESSAGES_ENABLED in scPreferencesContext.preferences &&
+        scPreferencesContext.preferences[react_core_1.SCPreferences.ADDONS_PRIVATE_MESSAGES_ENABLED].value, [scPreferencesContext.preferences]);
     // HOOKS
     const theme = (0, material_1.useTheme)();
     const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
@@ -191,10 +191,10 @@ function GroupMembersWidget(inProps) {
     if (!state.initialized) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
     }
-    const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.title, variant: "h5" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupMembersWidget.title", defaultMessage: "ui.groupMembersWidget.title" }) })), !state.count ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.noResults, variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupMembersWidget.subtitle.noResults", defaultMessage: "" }) }))) : ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(List_1.default, { children: state.results.slice(0, state.visibleItems).map((user) => {
+    const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.title, variant: "h5" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupMembersWidget.title", defaultMessage: "ui.groupMembersWidget.title" }) })), !state.count ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.noResults, variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupMembersWidget.subtitle.noResults", defaultMessage: "" }) }))) : ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.List, { children: state.results.slice(0, state.visibleItems).map((user) => {
                                     var _a, _b;
-                                    return ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(User_1.default, { elevation: 0, actions: isGroupAdmin ? ((0, jsx_runtime_1.jsx)(GroupSettingsIconButton_1.default, { group: scGroup, user: user, onRemoveSuccess: () => handleRefresh(user.id) })) : ((_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.id) !== user.id ? ((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.USER_PRIVATE_MESSAGES_ROUTE_NAME, user) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupSettingsIconButton.item.message", defaultMessage: "ui.groupSettingsIconButton.item.message" }) }))) : null, isGroupAdmin: ((_b = scGroup === null || scGroup === void 0 ? void 0 : scGroup.managed_by) === null || _b === void 0 ? void 0 : _b.id) === user.id, user: user, userId: user.id }) }, user.id));
-                                }) }), state.count > state.visibleItems && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ className: classes.showMore, onClick: handleToggleDialogOpen }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupMembersWidget.button.showMore", defaultMessage: "ui.groupMembersWidget.button.showMore" }) })))] })), openDialog && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ className: classes.dialogRoot, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.groupMembersWidget.dialogTitle", id: "ui.groupMembersWidget.dialogTitle", values: { total: scGroup.subscribers_counter } }), onClose: handleToggleDialogOpen, open: openDialog }, DialogProps, { children: (0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, Object.assign({ dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: (0, jsx_runtime_1.jsx)(User_1.UserSkeleton, Object.assign({ elevation: 0 }, UserProps)), height: isMobile ? '100%' : 400, endMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.endMessage }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupMembersWidget.noMoreResults", defaultMessage: "ui.groupMembersWidget.noMoreResults" }) })) }, { children: (0, jsx_runtime_1.jsx)(List_1.default, { children: state.results.map((user) => {
+                                    return ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(User_1.default, { elevation: 0, actions: isGroupAdmin ? ((0, jsx_runtime_1.jsx)(GroupSettingsIconButton_1.default, { group: scGroup, user: user, onRemoveSuccess: () => handleRefresh(user.id) })) : ((_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.id) !== user.id && privateMessagingEnabled ? ((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.USER_PRIVATE_MESSAGES_ROUTE_NAME, user) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupSettingsIconButton.item.message", defaultMessage: "ui.groupSettingsIconButton.item.message" }) }))) : null, isGroupAdmin: ((_b = scGroup === null || scGroup === void 0 ? void 0 : scGroup.managed_by) === null || _b === void 0 ? void 0 : _b.id) === user.id, user: user, userId: user.id }) }, user.id));
+                                }) }), state.count > state.visibleItems && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ className: classes.showMore, onClick: handleToggleDialogOpen }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupMembersWidget.button.showMore", defaultMessage: "ui.groupMembersWidget.button.showMore" }) })))] })), openDialog && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ className: classes.dialogRoot, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.groupMembersWidget.dialogTitle", id: "ui.groupMembersWidget.dialogTitle", values: { total: scGroup.subscribers_counter } }), onClose: handleToggleDialogOpen, open: openDialog }, DialogProps, { children: (0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, Object.assign({ dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: (0, jsx_runtime_1.jsx)(User_1.UserSkeleton, Object.assign({ elevation: 0 }, UserProps)), height: isMobile ? '100%' : 400, endMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.endMessage }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupMembersWidget.noMoreResults", defaultMessage: "ui.groupMembersWidget.noMoreResults" }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: state.results.map((user) => {
                                     var _a, _b;
                                     return ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(User_1.default, { elevation: 0, actions: isGroupAdmin ? ((0, jsx_runtime_1.jsx)(GroupSettingsIconButton_1.default, { group: scGroup, user: user, onRemoveSuccess: () => handleRefresh(user.id) })) : ((_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.id) !== user.id ? ((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.USER_PRIVATE_MESSAGES_ROUTE_NAME, user) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupSettingsIconButton.item.message", defaultMessage: "ui.groupSettingsIconButton.item.message" }) }))) : null, isGroupAdmin: ((_b = scGroup === null || scGroup === void 0 ? void 0 : scGroup.managed_by) === null || _b === void 0 ? void 0 : _b.id) === user.id, user: user, userId: user.id }) }, user.id));
                                 }) }) })) })))] }), (0, jsx_runtime_1.jsx)(material_1.CardActions, Object.assign({ className: classes.actions }, { children: (0, jsx_runtime_1.jsx)(GroupInviteButton_1.default, { groupId: scGroup === null || scGroup === void 0 ? void 0 : scGroup.id, group: scGroup }) }))] }));

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

@@ -2,12 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const CategoryTrendingUsersWidget_1 = require("../CategoryTrendingUsersWidget");
-const styles_1 = require("@mui/material/styles");
+const material_1 = require("@mui/material");
 const constants_1 = require("./constants");
 const classes = {
     root: `${constants_1.PREFIX}-skeleton-root`
 };
-const Root = (0, styles_1.styled)(CategoryTrendingUsersWidget_1.CategoryTrendingPeopleWidgetSkeleton, {
+const Root = (0, material_1.styled)(CategoryTrendingUsersWidget_1.CategoryTrendingPeopleWidgetSkeleton, {
     name: constants_1.PREFIX,
     slot: 'SkeletonRoot'
 })(() => ({}));

package/lib/cjs/components/GroupRequestsWidget/GroupRequestsWidget.d.ts

@@ -4,7 +4,7 @@ import { CacheStrategies } from '@selfcommunity/utils';
 import { BaseDialogProps } from '../../shared/BaseDialog';
 import { VirtualScrollerItemProps } from '../../types/virtualScroller';
 import { UserProps } from '../User';
-import { GroupSubscribeButtonProps } from '../GroupSubscribeButton';
+import { AcceptRequestUserGroupButtonProps } from '../AcceptRequestUserGroupButton';
 export interface GroupRequestsWidgetProps extends VirtualScrollerItemProps, WidgetProps {
     /**
      * Group Object
@@ -16,6 +16,11 @@ export interface GroupRequestsWidgetProps extends VirtualScrollerItemProps, Widg
      * @default null
      */
     groupId?: number | string;
+    /**
+     * Hides this component
+     * @default true
+     */
+    autoHide?: boolean;
     /**
      * Limit the number of users to show
      * @default false
@@ -40,7 +45,7 @@ export interface GroupRequestsWidgetProps extends VirtualScrollerItemProps, Widg
      * Props to spread to group subscribe button component
      * @default {}
      */
-    GroupSubscribeButtonProps?: GroupSubscribeButtonProps;
+    AcceptRequestUserGroupButtonComponentProps?: AcceptRequestUserGroupButtonProps;
     /**
      * onSubscribeAction callback
      * @param user