@selfcommunity/react-ui 0.11.0-react-17.0.1.3 → 1.0.0-alpha.1

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

@@ -103,24 +103,14 @@ 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: {
-                                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                                        // @ts-ignore
-                                        b: (chunks) => _jsx("strong", { children: chunks })
+                                        b: (chunks) => _jsx("strong", { children: chunks }, "ui.groupInfoWidget.privacy.public.info.b")
                                     } }) }))] })) : (_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: {
-                                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                                        // @ts-ignore
-                                        b: (chunks) => _jsx("strong", { children: chunks })
+                                        b: (chunks) => _jsx("strong", { children: chunks }, "ui.groupInfoWidget.private.public.info.b")
                                     } }) }))] })) }))), 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: {
-                                            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                                            // @ts-ignore
-                                            b: (chunks) => _jsx("strong", { children: chunks })
+                                            b: (chunks) => _jsx("strong", { children: chunks }, "ui.groupInfoWidget.private.public.info.b")
                                         } }) }))] })) : (_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: {
-                                            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                                            // @ts-ignore
-                                            b: (chunks) => _jsx("strong", { children: chunks })
+                                            b: (chunks) => _jsx("strong", { children: chunks }, "ui.groupForm.visibility.hidden.info.b")
                                         } }) }))] })) }))) })), _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: {
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                                // @ts-ignore
-                                b: (chunks) => _jsx("strong", { children: chunks })
+                                b: (chunks) => _jsx("strong", { children: chunks }, "ui.groupInfoWidget.admin.b")
                             } }), _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,7 +7,6 @@ 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';
@@ -36,13 +35,13 @@ const classes = {
 const Root = styled(Button, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    overridesResolver: (_props, styles) => styles.root
+})(() => ({}));
 const DialogRoot = styled(BaseDialog, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => styles.dialogRoot
-})(({ theme }) => ({}));
+    overridesResolver: (_props, styles) => styles.dialogRoot
+})(() => ({}));
 /**
  *> API documentation for the Community-JS Group Invite Button component. Learn about the available props and the CSS API.
  *
@@ -203,7 +202,7 @@ export default function GroupInviteButton(inProps) {
         }
     };
     // Autocomplete Handlers
-    const handleInputChange = (event, value, reason) => {
+    const handleInputChange = (_event, value, reason) => {
         switch (reason) {
             case 'input':
                 setValue(value);
@@ -253,7 +252,9 @@ export default function GroupInviteButton(inProps) {
     /**
      * Renders root object
      */
-    return (_jsxs(React.Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className), onClick: handleClose, variant: scGroup ? 'contained' : 'outlined', color: scGroup ? 'secondary' : 'inherit', startIcon: _jsx(Icon, { children: "add" }) }, rest, { children: _jsx(FormattedMessage, { id: "ui.groupInviteButton", defaultMessage: "ui.groupInviteButton" }) })), open && (_jsx(DialogRoot, Object.assign({ DialogContentProps: { dividers: false }, open: true, className: classes.dialogRoot, title: _jsxs(_Fragment, { children: [_jsx(IconButton, Object.assign({ onClick: handleClose }, { children: _jsx(Icon, { children: "arrow_back" }) })), _jsx(Typography, Object.assign({ className: classes.dialogTitle }, { children: _jsx(FormattedMessage, { id: "ui.groupInviteButton.dialog.title", defaultMessage: "ui.groupInviteButton.dialog.title" }) })), _jsx(LoadingButton, Object.assign({ size: "small", color: "secondary", variant: "contained", onClick: handleSendInvitations, loading: isSending, disabled: !invited.length }, { children: _jsx(FormattedMessage, { id: "ui.groupInviteButton.dialog.button.end", defaultMessage: "ui.groupInviteButton.dialog.button.end" }) }))] }) }, { children: _jsxs(Box, Object.assign({ className: classes.dialogContent }, { children: [_jsx(Autocomplete, { className: classes.autocomplete, loading: loading, size: "small", multiple: true, freeSolo: true, disableClearable: true, options: suggested, onChange: handleChange, onInputChange: handleInputChange, inputValue: value, filterOptions: filterOptions, value: invited, getOptionLabel: (option) => (option ? option.username : '...'), isOptionEqualToValue: (option, value) => (option ? value.id === option.id : false), renderTags: () => null, renderOption: (props, option) => (_jsxs(Box, Object.assign({ component: "li" }, props, { children: [_jsx(Avatar, { alt: option.username, src: option.avatar }), _jsx(Typography, Object.assign({ ml: 1 }, { children: option.username }))] }))), renderInput: (params) => (_jsx(TextField, Object.assign({}, params, { variant: "outlined", placeholder: `${intl.formatMessage(messages.placeholder)}`, InputProps: Object.assign(Object.assign({}, params.InputProps), { className: classes.input, startAdornment: (_jsxs(_Fragment, { children: [_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(Icon, Object.assign({ className: classes.icon }, { children: "search" })) })), params.InputProps.startAdornment] })) }) }))) }), _jsx(Box, Object.assign({ className: classes.invitedBox }, { children: invited.map((option, index) => (_jsx(Chip, { avatar: _jsx(Avatar, { alt: option.username, src: option.avatar }), label: option.username, onDelete: () => {
+    return (_jsxs(React.Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className), onClick: handleClose, variant: scGroup ? 'contained' : 'outlined', color: scGroup ? 'secondary' : 'inherit', startIcon: _jsx(Icon, { children: "add" }) }, rest, { children: _jsx(FormattedMessage, { id: "ui.groupInviteButton", defaultMessage: "ui.groupInviteButton" }) })), open && (_jsx(DialogRoot, 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: () => {
                                     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,10 +131,16 @@ 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, 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 }),
+    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"),
                         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,11 +1,10 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from 'react';
-import { styled } from '@mui/material';
+import { Button, 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';
@@ -17,11 +16,11 @@ const PREFIX = 'SCGroupSubscribeButton';
 const classes = {
     root: `${PREFIX}-root`
 };
-const Root = styled(LoadingButton, {
+const Root = styled(Button, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    overridesResolver: (_props, styles) => styles.root
+})(() => ({}));
 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, 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) => {
+    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) => {
                             e.preventDefault();
                             if (e.key === 'Enter') {
                                 fetchGroups();
                             }
-                        }, 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
+                        }, 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 }))] })))
+                            }
+                        } }) }))) }))), _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, { sx: { marginTop: '16px' } }) : _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: {
                                 button: (chunk) => (_jsx(Button, Object.assign({ color: "secondary", variant: "text", onClick: handleScrollUp }, { children: chunk })))
-                            } }) })) }, { children: _jsx(Grid, Object.assign({ container: true, spacing: { xs: 2 }, className: classes.groups }, { children: 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))) })) }))) })] }));
+                            } }) })) }, { children: _jsx(Grid, Object.assign({ container: true, width: "100%", spacing: 2, className: classes.groups }, { children: groups.map((group) => (_jsx(Grid, Object.assign({ size: { xs: 12, 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,6 +1,5 @@
 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';
@@ -36,5 +35,5 @@ const Root = styled(Box, {
  */
 export default function GroupsSkeleton(inProps) {
     const { className, GroupSkeletonProps = {}, groupsNumber = 20 } = inProps, rest = __rest(inProps, ["className", "GroupSkeletonProps", "groupsNumber"]);
-    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsx(Grid, Object.assign({ container: true, spacing: { xs: 3 }, className: classes.groups }, { children: [...Array(groupsNumber)].map((category, index) => (_jsx(Grid, Object.assign({ item: true, xs: 12, sm: 8, md: 6 }, { children: _jsx(GroupSkeleton, Object.assign({ elevation: 0, variant: 'outlined' }, GroupSkeletonProps)) }), index))) })) })));
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsx(Grid, Object.assign({ container: true, width: "100%", spacing: 2, gap: 2, className: classes.groups }, { children: [...Array(groupsNumber)].map((_category, index) => (_jsx(Grid, Object.assign({ size: { xs: 12, 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, spacing: 2, className: className }, { children: [_jsx(Grid, Object.assign({ item: true, xs: true }, { children: _jsx(Typography, { children: _jsx(FormattedMessage, { defaultMessage: "ui.incubator.progressBar.proposal", id: "ui.incubator.progressBar.proposal" }) }) })), _jsx(Grid, Object.assign({ item: true, xs: true }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.incubator.progressBar.collectingSubscribers", id: "ui.incubator.progressBar.collectingSubscribers" }) })), _jsx(Grid, Object.assign({ item: true, xs: true }, { children: _jsx(Typography, Object.assign({ align: "right" }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.incubator.progressBar.approved", id: "ui.incubator.progressBar.approved" }) })) }))] }))] })));
+    return (_jsxs(Box, 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" }) })) }))] }))] })));
 }
 /**
  * > 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, setSCIncubator } = useSCFetchIncubator({ id: incubatorId, incubator });
+    const { scIncubator } = 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, spacing: 1, className: classes.progressBar }, { children: [_jsx(Grid, Object.assign({ item: true, xs: 12, md: 12 }, { children: _jsx(Skeleton, { animation: "wave", height: 20, width: "100%", variant: "rectangular" }) })), _jsx(Grid, Object.assign({ item: true, xs: true }, { children: _jsx(Skeleton, { animation: "wave", height: 10, width: "100%", variant: "text" }) })), _jsx(Grid, Object.assign({ item: true, xs: true }, { children: _jsx(Skeleton, { animation: "wave", height: 10, width: "100%", variant: "text" }) })), _jsx(Grid, Object.assign({ item: true, xs: true }, { children: _jsx(Skeleton, { animation: "wave", height: 10, width: "100%", variant: "text" }) }))] }))] }), _jsx(CardActions, Object.assign({ className: classes.action }, { children: _jsx(Button, Object.assign({ disabled: true, variant: 'outlined', size: 'small' }, { children: _jsx(Skeleton, { animation: "wave", height: 20, width: 50, variant: "text" }) })) }))] })));
+    return (_jsxs(Root, Object.assign({ className: classes.root }, props, { children: [_jsxs(CardContent, { children: [_jsx(Typography, 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" }) })) }))] })));
 }

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,14 +2,13 @@ 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 } from '@mui/material';
+import { TextField, Typography, FormGroup, styled, Button } 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: {
@@ -59,7 +58,7 @@ export default function CreateIncubatorDialog(props) {
                 slogan: slogan
             }
         })
-            .then((res) => {
+            .then(() => {
             setIsSubmitting(false);
             setSubmitted(true);
         })
@@ -74,10 +73,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(LoadingButton, Object.assign({ loading: isSubmitting, disabled: !name || Boolean(error), variant: "contained", onClick: handleSubmit }, { children: _jsx(FormattedMessage, { id: "ui.incubatorListWidget.createIncubatorDialog.button", defaultMessage: "ui.incubatorListWidget.createIncubatorDialog.button" }) }))] }));
+        dialogContent = (_jsxs(_Fragment, { children: [_jsx(Typography, 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" }) }))] }));
     }
     // 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
-})(({ theme }) => ({}));
+    overridesResolver: (_props, styles) => styles.root
+})(() => ({}));
 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,9 +1,8 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
-import { styled } from '@mui/material';
+import { Button, 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';
@@ -13,11 +12,11 @@ const PREFIX = 'SCIncubatorSubscribeButton';
 const classes = {
     root: `${PREFIX}-root`
 };
-const Root = styled(LoadingButton, {
+const Root = styled(Button, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    overridesResolver: (_props, styles) => styles.root
+})(() => ({}));
 /**
  * > 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,7 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { LoadingButton } from '@mui/lab';
-import { styled } from '@mui/material';
+import { Button, styled } from '@mui/material';
 import { useThemeProps } from '@mui/system';
 import { EventService } from '@selfcommunity/api-services';
 import { useSCFetchEvent, useSCFetchUser } from '@selfcommunity/react-core';
@@ -14,7 +13,7 @@ const PREFIX = 'SCInviteUserEventButton';
 const classes = {
     root: `${PREFIX}-root`
 };
-const InviteButton = styled(LoadingButton, {
+const InviteButton = styled(Button, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (_props, styles) => styles.root

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

@@ -2,11 +2,10 @@ 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 } from '@mui/material';
+import { AppBar, Icon, IconButton, Toolbar, Typography, Box, styled, Button } 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`,
@@ -16,9 +15,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({
@@ -26,5 +25,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(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" }) }))] })))] }) })));
+    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" }) }))] })))] }) })));
 }

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,

package/lib/esm/components/LessonEditForm/LessonEditForm.js

@@ -3,11 +3,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { useThemeProps } from '@mui/system';
 import classNames from 'classnames';
-import { Box, Checkbox, FormControl, FormControlLabel, FormLabel, Radio, RadioGroup, styled } from '@mui/material';
+import { Box, Button, Checkbox, FormControl, FormControlLabel, FormLabel, Radio, RadioGroup, styled } from '@mui/material';
 import { PREFIX } from './constants';
 import { FormattedMessage } from 'react-intl';
 import { SCCourseLessonStatusType } from '@selfcommunity/types';
-import { LoadingButton } from '@mui/lab';
 const classes = {
     root: `${PREFIX}-root`,
     form: `${PREFIX}-form`,
@@ -37,5 +36,5 @@ export default function LessonEditForm(inProps) {
     /**
      * Rendering
      */
-    return (_jsxs(Root, Object.assign({ className: classNames(className, classes.root) }, rest, { children: [_jsxs(Box, Object.assign({ className: classes.form }, { children: [_jsxs(FormControl, { children: [_jsx(FormLabel, Object.assign({ id: "status" }, { children: _jsx(FormattedMessage, { id: "ui.lessonEditForm.status.title", defaultMessage: "ui.lessonEditForm.status.title" }) })), _jsxs(RadioGroup, Object.assign({ "aria-labelledby": "course-status-radio-buttons-group", name: "course-status-radio-buttons-group", value: settings.status, onChange: (e) => handleChange('status', e.target.value) }, { children: [_jsx(FormControlLabel, { value: SCCourseLessonStatusType.DRAFT, control: _jsx(Radio, {}), label: _jsx(FormattedMessage, { id: "ui.lessonEditForm.status.draft", defaultMessage: "ui.lessonEditForm.status.draft" }) }), _jsx(FormControlLabel, { value: SCCourseLessonStatusType.PUBLISHED, control: _jsx(Radio, {}), label: _jsx(FormattedMessage, { id: "ui.lessonEditForm.status.published", defaultMessage: "ui.lessonEditForm.status.published" }) })] }))] }), _jsxs(FormControl, Object.assign({ className: classes.settings }, { children: [_jsx(FormLabel, Object.assign({ id: "settings" }, { children: _jsx(FormattedMessage, { id: "ui.lessonEditForm.settings.title", defaultMessage: "ui.lessonEditForm.settings.title" }) })), _jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: settings.comments_enabled, onChange: (e) => handleChange('comments_enabled', e.target.checked) }), label: _jsx(FormattedMessage, { id: "ui.lessonEditForm.settings.enableComments", defaultMessage: "ui.lessonEditForm.settings.enableComments" }) })] }))] })), _jsx(LoadingButton, Object.assign({ className: classes.button, variant: "contained", size: "small", onClick: onSave, loading: updating }, { children: _jsx(FormattedMessage, { id: "ui.lessonEditForm.button.save", defaultMessage: "ui.lessonEditForm.button.save" }) }))] })));
+    return (_jsxs(Root, Object.assign({ className: classNames(className, classes.root) }, rest, { children: [_jsxs(Box, Object.assign({ className: classes.form }, { children: [_jsxs(FormControl, { children: [_jsx(FormLabel, Object.assign({ id: "status" }, { children: _jsx(FormattedMessage, { id: "ui.lessonEditForm.status.title", defaultMessage: "ui.lessonEditForm.status.title" }) })), _jsxs(RadioGroup, Object.assign({ "aria-labelledby": "course-status-radio-buttons-group", name: "course-status-radio-buttons-group", value: settings.status, onChange: (e) => handleChange('status', e.target.value) }, { children: [_jsx(FormControlLabel, { value: SCCourseLessonStatusType.DRAFT, control: _jsx(Radio, {}), label: _jsx(FormattedMessage, { id: "ui.lessonEditForm.status.draft", defaultMessage: "ui.lessonEditForm.status.draft" }) }), _jsx(FormControlLabel, { value: SCCourseLessonStatusType.PUBLISHED, control: _jsx(Radio, {}), label: _jsx(FormattedMessage, { id: "ui.lessonEditForm.status.published", defaultMessage: "ui.lessonEditForm.status.published" }) })] }))] }), _jsxs(FormControl, Object.assign({ className: classes.settings }, { children: [_jsx(FormLabel, Object.assign({ id: "settings" }, { children: _jsx(FormattedMessage, { id: "ui.lessonEditForm.settings.title", defaultMessage: "ui.lessonEditForm.settings.title" }) })), _jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: settings.comments_enabled, onChange: (e) => handleChange('comments_enabled', e.target.checked) }), label: _jsx(FormattedMessage, { id: "ui.lessonEditForm.settings.enableComments", defaultMessage: "ui.lessonEditForm.settings.enableComments" }) })] }))] })), _jsx(Button, Object.assign({ className: classes.button, variant: "contained", size: "small", onClick: onSave, loading: updating }, { children: _jsx(FormattedMessage, { id: "ui.lessonEditForm.button.save", defaultMessage: "ui.lessonEditForm.button.save" }) }))] })));
 }