@selfcommunity/react-ui 0.11.0-mui7.29 → 0.11.0-react-17.0.1.2

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

@@ -2,12 +2,13 @@ import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from 'react';
 import { useThemeProps } from '@mui/system';
-import { Avatar, Box, Button, Divider, FormGroup, Icon, Paper, Stack, Switch, TextField, Typography, styled } from '@mui/material';
+import { Avatar, Box, Divider, FormGroup, Icon, Paper, Stack, Switch, TextField, Typography, styled } from '@mui/material';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { SCPreferences, UserUtils, useSCPaymentsEnabled, useSCPreferences, useSCUser } from '@selfcommunity/react-core';
 import classNames from 'classnames';
 import { PREFIX } from './constants';
 import BaseDialog from '../../shared/BaseDialog';
+import { LoadingButton } from '@mui/lab';
 import ChangeGroupPicture from '../ChangeGroupPicture';
 import ChangeGroupCover from '../ChangeGroupCover';
 import { GROUP_DESCRIPTION_MAX_LENGTH, GROUP_TITLE_MAX_LENGTH } from '../../constants/Group';
@@ -246,30 +247,40 @@ export default function GroupForm(inProps) {
     /**
      * Renders root object
      */
-    return (_jsx(Root, Object.assign({ DialogContentProps: { dividers: false }, title: group ? (_jsx(FormattedMessage, { id: "ui.groupForm.title.edit", defaultMessage: "ui.groupForm.title.edit" })) : (_jsx(FormattedMessage, { id: "ui.groupForm.title", defaultMessage: "ui.groupForm.title" })), open: open, disableEscapeKeyDown: true, onClose: handleClose, className: classNames(classes.root, className), actions: _jsx(Button, Object.assign({ loading: field.isSubmitting, disabled: !field.name ||
+    return (_jsx(Root, Object.assign({ DialogContentProps: { dividers: false }, title: group ? (_jsx(FormattedMessage, { id: "ui.groupForm.title.edit", defaultMessage: "ui.groupForm.title.edit" })) : (_jsx(FormattedMessage, { id: "ui.groupForm.title", defaultMessage: "ui.groupForm.title" })), open: open, disableEscapeKeyDown: true, onClose: handleClose, className: classNames(classes.root, className), actions: _jsx(LoadingButton, Object.assign({ loading: field.isSubmitting, disabled: !field.name ||
                 Object.keys(error).length !== 0 ||
                 field.name.length > GROUP_TITLE_MAX_LENGTH ||
-                field.name.description > GROUP_DESCRIPTION_MAX_LENGTH, variant: "contained", onClick: handleSubmit, color: "secondary" }, { children: group ? (_jsx(FormattedMessage, { id: "ui.groupForm.button.edit", defaultMessage: "ui.groupForm.button.edit" })) : (_jsx(FormattedMessage, { id: "ui.groupForm.button.create", defaultMessage: "ui.groupForm.button.create" })) })) }, rest, { children: _jsxs(_Fragment, { children: [_jsxs(_Fragment, { children: [_jsxs(Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: [_jsx(Box, Object.assign({ className: classes.avatar }, { children: _jsx(Avatar, { children: field.imageOriginal ? _jsx("img", { src: field.imageOriginal, alt: "avatar" }) : _jsx(Icon, { children: "icon_image" }) }) })), _jsxs(_Fragment, { children: [_jsx(ChangeGroupPicture, { isCreationMode: true, onChange: handleChangeAvatar }), _jsx(ChangeGroupCover, { isCreationMode: true, onChange: handleChangeCover })] })] })), _jsx(Typography, Object.assign({ className: classNames(classes.header, { [classes.error]: error.emotionalImageOriginalError || error.imageOriginalError }), align: "center" }, { children: error.emotionalImageOriginalError || error.imageOriginalError ? (_jsx(FormattedMessage, { id: "ui.groupForm.header.error", defaultMessage: "ui.groupForm.header.error" })) : (_jsx(FormattedMessage, { id: "ui.groupForm.header", defaultMessage: "ui.groupForm.header" })) }))] }), _jsxs(FormGroup, Object.assign({ className: classes.form }, { children: [_jsx(TextField, { required: true, className: classes.name, placeholder: `${intl.formatMessage(messages.name)}`, margin: "normal", value: field.name, name: "name", onChange: handleChange, slotProps: {
-                                input: {
-                                    endAdornment: _jsx(Typography, Object.assign({ variant: "body2" }, { children: GROUP_TITLE_MAX_LENGTH - field.name.length }))
-                                }
-                            }, error: Boolean(((_c = field === null || field === void 0 ? void 0 : field.name) === null || _c === void 0 ? void 0 : _c.length) > GROUP_TITLE_MAX_LENGTH), helperText: ((_d = field === null || field === void 0 ? void 0 : field.name) === null || _d === void 0 ? void 0 : _d.length) > GROUP_TITLE_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.groupForm.name.error.maxLength", defaultMessage: "ui.groupForm.name.error.maxLength" })) : null }), _jsx(TextField, { multiline: true, className: classes.description, placeholder: `${intl.formatMessage(messages.description)}`, margin: "normal", value: field.description, name: "description", onChange: handleChange, slotProps: {
-                                input: {
-                                    endAdornment: (_jsx(Typography, Object.assign({ variant: "body2" }, { children: ((_e = field.description) === null || _e === void 0 ? void 0 : _e.length) ? GROUP_DESCRIPTION_MAX_LENGTH - field.description.length : GROUP_DESCRIPTION_MAX_LENGTH })))
-                                }
+                field.name.description > GROUP_DESCRIPTION_MAX_LENGTH, variant: "contained", onClick: handleSubmit, color: "secondary" }, { children: group ? (_jsx(FormattedMessage, { id: "ui.groupForm.button.edit", defaultMessage: "ui.groupForm.button.edit" })) : (_jsx(FormattedMessage, { id: "ui.groupForm.button.create", defaultMessage: "ui.groupForm.button.create" })) })) }, rest, { children: _jsxs(_Fragment, { children: [_jsxs(_Fragment, { children: [_jsxs(Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: [_jsx(Box, Object.assign({ className: classes.avatar }, { children: _jsx(Avatar, { children: field.imageOriginal ? _jsx("img", { src: field.imageOriginal, alt: "avatar" }) : _jsx(Icon, { children: "icon_image" }) }) })), _jsxs(_Fragment, { children: [_jsx(ChangeGroupPicture, { isCreationMode: true, onChange: handleChangeAvatar }), _jsx(ChangeGroupCover, { isCreationMode: true, onChange: handleChangeCover })] })] })), _jsx(Typography, Object.assign({ className: classNames(classes.header, { [classes.error]: error.emotionalImageOriginalError || error.imageOriginalError }), align: "center" }, { children: error.emotionalImageOriginalError || error.imageOriginalError ? (_jsx(FormattedMessage, { id: "ui.groupForm.header.error", defaultMessage: "ui.groupForm.header.error" })) : (_jsx(FormattedMessage, { id: "ui.groupForm.header", defaultMessage: "ui.groupForm.header" })) }))] }), _jsxs(FormGroup, Object.assign({ className: classes.form }, { children: [_jsx(TextField, { required: true, className: classes.name, placeholder: `${intl.formatMessage(messages.name)}`, margin: "normal", value: field.name, name: "name", onChange: handleChange, InputProps: {
+                                endAdornment: _jsx(Typography, Object.assign({ variant: "body2" }, { children: GROUP_TITLE_MAX_LENGTH - field.name.length }))
+                            }, error: Boolean(((_c = field === null || field === void 0 ? void 0 : field.name) === null || _c === void 0 ? void 0 : _c.length) > GROUP_TITLE_MAX_LENGTH), helperText: ((_d = field === null || field === void 0 ? void 0 : field.name) === null || _d === void 0 ? void 0 : _d.length) > GROUP_TITLE_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.groupForm.name.error.maxLength", defaultMessage: "ui.groupForm.name.error.maxLength" })) : null }), _jsx(TextField, { multiline: true, className: classes.description, placeholder: `${intl.formatMessage(messages.description)}`, margin: "normal", value: field.description, name: "description", onChange: handleChange, InputProps: {
+                                endAdornment: (_jsx(Typography, Object.assign({ variant: "body2" }, { children: ((_e = field.description) === null || _e === void 0 ? void 0 : _e.length) ? GROUP_DESCRIPTION_MAX_LENGTH - field.description.length : GROUP_DESCRIPTION_MAX_LENGTH })))
                             }, error: Boolean(((_f = field.description) === null || _f === void 0 ? void 0 : _f.length) > GROUP_DESCRIPTION_MAX_LENGTH), helperText: ((_g = field.description) === null || _g === void 0 ? void 0 : _g.length) > GROUP_DESCRIPTION_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.groupForm.description.error.maxLength", defaultMessage: "ui.groupForm.description.error.maxLength" })) : null }), privateEnabled && (_jsxs(Box, Object.assign({ className: classes.privacySection }, { children: [_jsx(Typography, Object.assign({ variant: "h4" }, { children: _jsx(FormattedMessage, { id: "ui.groupForm.privacy.title", defaultMessage: "ui.groupForm.privacy.title", values: {
-                                            b: (chunks) => _jsx("strong", { children: chunks }, "ui.groupForm.privacy.title.b")
+                                            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                            // @ts-ignore
+                                            b: (chunks) => _jsx("strong", { children: chunks })
                                         } }) })), _jsxs(Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [_jsxs(Typography, Object.assign({ className: classNames(classes.switchLabel, { [classes.active]: !field.isPublic }) }, { children: [_jsx(Icon, { children: "private" }), _jsx(FormattedMessage, { id: "ui.groupForm.privacy.private", defaultMessage: "ui.groupForm.privacy.private" })] })), _jsx(Switch, { className: classes.switch, checked: field.isPublic, onChange: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['isPublic']: !field.isPublic }))), disabled: group && group.privacy === SCGroupPrivacyType.PRIVATE }), _jsxs(Typography, Object.assign({ className: classNames(classes.switchLabel, { [classes.active]: field.isPublic }) }, { children: [_jsx(Icon, { children: "public" }), _jsx(FormattedMessage, { id: "ui.groupForm.privacy.public", defaultMessage: "ui.groupForm.privacy.public" })] }))] })), _jsx(Typography, Object.assign({ variant: "body2", className: classes.privacySectionInfo }, { children: field.isPublic ? (_jsx(FormattedMessage, { id: "ui.groupForm.privacy.public.info", defaultMessage: "ui.groupForm.privacy.public.info", values: {
-                                            b: (chunks) => _jsx("strong", { children: chunks }, Math.random())
+                                            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                            // @ts-ignore
+                                            b: (chunks) => _jsx("strong", { children: chunks })
                                         } })) : (_jsx(_Fragment, { children: group && group.privacy === SCGroupPrivacyType.PRIVATE ? (_jsx(FormattedMessage, { id: "ui.groupForm.privacy.private.info.edit", defaultMessage: "ui.groupForm.private.public.info.edit", values: {
-                                                b: (chunks) => _jsx("strong", { children: chunks }, Math.random())
+                                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                                // @ts-ignore
+                                                b: (chunks) => _jsx("strong", { children: chunks })
                                             } })) : (_jsx(FormattedMessage, { id: "ui.groupForm.privacy.private.info", defaultMessage: "ui.groupForm.private.public.info", values: {
-                                                b: (chunks) => _jsx("strong", { children: chunks }, Math.random())
+                                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                                // @ts-ignore
+                                                b: (chunks) => _jsx("strong", { children: chunks })
                                             } })) })) }))] }))), privateEnabled && visibilityEnabled && (_jsx(Box, Object.assign({ className: classes.visibilitySection }, { children: ((!field.isPublic && !group) || (group && !field.isPublic)) && (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ variant: "h4" }, { children: _jsx(FormattedMessage, { id: "ui.groupForm.visibility.title", defaultMessage: "ui.groupForm.visibility.title", values: {
-                                                b: (chunks) => _jsx("strong", { children: chunks }, "ui.groupForm.visibility.title.b")
+                                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                                // @ts-ignore
+                                                b: (chunks) => _jsx("strong", { children: chunks })
                                             } }) })), _jsxs(Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [_jsxs(Typography, Object.assign({ className: classNames(classes.switchLabel, { [classes.active]: !field.isVisible }) }, { children: [_jsx(Icon, { children: "visibility_off" }), _jsx(FormattedMessage, { id: "ui.groupForm.visibility.hidden", defaultMessage: "ui.groupForm.visibility.hidden" })] })), _jsx(Switch, { className: classes.switch, checked: field.isVisible, onChange: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['isVisible']: !field.isVisible }))) }), _jsxs(Typography, Object.assign({ className: classNames(classes.switchLabel, { [classes.active]: field.isVisible }) }, { children: [_jsx(Icon, { children: "visibility" }), _jsx(FormattedMessage, { id: "ui.groupForm.visibility.visible", defaultMessage: "ui.groupForm.visibility.visible" })] }))] })), _jsx(Typography, Object.assign({ variant: "body2", className: classes.visibilitySectionInfo }, { children: !field.isVisible ? (_jsx(FormattedMessage, { id: "ui.groupForm.visibility.hidden.info", defaultMessage: "ui.groupForm.visibility.hidden.info", values: {
-                                                b: (chunks) => _jsx("strong", { children: chunks }, "ui.groupForm.visibility.hidden.info.b")
+                                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                                // @ts-ignore
+                                                b: (chunks) => _jsx("strong", { children: chunks })
                                             } })) : (_jsx(FormattedMessage, { id: "ui.groupForm.visibility.visible.info", defaultMessage: "ui.groupForm.visibility.visible.info", values: {
-                                                b: (chunks) => _jsx("strong", { children: chunks }, "ui.groupForm.visibility.visible.info.b")
+                                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                                // @ts-ignore
+                                                b: (chunks) => _jsx("strong", { children: chunks })
                                             } })) }))] })) })))] })), isPaymentsEnabled && isStaff && (_jsx(Box, Object.assign({ className: classes.paywallsConfiguratorWrap }, { children: _jsx(PaywallsConfigurator, Object.assign({}, (group && { contentId: group.id }), { contentType: SCContentType.GROUP, onChangeContentAccessType: handleChangeContentAccessType, onChangePaymentProducts: handleChangePaymentsProducts })) }))), !group && (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsx(Box, Object.assign({ className: classes.inviteSection }, { children: _jsx(GroupInviteButton, { handleInvitations: handleInviteSection }) }))] }))] }) })));
 }

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

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

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

@@ -7,6 +7,7 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { SCUserContext, useSCFetchGroup } from '@selfcommunity/react-core';
 import classNames from 'classnames';
 import BaseDialog from '../../shared/BaseDialog';
+import { LoadingButton } from '@mui/lab';
 import { GroupService } from '@selfcommunity/api-services';
 import User from '../User';
 import { SCOPE_SC_UI } from '../../constants/Errors';
@@ -35,13 +36,13 @@ const classes = {
 const Root = styled(Button, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (_props, styles) => styles.root
-})(() => ({}));
+    overridesResolver: (props, styles) => styles.root
+})(({ theme }) => ({}));
 const DialogRoot = styled(BaseDialog, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (_props, styles) => styles.dialogRoot
-})(() => ({}));
+    overridesResolver: (props, styles) => styles.dialogRoot
+})(({ theme }) => ({}));
 /**
  *> API documentation for the Community-JS Group Invite Button component. Learn about the available props and the CSS API.
  *
@@ -202,7 +203,7 @@ export default function GroupInviteButton(inProps) {
         }
     };
     // Autocomplete Handlers
-    const handleInputChange = (_event, value, reason) => {
+    const handleInputChange = (event, value, reason) => {
         switch (reason) {
             case 'input':
                 setValue(value);
@@ -252,9 +253,7 @@ export default function GroupInviteButton(inProps) {
     /**
      * Renders root object
      */
-    return (_jsxs(React.Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className), onClick: handleClose, variant: scGroup ? 'contained' : 'outlined', color: scGroup ? 'secondary' : 'inherit', startIcon: _jsx(Icon, { children: "add" }) }, rest, { children: _jsx(FormattedMessage, { id: "ui.groupInviteButton", defaultMessage: "ui.groupInviteButton" }) })), open && (_jsx(DialogRoot, Object.assign({ DialogContentProps: { dividers: false }, open: true, className: classes.dialogRoot, title: _jsxs(_Fragment, { children: [_jsx(IconButton, Object.assign({ onClick: handleClose }, { children: _jsx(Icon, { children: "arrow_back" }) })), _jsx(Typography, Object.assign({ className: classes.dialogTitle }, { children: _jsx(FormattedMessage, { id: "ui.groupInviteButton.dialog.title", defaultMessage: "ui.groupInviteButton.dialog.title" }) })), _jsx(Button, Object.assign({ size: "small", color: "secondary", variant: "contained", onClick: handleSendInvitations, loading: isSending, disabled: !invited.length }, { children: _jsx(FormattedMessage, { id: "ui.groupInviteButton.dialog.button.end", defaultMessage: "ui.groupInviteButton.dialog.button.end" }) }))] }) }, { children: _jsxs(Box, Object.assign({ className: classes.dialogContent }, { children: [_jsx(Autocomplete, { className: classes.autocomplete, loading: loading, size: "small", multiple: true, freeSolo: true, disableClearable: true, options: suggested, onChange: handleChange, onInputChange: handleInputChange, inputValue: value, filterOptions: filterOptions, value: invited, getOptionLabel: (option) => (option ? option.username : '...'), isOptionEqualToValue: (option, value) => (option ? value.id === option.id : false), renderTags: () => null, renderOption: (props, option) => (_jsxs(Box, Object.assign({ component: "li" }, props, { children: [_jsx(Avatar, { alt: option.username, src: option.avatar }), _jsx(Typography, Object.assign({ ml: 1 }, { children: option.username }))] }))), renderInput: (params) => (_jsx(TextField, Object.assign({}, params, { variant: "outlined", placeholder: `${intl.formatMessage(messages.placeholder)}`, slotProps: {
-                                    input: Object.assign(Object.assign({}, params.InputProps), { className: classes.input, startAdornment: (_jsxs(_Fragment, { children: [_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(Icon, Object.assign({ className: classes.icon }, { children: "search" })) })), params.InputProps.startAdornment] })) })
-                                } }))) }), _jsx(Box, Object.assign({ className: classes.invitedBox }, { children: invited.map((option, index) => (_jsx(Chip, { avatar: _jsx(Avatar, { alt: option.username, src: option.avatar }), label: option.username, onDelete: () => {
+    return (_jsxs(React.Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className), onClick: handleClose, variant: scGroup ? 'contained' : 'outlined', color: scGroup ? 'secondary' : 'inherit', startIcon: _jsx(Icon, { children: "add" }) }, rest, { children: _jsx(FormattedMessage, { id: "ui.groupInviteButton", defaultMessage: "ui.groupInviteButton" }) })), open && (_jsx(DialogRoot, Object.assign({ DialogContentProps: { dividers: false }, open: true, className: classes.dialogRoot, title: _jsxs(_Fragment, { children: [_jsx(IconButton, Object.assign({ onClick: handleClose }, { children: _jsx(Icon, { children: "arrow_back" }) })), _jsx(Typography, Object.assign({ className: classes.dialogTitle }, { children: _jsx(FormattedMessage, { id: "ui.groupInviteButton.dialog.title", defaultMessage: "ui.groupInviteButton.dialog.title" }) })), _jsx(LoadingButton, Object.assign({ size: "small", color: "secondary", variant: "contained", onClick: handleSendInvitations, loading: isSending, disabled: !invited.length }, { children: _jsx(FormattedMessage, { id: "ui.groupInviteButton.dialog.button.end", defaultMessage: "ui.groupInviteButton.dialog.button.end" }) }))] }) }, { children: _jsxs(Box, Object.assign({ className: classes.dialogContent }, { children: [_jsx(Autocomplete, { className: classes.autocomplete, loading: loading, size: "small", multiple: true, freeSolo: true, disableClearable: true, options: suggested, onChange: handleChange, onInputChange: handleInputChange, inputValue: value, filterOptions: filterOptions, value: invited, getOptionLabel: (option) => (option ? option.username : '...'), isOptionEqualToValue: (option, value) => (option ? value.id === option.id : false), renderTags: () => null, renderOption: (props, option) => (_jsxs(Box, Object.assign({ component: "li" }, props, { children: [_jsx(Avatar, { alt: option.username, src: option.avatar }), _jsx(Typography, Object.assign({ ml: 1 }, { children: option.username }))] }))), renderInput: (params) => (_jsx(TextField, Object.assign({}, params, { variant: "outlined", placeholder: `${intl.formatMessage(messages.placeholder)}`, InputProps: Object.assign(Object.assign({}, params.InputProps), { className: classes.input, startAdornment: (_jsxs(_Fragment, { children: [_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(Icon, Object.assign({ className: classes.icon }, { children: "search" })) })), params.InputProps.startAdornment] })) }) }))) }), _jsx(Box, Object.assign({ className: classes.invitedBox }, { children: invited.map((option, index) => (_jsx(Chip, { avatar: _jsx(Avatar, { alt: option.username, src: option.avatar }), label: option.username, onDelete: () => {
                                     handleDelete(option);
                                 }, style: { marginRight: 8 } }, index))) })), _jsxs(Box, Object.assign({ className: classes.suggested }, { children: [list.length !== 0 && (_jsx(Typography, Object.assign({ variant: "h4", fontWeight: "bold" }, { children: _jsx(FormattedMessage, { id: "ui.groupInviteButton.dialog.content.list", defaultMessage: "ui.groupInviteButton.dialog.content.list" }) }))), list.slice(0, 5).map((user, index) => (_jsx(User, { elevation: 0, actions: _jsx(_Fragment, {}), user: user, userId: user.id, buttonProps: { onClick: () => handleUserInvite(user) } }, index)))] }))] })) })))] }));
 }

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

@@ -131,16 +131,10 @@ export default function GroupSettingsIconButton(inProps) {
             ];
         }
     };
-    return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { onClick: handleOpen }, { children: _jsx(Icon, { children: "more_vert" }) })), Boolean(anchorEl) && (_jsx(_Fragment, { children: isMobile ? (_jsx(SwipeableDrawerRoot, Object.assign({ className: classes.drawerRoot, anchor: "bottom", open: true, onClose: handleClose, onOpen: handleOpen, slotProps: {
-                        paper: {
-                            className: classes.paper
-                        }
-                    }, disableSwipeToOpen: true }, { children: _jsx(List, { children: renderList() }) }))) : (_jsx(MenuRoot, Object.assign({ className: classes.menuRoot, anchorEl: anchorEl, open: true, onClose: handleClose, slotProps: {
-                        paper: {
-                            className: classes.paper
-                        }
-                    } }, { children: renderList() }))) })), openConfirmDialog && (_jsx(ConfirmDialog, { open: openConfirmDialog, title: _jsx(FormattedMessage, { id: "ui.groupSettingsIconButton.dialog.msg", defaultMessage: "ui.groupSettingsIconButton.dialog.msg", values: {
-                        b: (chunks) => _jsx("strong", { children: chunks }, "ui.groupSettingsIconButton.dialog.msg.b"),
+    return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { onClick: handleOpen }, { children: _jsx(Icon, { children: "more_vert" }) })), Boolean(anchorEl) && (_jsx(_Fragment, { children: isMobile ? (_jsx(SwipeableDrawerRoot, Object.assign({ className: classes.drawerRoot, anchor: "bottom", open: true, onClose: handleClose, onOpen: handleOpen, PaperProps: { className: classes.paper }, disableSwipeToOpen: true }, { children: _jsx(List, { children: renderList() }) }))) : (_jsx(MenuRoot, Object.assign({ className: classes.menuRoot, anchorEl: anchorEl, open: true, onClose: handleClose, PaperProps: { className: classes.paper } }, { children: renderList() }))) })), openConfirmDialog && (_jsx(ConfirmDialog, { open: openConfirmDialog, title: _jsx(FormattedMessage, { id: "ui.groupSettingsIconButton.dialog.msg", defaultMessage: "ui.groupSettingsIconButton.dialog.msg", values: {
+                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                        // @ts-ignore
+                        b: (...chunks) => _jsx("strong", { children: chunks }),
                         user: user.username,
                         group: group.name
                     } }), btnConfirm: _jsx(FormattedMessage, { id: "ui.groupSettingsIconButton.dialog.confirm", defaultMessage: "ui.groupSettingsIconButton.dialog.confirm" }), onConfirm: handleRemoveUser, onClose: handleCloseDialog }))] }));

package/lib/esm/components/GroupSubscribeButton/GroupSubscribeButton.js

@@ -1,10 +1,11 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from 'react';
-import { Button, styled } from '@mui/material';
+import { styled } from '@mui/material';
 import { CacheStrategies, Logger } from '@selfcommunity/utils';
 import { useSCContext, useSCFetchGroup, useSCPaymentsEnabled, useSCUser } from '@selfcommunity/react-core';
 import { SCContentType, SCGroupPrivacyType, SCGroupSubscriptionStatusType } from '@selfcommunity/types';
+import { LoadingButton } from '@mui/lab';
 import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
 import { useThemeProps } from '@mui/system';
@@ -16,11 +17,11 @@ const PREFIX = 'SCGroupSubscribeButton';
 const classes = {
     root: `${PREFIX}-root`
 };
-const Root = styled(Button, {
+const Root = styled(LoadingButton, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (_props, styles) => styles.root
-})(() => ({}));
+    overridesResolver: (props, styles) => styles.root
+})(({ theme }) => ({}));
 const BuyButtonRoot = styled(BuyButton, {
     name: PREFIX,
     slot: 'BuyButtonRoot'

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

@@ -172,21 +172,21 @@ export default function Groups(inProps) {
     /**
      * Renders groups list
      */
-    const content = (_jsxs(_Fragment, { children: [showFilters && (groups.length !== 0 || search.length !== 0) && (_jsx(Grid, Object.assign({ container: true, width: "100%", direction: "row", justifyContent: "center", alignItems: "center", className: classes.filters }, { children: filters ? (filters) : (_jsx(Grid, Object.assign({ size: { xs: 12, md: 6 } }, { children: _jsx(TextField, { className: classes.search, fullWidth: true, value: search, label: _jsx(FormattedMessage, { id: "ui.groups.filterByName", defaultMessage: "ui.groups.filterByName" }), variant: "outlined", onChange: handleOnChangeFilterName, disabled: loading, onKeyUp: (e) => {
+    const content = (_jsxs(_Fragment, { children: [showFilters && (groups.length !== 0 || search.length !== 0) && (_jsx(Grid, Object.assign({ container: true, direction: "row", justifyContent: "center", alignItems: "center", className: classes.filters }, { children: filters ? (filters) : (_jsx(Grid, Object.assign({ item: true, xs: 12, md: 6 }, { children: _jsx(TextField, { className: classes.search, fullWidth: true, value: search, label: _jsx(FormattedMessage, { id: "ui.groups.filterByName", defaultMessage: "ui.groups.filterByName" }), variant: "outlined", onChange: handleOnChangeFilterName, disabled: loading, onKeyUp: (e) => {
                             e.preventDefault();
                             if (e.key === 'Enter') {
                                 fetchGroups();
                             }
-                        }, slotProps: {
-                            input: {
-                                endAdornment: (_jsxs(InputAdornment, Object.assign({ position: "end" }, { children: [search.length > 0 && (_jsx(IconButton, Object.assign({ onClick: () => {
-                                                setSearch('');
-                                                fetchGroups('');
-                                            }, disabled: loading }, { children: _jsx(Icon, { children: "close" }) }))), isMobile ? (_jsx(IconButton, Object.assign({ onClick: () => fetchGroups(), disabled: loading }, { children: _jsx(Icon, { children: "search" }) }))) : (_jsx(Button, { size: "small", variant: "contained", color: "secondary", onClick: () => fetchGroups(), endIcon: _jsx(Icon, { children: "search" }), disabled: loading }))] })))
-                            }
+                        }, InputProps: {
+                            endAdornment: (_jsxs(InputAdornment, Object.assign({ position: "end" }, { children: [search.length > 0 && (_jsx(IconButton, Object.assign({ onClick: () => {
+                                            setSearch('');
+                                            fetchGroups('');
+                                        }, disabled: loading }, { children: _jsx(Icon, { children: "close" }) }))), isMobile ? (_jsx(IconButton, Object.assign({ onClick: () => fetchGroups(), disabled: loading }, { children: _jsx(Icon, { children: "search" }) }))) : (_jsx(Button, { size: "small", variant: "contained", color: "secondary", onClick: () => fetchGroups(), endIcon: _jsx(Icon, { children: "search" }), disabled: loading }))] })))
                         } }) }))) }))), _jsx(_Fragment, { children: !groups.length ? (_jsx(Box, Object.assign({ className: classes.noResults }, { children: search.length ? (_jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.groups.noResults", defaultMessage: "ui.groups.noResults" }) }))) : !onlyStaffEnabled ? (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ variant: "h4" }, { children: _jsx(FormattedMessage, { id: "ui.groups.noGroups.title", defaultMessage: "ui.groups.noGroups.title" }) })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.groups.noGroups.subtitle", defaultMessage: "ui.groups.noGroups.subtitle" }) }))] })) : (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ variant: "h4" }, { children: _jsx(FormattedMessage, { id: "ui.groups.noGroups.title.onlyStaff", defaultMessage: "ui.groups.noGroups.title.onlyStaff" }) })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.groups.noGroups.subtitle.onlyStaff", defaultMessage: "ui.groups.noGroups.subtitle.onlyStaff" }) }))] })) }))) : (_jsx(InfiniteScroll, Object.assign({ dataLength: groups.length, next: handleNext, hasMoreNext: Boolean(next), loaderNext: isMobile ? _jsx(GroupSkeleton, {}) : _jsx(Skeleton, { groupsNumber: 2 }), endMessage: _jsx(Typography, Object.assign({ component: "div", className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.groups.endMessage", defaultMessage: "ui.groups.endMessage", values: {
+                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                // @ts-ignore
                                 button: (chunk) => (_jsx(Button, Object.assign({ color: "secondary", variant: "text", onClick: handleScrollUp }, { children: chunk })))
-                            } }) })) }, { children: _jsx(Grid, Object.assign({ container: true, width: "100%", spacing: { xs: 2 }, className: classes.groups }, { children: groups.map((group) => (_jsx(Grid, Object.assign({ size: { xs: 12, sm: 8, md: 6 }, className: classes.item }, { children: _jsx(Group, Object.assign({ group: group, groupId: group.id, actionRedirect: true }, GroupComponentProps)) }), group.id))) })) }))) })] }));
+                            } }) })) }, { children: _jsx(Grid, Object.assign({ container: true, spacing: { xs: 2 }, className: classes.groups }, { children: groups.map((group) => (_jsx(Grid, Object.assign({ item: true, xs: 12, sm: 8, md: 6, className: classes.item }, { children: _jsx(Group, Object.assign({ group: group, groupId: group.id, actionRedirect: true }, GroupComponentProps)) }), group.id))) })) }))) })] }));
     // RENDER
     if (!contentAvailability && !scUserContext.user) {
         return _jsx(HiddenPlaceholder, {});

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

@@ -1,5 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
+;
 import { PREFIX } from './constants';
 import { Box, Grid, styled } from '@mui/material';
 import classNames from 'classnames';
@@ -35,5 +36,5 @@ const Root = styled(Box, {
  */
 export default function GroupsSkeleton(inProps) {
     const { className, GroupSkeletonProps = {}, groupsNumber = 20 } = inProps, rest = __rest(inProps, ["className", "GroupSkeletonProps", "groupsNumber"]);
-    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsx(Grid, Object.assign({ container: true, width: "100%", spacing: { xs: 3 }, className: classes.groups }, { children: [...Array(groupsNumber)].map((_category, index) => (_jsx(Grid, Object.assign({ size: { xs: 12, sm: 8, md: 6 } }, { children: _jsx(GroupSkeleton, Object.assign({ elevation: 0, variant: "outlined" }, GroupSkeletonProps)) }), index))) })) })));
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsx(Grid, Object.assign({ container: true, spacing: { xs: 3 }, className: classes.groups }, { children: [...Array(groupsNumber)].map((category, index) => (_jsx(Grid, Object.assign({ item: true, xs: 12, sm: 8, md: 6 }, { children: _jsx(GroupSkeleton, Object.assign({ elevation: 0, variant: 'outlined' }, GroupSkeletonProps)) }), index))) })) })));
 }

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

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

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

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

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

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

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

@@ -2,13 +2,14 @@ import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
-import { TextField, Typography, FormGroup, styled, Button } from '@mui/material';
+import { TextField, Typography, FormGroup, styled } from '@mui/material';
 import { http, Endpoints } from '@selfcommunity/api-services';
 import { Logger } from '@selfcommunity/utils';
 import { useSCUser } from '@selfcommunity/react-core';
 import BaseDialog from '../../../shared/BaseDialog';
 import classNames from 'classnames';
 import { SCOPE_SC_UI } from '../../../constants/Errors';
+import { LoadingButton } from '@mui/lab';
 import { PREFIX } from '../constants';
 const messages = defineMessages({
     name: {
@@ -58,7 +59,7 @@ export default function CreateIncubatorDialog(props) {
                 slogan: slogan
             }
         })
-            .then(() => {
+            .then((res) => {
             setIsSubmitting(false);
             setSubmitted(true);
         })
@@ -73,10 +74,10 @@ export default function CreateIncubatorDialog(props) {
     }
     let dialogContent;
     if (submitted) {
-        dialogContent = (_jsx(Typography, Object.assign({ variant: "subtitle2", className: classes.submittedMessage }, { children: _jsx(FormattedMessage, { id: "ui.incubatorListWidget.createIncubatorDialog.propose.success", defaultMessage: "ui.incubatorListWidget.createIncubatorDialog.propose.success" }) })));
+        dialogContent = (_jsx(Typography, Object.assign({ variant: 'subtitle2', className: classes.submittedMessage }, { children: _jsx(FormattedMessage, { id: "ui.incubatorListWidget.createIncubatorDialog.propose.success", defaultMessage: "ui.incubatorListWidget.createIncubatorDialog.propose.success" }) })));
     }
     else {
-        dialogContent = (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ component: "span", className: classes.intro }, { children: _jsx(FormattedMessage, { id: "ui.incubatorsListDialog.createIncubatorDialog.intro", defaultMessage: "ui.incubatorsListDialog.createIncubatorDialog.intro" }) })), _jsxs(FormGroup, Object.assign({ className: classes.form }, { children: [_jsx(TextField, { required: true, error: Boolean(error), className: classes.name, placeholder: `${intl.formatMessage(messages.name)}`, margin: "normal", value: name, onChange: (event) => setName(event.target.value) }), _jsx(TextField, { multiline: true, error: Boolean(error), className: classes.slogan, placeholder: `${intl.formatMessage(messages.slogan)}`, margin: "normal", value: slogan, onChange: (event) => setSlogan(event.target.value) })] })), _jsx(Button, Object.assign({ loading: isSubmitting, disabled: !name || Boolean(error), variant: "contained", onClick: handleSubmit }, { children: _jsx(FormattedMessage, { id: "ui.incubatorListWidget.createIncubatorDialog.button", defaultMessage: "ui.incubatorListWidget.createIncubatorDialog.button" }) }))] }));
+        dialogContent = (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ component: 'span', className: classes.intro }, { children: _jsx(FormattedMessage, { id: "ui.incubatorsListDialog.createIncubatorDialog.intro", defaultMessage: "ui.incubatorsListDialog.createIncubatorDialog.intro" }) })), _jsxs(FormGroup, Object.assign({ className: classes.form }, { children: [_jsx(TextField, { required: true, error: Boolean(error), className: classes.name, placeholder: `${intl.formatMessage(messages.name)}`, margin: "normal", value: name, onChange: (event) => setName(event.target.value) }), _jsx(TextField, { multiline: true, error: Boolean(error), className: classes.slogan, placeholder: `${intl.formatMessage(messages.slogan)}`, margin: "normal", value: slogan, onChange: (event) => setSlogan(event.target.value) })] })), _jsx(LoadingButton, Object.assign({ loading: isSubmitting, disabled: !name || Boolean(error), variant: "contained", onClick: handleSubmit }, { children: _jsx(FormattedMessage, { id: "ui.incubatorListWidget.createIncubatorDialog.button", defaultMessage: "ui.incubatorListWidget.createIncubatorDialog.button" }) }))] }));
     }
     // RENDER
     return (_jsx(Root, Object.assign({ title: _jsx(FormattedMessage, { id: "ui.incubatorListWidget.createIncubatorDialog.title", defaultMessage: "ui.incubatorListWidget.createIncubatorDialog.title" }), open: open, onClose: onClose, className: classNames(classes.root, className) }, rest, { children: dialogContent })));

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

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

package/lib/esm/components/IncubatorSubscribeButton/IncubatorSubscribeButton.js

@@ -1,8 +1,9 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
-import { Button, styled } from '@mui/material';
+import { styled } from '@mui/material';
 import { SCOPE_SC_UI } from '../../constants/Errors';
+import { LoadingButton } from '@mui/lab';
 import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
 import { CacheStrategies, Logger } from '@selfcommunity/utils';
@@ -12,11 +13,11 @@ const PREFIX = 'SCIncubatorSubscribeButton';
 const classes = {
     root: `${PREFIX}-root`
 };
-const Root = styled(Button, {
+const Root = styled(LoadingButton, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (_props, styles) => styles.root
-})(() => ({}));
+    overridesResolver: (props, styles) => styles.root
+})(({ theme }) => ({}));
 /**
  * > API documentation for the Community-JS Incubator Subscribe Button component. Learn about the available props and the CSS API.
 

package/lib/esm/components/IncubatorSuggestionWidget/IncubatorSuggestionWidget.js

@@ -185,6 +185,6 @@ export default function IncubatorSuggestionWidget(inProps) {
     if (!state.initialized) {
         return _jsx(Skeleton, {});
     }
-    const content = (_jsxs(CardContent, { children: [_jsx(Typography, Object.assign({ className: classes.title, variant: "h5" }, { children: _jsx(FormattedMessage, { id: "ui.incubatorSuggestionWidget.title", defaultMessage: "ui.incubatorSuggestionWidget.title" }) })), !state.count ? (_jsx(Typography, Object.assign({ className: classes.noResults, variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.incubatorSuggestionWidget.noResults", defaultMessage: "ui.incubatorSuggestionWidget.noResults" }) }))) : (_jsxs(React.Fragment, { children: [_jsx(List, { children: state.results.slice(0, state.visibleItems).map((incubator) => (_jsx(ListItem, { children: _jsx(Incubator, Object.assign({ elevation: 0, incubator: incubator, subscribeButtonProps: { onSubscribe: handleSubscriptionsUpdate }, ButtonProps: { onClick: () => handleIncubatorDetailDialogOpening(incubator) } }, IncubatorProps)) }, incubator.id))) }), state.count > state.visibleItems && (_jsx(Button, Object.assign({ className: classes.showMore, onClick: handleToggleDialogOpen }, { children: _jsx(FormattedMessage, { id: "ui.incubatorSuggestionWidget.ShowAll", defaultMessage: "ui.incubatorSuggestionWidget.ShowAll" }) })))] })), openDialog && (_jsx(DialogRoot, Object.assign({ className: classes.dialogRoot, title: _jsx(FormattedMessage, { id: "ui.incubatorSuggestionWidget.title", defaultMessage: "ui.incubatorSuggestionWidget.title" }), onClose: handleToggleDialogOpen, open: openDialog }, DialogProps, { children: _jsx(InfiniteScroll, Object.assign({ dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: _jsx(IncubatorSkeleton, Object.assign({ elevation: 0 }, IncubatorProps)), height: isMobile ? '100vh' : 400, endMessage: _jsx(Typography, Object.assign({ className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.incubatorSuggestionWidget.noMoreIncubators", defaultMessage: "ui.incubatorSuggestionWidget.noMoreIncubators" }) })) }, { children: _jsx(List, { children: state.results.map((incubator) => (_jsx(ListItem, { children: _jsx(Incubator, Object.assign({ elevation: 0, incubator: incubator, subscribeButtonProps: { onSubscribe: handleSubscriptionsUpdate }, ButtonProps: { onClick: () => handleIncubatorDetailDialogOpening(incubator) } }, IncubatorProps)) }, incubator.id))) }) })) }))), openIncubatorDetailDialog && (_jsx(IncubatorDetail, { open: openIncubatorDetailDialog, onClose: handleIncubatorDetailDialogClose, incubator: detailObj, onSubscriptionsUpdate: handleSubscriptionsUpdate }))] }));
+    const content = (_jsxs(CardContent, { children: [_jsx(Typography, Object.assign({ className: classes.title, variant: 'h5' }, { children: _jsx(FormattedMessage, { id: "ui.incubatorSuggestionWidget.title", defaultMessage: "ui.incubatorSuggestionWidget.title" }) })), !state.count ? (_jsx(Typography, Object.assign({ className: classes.noResults, variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.incubatorSuggestionWidget.noResults", defaultMessage: "ui.incubatorSuggestionWidget.noResults" }) }))) : (_jsxs(React.Fragment, { children: [_jsx(List, { children: state.results.slice(0, state.visibleItems).map((incubator) => (_jsx(ListItem, { children: _jsx(Incubator, Object.assign({ elevation: 0, incubator: incubator, subscribeButtonProps: { onSubscribe: handleSubscriptionsUpdate }, ButtonProps: { onClick: () => handleIncubatorDetailDialogOpening(incubator) } }, IncubatorProps)) }, incubator.id))) }), state.count > state.visibleItems && (_jsx(Button, Object.assign({ className: classes.showMore, onClick: handleToggleDialogOpen }, { children: _jsx(FormattedMessage, { id: "ui.incubatorSuggestionWidget.ShowAll", defaultMessage: "ui.incubatorSuggestionWidget.ShowAll" }) })))] })), openDialog && (_jsx(DialogRoot, Object.assign({ className: classes.dialogRoot, title: _jsx(FormattedMessage, { id: "ui.incubatorSuggestionWidget.title", defaultMessage: "ui.incubatorSuggestionWidget.title" }), onClose: handleToggleDialogOpen, open: openDialog }, DialogProps, { children: _jsx(InfiniteScroll, Object.assign({ dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: _jsx(IncubatorSkeleton, Object.assign({ elevation: 0 }, IncubatorProps)), height: isMobile ? '100vh' : 400, endMessage: _jsx(Typography, Object.assign({ className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.incubatorSuggestionWidget.noMoreIncubators", defaultMessage: "ui.incubatorSuggestionWidget.noMoreIncubators" }) })) }, { children: _jsx(List, { children: state.results.map((incubator) => (_jsx(ListItem, { children: _jsx(Incubator, Object.assign({ elevation: 0, incubator: incubator, subscribeButtonProps: { onSubscribe: handleSubscriptionsUpdate }, ButtonProps: { onClick: () => handleIncubatorDetailDialogOpening(incubator) } }, IncubatorProps)) }, incubator.id))) }) })) }))), openIncubatorDetailDialog && (_jsx(IncubatorDetail, { open: openIncubatorDetailDialog, onClose: handleIncubatorDetailDialogClose, incubator: detailObj, onSubscriptionsUpdate: handleSubscriptionsUpdate }))] }));
     return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: content })));
 }

package/lib/esm/components/InviteUserEventButton/InviteUserEventButton.js

@@ -1,6 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Button, styled } from '@mui/material';
+import { LoadingButton } from '@mui/lab';
+import { styled } from '@mui/material';
 import { useThemeProps } from '@mui/system';
 import { EventService } from '@selfcommunity/api-services';
 import { useSCFetchEvent, useSCFetchUser } from '@selfcommunity/react-core';
@@ -13,7 +14,7 @@ const PREFIX = 'SCInviteUserEventButton';
 const classes = {
     root: `${PREFIX}-root`
 };
-const InviteButton = styled(Button, {
+const InviteButton = styled(LoadingButton, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (_props, styles) => styles.root

package/lib/esm/components/LessonAppbar/LessonAppbar.js

@@ -2,10 +2,11 @@ import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useThemeProps } from '@mui/system';
 import classNames from 'classnames';
-import { AppBar, Icon, IconButton, Toolbar, Typography, Box, styled, Button } from '@mui/material';
+import { AppBar, Icon, IconButton, Toolbar, Typography, Box, styled } from '@mui/material';
 import { PREFIX } from './constants';
 import { SCLessonActionsType } from '../../types';
 import { FormattedMessage } from 'react-intl';
+import { LoadingButton } from '@mui/lab';
 const classes = {
     root: `${PREFIX}-root`,
     startItems: `${PREFIX}-start-items`,
@@ -15,9 +16,9 @@ const classes = {
 const Root = styled(AppBar, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (_props, styles) => [styles.root],
+    overridesResolver: (props, styles) => [styles.root],
     shouldForwardProp: (prop) => prop !== 'open'
-})(() => ({}));
+})(({ theme }) => ({}));
 export default function LessonAppbar(inProps) {
     // PROPS
     const props = useThemeProps({
@@ -25,5 +26,5 @@ export default function LessonAppbar(inProps) {
         name: PREFIX
     });
     const { className = null, title = '', showComments, activePanel = null, handleOpen, onSave, editMode, onArrowBackClick, updating } = props, rest = __rest(props, ["className", "title", "showComments", "activePanel", "handleOpen", "onSave", "editMode", "onArrowBackClick", "updating"]);
-    return (_jsx(Root, Object.assign({ position: "fixed", open: Boolean(activePanel), className: classNames(classes.root, className) }, rest, { children: _jsxs(Toolbar, { children: [_jsxs(Box, Object.assign({ className: classes.startItems }, { children: [_jsx(IconButton, Object.assign({ edge: "start", onClick: onArrowBackClick }, { children: _jsx(Icon, { children: "arrow_back" }) })), _jsx(Typography, Object.assign({ variant: "h6", className: classes.title }, { children: title }))] })), editMode ? (_jsxs(_Fragment, { children: [_jsx(IconButton, Object.assign({ onClick: () => handleOpen(SCLessonActionsType.SETTINGS), color: "primary" }, { children: _jsx(Icon, { children: "settings" }) })), _jsx(Button, Object.assign({ variant: "contained", size: "small", onClick: onSave, loading: updating }, { children: _jsx(FormattedMessage, { id: "ui.lessonAppbar.button.save", defaultMessage: "ui.lessonAppbar.button.save" }) }))] })) : (_jsxs(Box, Object.assign({ className: classes.endItems }, { children: [showComments && (_jsx(IconButton, Object.assign({ onClick: () => handleOpen(SCLessonActionsType.COMMENTS) }, { children: _jsx(Icon, { children: "chat_bubble_outline" }) }))), _jsx(IconButton, Object.assign({ onClick: () => handleOpen(SCLessonActionsType.LESSONS) }, { children: _jsx(Icon, { children: "courses" }) }))] })))] }) })));
+    return (_jsx(Root, Object.assign({ position: "fixed", open: Boolean(activePanel), className: classNames(classes.root, className) }, rest, { children: _jsxs(Toolbar, { children: [_jsxs(Box, Object.assign({ className: classes.startItems }, { children: [_jsx(IconButton, Object.assign({ edge: "start", onClick: onArrowBackClick }, { children: _jsx(Icon, { children: "arrow_back" }) })), _jsx(Typography, Object.assign({ variant: "h6", className: classes.title }, { children: title }))] })), editMode ? (_jsxs(_Fragment, { children: [_jsx(IconButton, Object.assign({ onClick: () => handleOpen(SCLessonActionsType.SETTINGS), color: "primary" }, { children: _jsx(Icon, { children: "settings" }) })), _jsx(LoadingButton, Object.assign({ variant: "contained", size: "small", onClick: onSave, loading: updating }, { children: _jsx(FormattedMessage, { id: "ui.lessonAppbar.button.save", defaultMessage: "ui.lessonAppbar.button.save" }) }))] })) : (_jsxs(Box, Object.assign({ className: classes.endItems }, { children: [showComments && (_jsx(IconButton, Object.assign({ onClick: () => handleOpen(SCLessonActionsType.COMMENTS) }, { children: _jsx(Icon, { children: "chat_bubble_outline" }) }))), _jsx(IconButton, Object.assign({ onClick: () => handleOpen(SCLessonActionsType.LESSONS) }, { children: _jsx(Icon, { children: "courses" }) }))] })))] }) })));
 }

package/lib/esm/components/LessonCommentObjects/LessonCommentObjects.js

@@ -172,7 +172,7 @@ export default function LessonCommentObjects(inProps) {
     if (!commentsObject.comments.length && commentsObject.isLoadingNext) {
         return _jsx(LessonCommentsObjectSkeleton, Object.assign({ count: 5 }, CommentsObjectSkeletonProps));
     }
-    return (_jsx(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, rest, { children: _jsxs(_Fragment, { children: [_jsx(_Fragment, { children: commentsObject.comments.length > 0 ? (_jsx(InfiniteScroll, Object.assign({ height: "100%", dataLength: commentsObject.comments.length, next: handleNext, hasMoreNext: Boolean(commentsObject.next), loaderNext: _jsx(LessonCommentObjectSkeleton, Object.assign({}, CommentObjectSkeletonProps, { count: 1 })) }, { children: _jsx(List, Object.assign({ ref: commentsEndRef }, { children: commentsObject.comments.map((c, index) => (_jsx(ListItem, { children: _jsx(LessonCommentObject, Object.assign({ commentObject: c, lessonObject: commentsObject.lessonObject, onDelete: (comment) => handleCommentsUpdate(comment, true), isEditing: (editing) => setIsEditing(editing) }, CommentComponentProps, { CommentObjectSkeletonProps: CommentObjectSkeletonProps }), c.id) }, index))) })) }))) : null }), !editing && (_jsx(CommentObjectReply, { id: `reply-lessonCommentObjects`, showAvatar: false, replyIcon: true, editable: !commenting, onReply: handleCommentAction, EditorProps: {
+    return (_jsx(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, rest, { children: _jsxs(_Fragment, { children: [_jsx(_Fragment, { children: commentsObject.comments.length > 0 ? (_jsx(InfiniteScroll, Object.assign({ height: '100%', dataLength: commentsObject.comments.length, next: handleNext, hasMoreNext: Boolean(commentsObject.next), loaderNext: _jsx(LessonCommentObjectSkeleton, Object.assign({}, CommentObjectSkeletonProps, { count: 1 })) }, { children: _jsx(List, Object.assign({ ref: commentsEndRef }, { children: commentsObject.comments.map((c, index) => (_jsx(ListItem, { children: _jsx(LessonCommentObject, Object.assign({ commentObject: c, lessonObject: commentsObject.lessonObject, onDelete: (comment) => handleCommentsUpdate(comment, true), isEditing: (editing) => setIsEditing(editing) }, CommentComponentProps, { CommentObjectSkeletonProps: CommentObjectSkeletonProps }), c.id) }, index))) })) }))) : null }), !editing && (_jsx(CommentObjectReply, { id: `reply-lessonCommentObjects`, showAvatar: false, replyIcon: true, editable: !commenting, onReply: handleCommentAction, EditorProps: {
                         placeholder: intl.formatMessage(messages.commentEditorPlaceholder),
                         uploadFile: true,
                         uploadImage: false,