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

package/lib/esm/components/UserProfileEdit/Section/AccountCredentials.js

@@ -10,6 +10,7 @@ import { Logger } from '@selfcommunity/utils';
 import BaseDialog from '../../../shared/BaseDialog';
 import PasswordTextField from '../../../shared/PasswordTextField';
 import EmailTextField from '../../../shared/EmailTextField';
+import { LoadingButton } from '@mui/lab';
 import { useSnackbar } from 'notistack';
 import { PREFIX } from '../constants';
 const messages = defineMessages({
@@ -128,7 +129,7 @@ export default function AccountCredentials(props) {
         e.stopPropagation();
         setIsSubmitting(true);
         UserService.changeUserMail(user === null || user === void 0 ? void 0 : user.id, field.email, !skipEmailValidation, !skipEmailValidation)
-            .then(() => {
+            .then((res) => {
             setIsEditing(false);
             setIsSubmitting(false);
             if (skipEmailValidation) {
@@ -153,19 +154,15 @@ export default function AccountCredentials(props) {
     if (!user) {
         return;
     }
-    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ variant: "body1", className: classes.email }, { children: _jsx(FormattedMessage, { id: "ui.userProfileEditAccountCredentials.email", defaultMessage: "ui.userProfileEditAccountCredentials.email" }) })), _jsx(_Fragment, { children: isSubmitting ? (_jsx(CircularProgress, {})) : (_jsx(_Fragment, { children: _jsx(EmailTextField, { name: "email", disabled: !isEditing || isSubmitting, size: "small", value: field.email, onChange: handleChange, onBlur: handleEmailBlur, error: Boolean(error.email), helperText: error.email && (_jsx(FormattedMessage, { id: `ui.userProfileEditAccountCredentials.email.error.${error.email}`, defaultMessage: `ui.userProfileEditAccountCredentials.email.error.${error.email}` })), slotProps: {
-                                    input: {
-                                        endAdornment: (_jsx(InputAdornment, Object.assign({ position: "end" }, { children: !isEditing ? (_jsx(IconButton, Object.assign({ onClick: () => setIsEditing(true), edge: "end" }, { children: _jsx(Icon, { children: "edit" }) }))) : error.email ? (_jsx(Icon, Object.assign({ color: "error" }, { children: "error" }))) : (_jsx(IconButton, Object.assign({ onClick: handleSubmitEmail, edge: "end", color: "primary", disabled: !field.email || error.email }, { children: _jsx(Icon, { children: "check" }) }))) })))
-                                    }
-                                } }) })) }), _jsx(Typography, Object.assign({ variant: "body1", className: classes.password }, { children: _jsx(FormattedMessage, { id: "ui.userProfileEditAccountCredentials.passwordLabel", defaultMessage: "ui.userProfileEditAccountCredentials.passwordLabel" }) })), _jsx(Button, Object.assign({ size: "small", variant: "outlined", onClick: () => setOpenChangePasswordDialog(true), sx: { mb: 1 } }, { children: _jsx(FormattedMessage, { id: "ui.userProfileEditAccountCredentials.changePassword", defaultMessage: "ui.userProfileEditAccountCredentials.changePassword" }) }))] }), openChangePasswordDialog && (_jsxs(PasswordDialogRoot, Object.assign({ className: classes.dialogRoot, title: intl.formatMessage(messages.changePasswordTitle), open: openChangePasswordDialog, onClose: handleCloseDialog }, rest, { children: [_jsxs(FormGroup, Object.assign({ className: classes.form }, { children: [_jsx(PasswordTextField, { className: classes.formField, name: "password", disabled: isSubmittingPassword, label: _jsx(FormattedMessage, { id: "ui.userProfileEditAccountCredentials.password", defaultMessage: "ui.userProfileEditAccountCredentials.password" }), size: "medium", value: field.password, onChange: handleChange, error: Boolean(error.password), helperText: error.password && (_jsx(FormattedMessage, { id: `ui.userProfileEditAccountCredentials.password.error.${error.password}`, defaultMessage: `ui.userProfileEditAccountCredentials.password.error.${error.password}` })) }), _jsx(PasswordTextField, { name: "newPassword", className: classes.formField, disabled: isSubmittingPassword, label: _jsx(FormattedMessage, { id: "ui.userProfileEditAccountCredentials.newPassword", defaultMessage: "ui.userProfileEditAccountCredentials.newPassword" }), size: "medium", value: field.newPassword, onChange: handleChange, error: Boolean(error.newPassword), helperText: error.newPassword && (_jsx(FormattedMessage, { id: `ui.userProfileEditAccountCredentials.newPassword.error.${error.newPassword}`, defaultMessage: `ui.userProfileEditAccountCredentials.newPassword.error.${error.newPassword}` })), slotProps: {
-                                    input: {
-                                        endAdornment: (_jsx(InputAdornment, Object.assign({ position: "end" }, { children: _jsx(IconButton, Object.assign({ "aria-label": "info", onClick: handlePopoverOpen, edge: "end" }, { children: _jsx(Icon, { children: "info" }) })) })))
-                                    }
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ variant: "body1", className: classes.email }, { children: _jsx(FormattedMessage, { id: "ui.userProfileEditAccountCredentials.email", defaultMessage: "ui.userProfileEditAccountCredentials.email" }) })), _jsx(_Fragment, { children: isSubmitting ? (_jsx(CircularProgress, {})) : (_jsx(_Fragment, { children: _jsx(EmailTextField, { name: "email", disabled: !isEditing || isSubmitting, size: "small", value: field.email, onChange: handleChange, onBlur: handleEmailBlur, error: Boolean(error.email), helperText: error.email && (_jsx(FormattedMessage, { id: `ui.userProfileEditAccountCredentials.email.error.${error.email}`, defaultMessage: `ui.userProfileEditAccountCredentials.email.error.${error.email}` })), InputProps: {
+                                    endAdornment: (_jsx(InputAdornment, Object.assign({ position: "end" }, { children: !isEditing ? (_jsx(IconButton, Object.assign({ onClick: () => setIsEditing(true), edge: "end" }, { children: _jsx(Icon, { children: "edit" }) }))) : error.email ? (_jsx(Icon, Object.assign({ color: "error" }, { children: "error" }))) : (_jsx(IconButton, Object.assign({ onClick: handleSubmitEmail, edge: "end", color: "primary", disabled: !field.email || error.email }, { children: _jsx(Icon, { children: "check" }) }))) })))
+                                } }) })) }), _jsx(Typography, Object.assign({ variant: "body1", className: classes.password }, { children: _jsx(FormattedMessage, { id: "ui.userProfileEditAccountCredentials.passwordLabel", defaultMessage: "ui.userProfileEditAccountCredentials.passwordLabel" }) })), _jsx(Button, Object.assign({ size: "small", variant: "outlined", onClick: () => setOpenChangePasswordDialog(true), sx: { mb: 1 } }, { children: _jsx(FormattedMessage, { id: "ui.userProfileEditAccountCredentials.changePassword", defaultMessage: "ui.userProfileEditAccountCredentials.changePassword" }) }))] }), openChangePasswordDialog && (_jsxs(PasswordDialogRoot, Object.assign({ className: classes.dialogRoot, title: intl.formatMessage(messages.changePasswordTitle), open: openChangePasswordDialog, onClose: handleCloseDialog }, rest, { children: [_jsxs(FormGroup, Object.assign({ className: classes.form }, { children: [_jsx(PasswordTextField, { className: classes.formField, name: "password", disabled: isSubmittingPassword, label: _jsx(FormattedMessage, { id: "ui.userProfileEditAccountCredentials.password", defaultMessage: "ui.userProfileEditAccountCredentials.password" }), size: "medium", value: field.password, onChange: handleChange, error: Boolean(error.password), helperText: error.password && (_jsx(FormattedMessage, { id: `ui.userProfileEditAccountCredentials.password.error.${error.password}`, defaultMessage: `ui.userProfileEditAccountCredentials.password.error.${error.password}` })) }), _jsx(PasswordTextField, { name: "newPassword", className: classes.formField, disabled: isSubmittingPassword, label: _jsx(FormattedMessage, { id: "ui.userProfileEditAccountCredentials.newPassword", defaultMessage: "ui.userProfileEditAccountCredentials.newPassword" }), size: "medium", value: field.newPassword, onChange: handleChange, error: Boolean(error.newPassword), helperText: error.newPassword && (_jsx(FormattedMessage, { id: `ui.userProfileEditAccountCredentials.newPassword.error.${error.newPassword}`, defaultMessage: `ui.userProfileEditAccountCredentials.newPassword.error.${error.newPassword}` })), InputProps: {
+                                    endAdornment: (_jsx(InputAdornment, Object.assign({ position: "end" }, { children: _jsx(IconButton, Object.assign({ "aria-label": "info", onClick: handlePopoverOpen, edge: "end" }, { children: _jsx(Icon, { children: "info" }) })) })))
                                 } }), _jsx(Popover, Object.assign({ open: open, anchorEl: anchorEl, anchorOrigin: {
                                     vertical: 'center',
                                     horizontal: 'left'
                                 }, transformOrigin: {
                                     vertical: 'center',
                                     horizontal: 'right'
-                                }, onClose: handlePopoverClose }, { children: _jsx(Box, Object.assign({ sx: { p: '10px' } }, { children: _jsx(Typography, Object.assign({ component: "span", sx: { whiteSpace: 'pre-line' } }, { children: _jsx(FormattedMessage, { id: "ui.userProfileEditAccountCredentials.newPassword.info", defaultMessage: "ui.userProfileEditAccountCredentials.newPassword.info" }) })) })) })), _jsx(PasswordTextField, { name: "confirmPassword", className: classes.formField, disabled: isSubmittingPassword, label: _jsx(FormattedMessage, { id: "ui.userProfileEditAccountCredentials.confirmPassword", defaultMessage: "ui.userProfileEditAccountCredentials.confirmPassword" }), size: "medium", value: field.confirmPassword, onChange: handleChange, onBlur: validateInput, error: Boolean(error.confirmPassword), helperText: error.confirmPassword })] })), _jsx(Button, Object.assign({ className: classes.confirmChangeButton, loading: isSubmittingPassword, disabled: !field.confirmPassword || Boolean(error.confirmPassword) || Boolean(error.password) || Boolean(error.newPassword), variant: "contained", onClick: handleSubmitPassword }, { children: _jsx(FormattedMessage, { id: "ui.userProfileEditAccountCredentials.changePassword", defaultMessage: "ui.userProfileEditAccountCredentials.changePassword" }) }))] })))] })));
+                                }, onClose: handlePopoverClose }, { children: _jsx(Box, Object.assign({ sx: { p: '10px' } }, { children: _jsx(Typography, Object.assign({ component: 'span', sx: { whiteSpace: 'pre-line' } }, { children: _jsx(FormattedMessage, { id: "ui.userProfileEditAccountCredentials.newPassword.info", defaultMessage: "ui.userProfileEditAccountCredentials.newPassword.info" }) })) })) })), _jsx(PasswordTextField, { name: "confirmPassword", className: classes.formField, disabled: isSubmittingPassword, label: _jsx(FormattedMessage, { id: "ui.userProfileEditAccountCredentials.confirmPassword", defaultMessage: "ui.userProfileEditAccountCredentials.confirmPassword" }), size: "medium", value: field.confirmPassword, onChange: handleChange, onBlur: validateInput, error: Boolean(error.confirmPassword), helperText: error.confirmPassword })] })), _jsx(LoadingButton, Object.assign({ className: classes.confirmChangeButton, loading: isSubmittingPassword, disabled: !field.confirmPassword || Boolean(error.confirmPassword) || Boolean(error.password) || Boolean(error.newPassword), variant: "contained", onClick: handleSubmitPassword }, { children: _jsx(FormattedMessage, { id: "ui.userProfileEditAccountCredentials.changePassword", defaultMessage: "ui.userProfileEditAccountCredentials.changePassword" }) }))] })))] })));
 }

package/lib/esm/components/UserProfileEdit/Section/PublicInfo.js

@@ -1,7 +1,7 @@
 import { __rest } from "tslib";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useMemo, useState } from 'react';
-import { Box, CircularProgress, IconButton, InputAdornment, MenuItem, TextField, Icon, styled, Button } from '@mui/material';
+import { Box, CircularProgress, IconButton, InputAdornment, MenuItem, TextField, useMediaQuery, useTheme, Icon, styled } from '@mui/material';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Endpoints, formatHttpErrorCode, http } from '@selfcommunity/api-services';
 import { camelCase, Logger } from '@selfcommunity/utils';
@@ -15,9 +15,10 @@ import { useDeepCompareEffectNoCheck } from 'use-deep-compare-effect';
 import { SCUserProfileFields } from '../../../types';
 import MetadataField from '../../../shared/MetadataField';
 import { SCOPE_SC_UI } from '../../../constants/Errors';
-import { format, isBefore, isValid, startOfHour } from 'date-fns';
-import { it } from 'date-fns/locale/it';
-import { enUS } from 'date-fns/locale/en-US';
+import { format, isBefore, isValid, parseISO, startOfHour } from 'date-fns';
+import itLocale from 'date-fns/locale/it';
+import enLocale from 'date-fns/locale/en-US';
+import { LoadingButton } from '@mui/lab';
 import { useSnackbar } from 'notistack';
 import { PREFIX } from '../constants';
 const messages = defineMessages({
@@ -67,7 +68,9 @@ export default function PublicInfo(props) {
         return null;
     }, [scPreferences.preferences]);
     // STATE
-    const [user, setUser] = useState(null);
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+    const [user, setUser] = useState();
     const [error, setError] = useState({});
     const [editing, setEditing] = useState([]);
     const [saving, setSaving] = useState([]);
@@ -154,10 +157,10 @@ export default function PublicInfo(props) {
             case SCUserProfileFields.DATE_JOINED:
                 return null;
             case SCUserProfileFields.DATE_OF_BIRTH:
-                return (_jsx(LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns, adapterLocale: scContext.settings.locale.default === 'it' ? it : enUS }, { children: _jsx(DatePicker, { label: intl.formatMessage({
+                return (_jsx(LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns, adapterLocale: scContext.settings.locale.default === 'it' ? itLocale : enLocale }, { children: _jsx(DatePicker, { label: intl.formatMessage({
                             id: `ui.userInfo.${camelCase(field)}`,
                             defaultMessage: `ui.userInfo.${field}`
-                        }), defaultValue: user[field] ? new Date(user[field]) : null, minDate: DATEPICKER_MINDATE, onChange: (newValue) => {
+                        }), defaultValue: user[field] ? parseISO(user[field]) : null, minDate: DATEPICKER_MINDATE, onChange: (newValue) => {
                             const u = user;
                             const field = SCUserProfileFields.DATE_OF_BIRTH;
                             const camelField = camelCase(field);
@@ -179,8 +182,13 @@ export default function PublicInfo(props) {
                             }
                             setUser(u);
                             setEditing([...editing, field]);
-                        }, disableFuture: true, disabled: isSaving, enableAccessibleFieldDOMStructure: false, slots: {
-                            openPickerButton: (params) => (_jsxs(IconButton, Object.assign({}, params, { children: [_jsx(Icon, { children: "CalendarIcon" }), isSaving && _jsx(CircularProgress, { size: 10 })] })))
+                        }, disableFuture: true, disabled: isSaving, slots: {
+                            inputAdornment: (params) => {
+                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore,@typescript-eslint/ban-ts-comment
+                                // @ts-ignore
+                                const _a = params.children.props, { children } = _a, rest = __rest(_a, ["children"]);
+                                return (_jsxs(InputAdornment, Object.assign({ position: 'end' }, { children: [_jsx(IconButton, Object.assign({}, rest, { children: children })), isSaving && _jsx(CircularProgress, { size: 10 })] })));
+                            }
                         }, 
                         // onAccept={isMobile ? handleSave(SCUserProfileFields.DATE_OF_BIRTH) : null}
                         slotProps: {
@@ -188,7 +196,10 @@ export default function PublicInfo(props) {
                                 className: classes.field,
                                 fullWidth: true,
                                 variant: 'outlined',
-                                helperText: _error || null
+                                helperText: _error || null,
+                                InputProps: {
+                                    endAdornment: isMobile && (_jsxs(_Fragment, { children: [_jsx(IconButton, Object.assign({ disabled: !isEditing }, { children: _jsx(Icon, { children: "CalendarIcon" }) })), isSaving ? _jsx(CircularProgress, { size: 10 }) : null] }))
+                                }
                             }
                         } }) }), field));
             case SCUserProfileFields.BIO:
@@ -220,5 +231,5 @@ export default function PublicInfo(props) {
     }
     return (_jsxs(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, rest, { children: [startActions, _fields.map((field) => {
                 return renderField(field);
-            }), _jsx(Button, Object.assign({ className: classes.btnSave, fullWidth: true, variant: "contained", color: "secondary", onClick: handleSave, loading: saving.length > 0, disabled: saving.length > 0 || !editing.length || Object.keys(error).length > 0 }, { children: _jsx(FormattedMessage, { id: "ui.userInfo.button.save", defaultMessage: "ui.userInfo.button.save" }) })), endActions] })));
+            }), _jsx(LoadingButton, Object.assign({ className: classes.btnSave, fullWidth: true, variant: "contained", color: "secondary", onClick: handleSave, loading: saving.length > 0, disabled: saving.length > 0 || !editing.length || Object.keys(error).length > 0 }, { children: _jsx(FormattedMessage, { id: 'ui.userInfo.button.save', defaultMessage: 'ui.userInfo.button.save' }) })), endActions] })));
 }

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

@@ -29,5 +29,5 @@ const Root = styled(Box, {
  *
  */
 export default function UserProfileEditSkeleton() {
-    return (_jsx(Root, Object.assign({ className: classes.root }, { children: _jsx(Grid, Object.assign({ container: true, width: "100%" }, { children: _jsxs(Grid, Object.assign({ size: "grow" }, { children: [_jsx(Skeleton, { animation: "wave", sx: { height: 20, width: '100%' } }), _jsx(Skeleton, { animation: "wave", sx: { height: 20, width: '100%' } })] })) })) })));
+    return (_jsx(Root, Object.assign({ className: classes.root }, { children: _jsx(Grid, Object.assign({ container: true }, { children: _jsxs(Grid, Object.assign({ item: true, md: 12, sm: 12 }, { children: [_jsx(Skeleton, { animation: "wave", sx: { height: 20, width: '100%' } }), _jsx(Skeleton, { animation: "wave", sx: { height: 20, width: '100%' } })] })) })) })));
 }

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

@@ -1,6 +1,6 @@
+import { LoadingButtonProps } from '@mui/lab';
 import { SCCommentType, SCContributionType, SCFeedObjectType } from '@selfcommunity/types';
-import { ButtonProps } from '@mui/material';
-export interface VoteAudienceButtonProps extends Pick<ButtonProps, Exclude<keyof ButtonProps, 'onClick' | 'disabled' | 'loading'>> {
+export interface VoteAudienceButtonProps extends Pick<LoadingButtonProps, Exclude<keyof LoadingButtonProps, 'onClick' | 'disabled' | 'loading'>> {
     /**
      * Id of the contribution object to vote
      * @default null

package/lib/esm/components/VoteAudienceButton/VoteAudienceButton.js

@@ -1,9 +1,10 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from 'react';
+import { LoadingButton } from '@mui/lab';
 import classNames from 'classnames';
 import { useThemeProps } from '@mui/system';
-import { Avatar, Box, List, ListItem, Tab, Tabs, Typography, Icon, styled, Button } from '@mui/material';
+import { Avatar, Box, List, ListItem, Tab, Tabs, Typography, Icon, styled } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
 import { useSCFetchVote, useSCUser } from '@selfcommunity/react-core';
 import BaseDialog from '../../shared/BaseDialog';
@@ -18,7 +19,7 @@ const classes = {
     dialogTabs: `${PREFIX}-dialog-tabs`,
     dialogVoteBadge: `${PREFIX}-dialog-vote-badge`
 };
-const Root = styled(Button, {
+const Root = styled(LoadingButton, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (_props, styles) => [styles.root, styles.voted]
@@ -66,10 +67,10 @@ export default function VoteAudienceButton(inProps) {
     // CONTEXT
     const scUserContext = useSCUser();
     // HANDLERS
-    const handleOpen = () => {
+    const handleOpen = (_event) => {
         setOpen(true);
     };
-    const handleClose = () => {
+    const handleClose = (_event) => {
         setOpen(false);
     };
     const handleChangeTab = (_event, newValue) => {
@@ -102,7 +103,7 @@ export default function VoteAudienceButton(inProps) {
     const audienceIcon = useMemo(() => {
         if (reactions.default && !isLoading && !error) {
             return (_jsx(Box, Object.assign({ className: classes.reactionList }, { children: contributionReactionsCount &&
-                    contributionReactionsCount.slice(0, 3).map((count) => (_jsx(Icon, { children: _jsx("img", { alt: count.reaction.label, src: count.reaction.image, width: "100%", height: "100%" }) }, count.reaction.id))) })));
+                    contributionReactionsCount.slice(0, 3).map((count, _i) => (_jsx(Icon, { children: _jsx("img", { alt: count.reaction.label, src: count.reaction.image, width: "100%", height: "100%" }) }, count.reaction.id))) })));
         }
         return scUserContext.user && contributionVoted ? _jsx(Icon, { children: "thumb_up" }) : _jsx(Icon, { children: "thumb_up_off_alt" });
     }, [reactions.default, isLoading, error, contributionReactionsCount, scUserContext.user, contributionVoted]);

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

@@ -1,6 +1,6 @@
+import { LoadingButtonProps } from '@mui/lab';
 import { SCCommentType, SCContributionType, SCFeedObjectType } from '@selfcommunity/types';
-import { ButtonProps } from '@mui/material';
-export interface VoteButtonProps extends Pick<ButtonProps, Exclude<keyof ButtonProps, 'onClick' | 'disabled' | 'loading'>> {
+export interface VoteButtonProps extends Pick<LoadingButtonProps, Exclude<keyof LoadingButtonProps, 'onClick' | 'disabled' | 'loading'>> {
     /**
      * Id of the contribution object to vote
      * @default null

package/lib/esm/components/VoteButton/VoteButton.js

@@ -1,9 +1,10 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useRef, useState } from 'react';
+import { LoadingButton } from '@mui/lab';
 import classNames from 'classnames';
 import { useThemeProps } from '@mui/system';
-import { IconButton, Paper, Popper, Tooltip, useMediaQuery, useTheme, styled, Icon, Button } from '@mui/material';
+import { IconButton, Paper, Popper, Tooltip, useMediaQuery, useTheme, styled, Icon } from '@mui/material';
 import { UserUtils, useSCContext, useSCFetchVote, useSCUser } from '@selfcommunity/react-core';
 import { FormattedMessage } from 'react-intl';
 import { useSnackbar } from 'notistack';
@@ -16,7 +17,7 @@ const classes = {
     reactionList: `${PREFIX}-reaction-list`,
     reaction: `${PREFIX}-reaction`
 };
-const Root = styled(Button, {
+const Root = styled(LoadingButton, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (_props, styles) => [styles.root, styles.voted]
@@ -69,7 +70,7 @@ export default function VoteButton(inProps) {
         handleClearTimeout();
         timeoutRef.current = setTimeout(() => setAnchorEl(event.target), 1000);
     };
-    const handleMouseLeave = () => {
+    const handleMouseLeave = (_event) => {
         handleClearTimeout();
         timeoutRef.current = setTimeout(() => setAnchorEl(null), 500);
     };

package/lib/esm/shared/AddUsersButton/AddUsersButton.js

@@ -1,5 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LoadingButton } from '@mui/lab';
 import { Autocomplete, Avatar, Button, Chip, Stack, styled, TextField, Typography, useThemeProps } from '@mui/material';
 import { Fragment, memo, useCallback, useEffect, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
@@ -126,9 +127,7 @@ function AddUsersButton(inProps) {
     const handleDelete = useCallback((userToDelete) => {
         setInvited((prev) => prev.filter((user) => user.id !== userToDelete.id));
     }, [setInvited]);
-    return (_jsxs(Fragment, { children: [_jsx(Root, Object.assign({ onClick: handleToggleDialogOpen, variant: variant, color: color, size: size, className: classNames(classes.root, classes.contrastColor, className) }, rest, { children: _jsx(FormattedMessage, { id: label, defaultMessage: label }) })), openDialog && (_jsx(DialogRoot, Object.assign({ DialogContentProps: { dividers: false }, open: true, onClose: handleToggleDialogOpen, title: _jsx(Typography, Object.assign({ variant: "h5" }, { children: _jsx(FormattedMessage, { id: "ui.addUserButton.dialog.title", defaultMessage: "ui.addUserButton.dialog.title" }) })), actions: _jsx(Button, Object.assign({ onClick: handleConfirm, size: "medium", variant: "contained", autoFocus: true, disabled: !invited.length }, { children: _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.addUserButton.dialog.confirm", defaultMessage: "ui.addUserButton.dialog.confirm" }) })) })), className: classes.dialogRoot }, { children: _jsxs(Stack, Object.assign({ className: classes.dialogAutocompleteWrapper }, { children: [_jsx(Autocomplete, { loading: loading, size: "small", multiple: true, options: suggested, onChange: handleChange, onInputChange: handleInputChange, inputValue: value, filterOptions: filterOptions, value: invited, getOptionLabel: (option) => (option === null || option === void 0 ? void 0 : option.username) || '...', isOptionEqualToValue: (option, value) => (option === null || option === void 0 ? void 0 : option.id) === value.id, loadingText: _jsx(FormattedMessage, { id: "ui.addUserButton.autocomplete.loading", defaultMessage: "ui.addUserButton.autocomplete.loading" }), noOptionsText: _jsx(FormattedMessage, { id: "ui.addUserButton.autocomplete.noResults", defaultMessage: "ui.addUserButton.autocomplete.noResults" }), renderTags: () => null, popupIcon: null, disableClearable: true, renderOption: (props, option) => (_jsxs(Stack, Object.assign({ component: "li", flexDirection: "row", gap: "5px" }, props, { children: [_jsx(Avatar, { alt: option.username, src: option.avatar }), _jsx(Typography, { children: option.username })] }))), renderInput: (params) => (_jsx(TextField, Object.assign({}, params, { variant: "outlined", placeholder: `${intl.formatMessage(messages.placeholder)}`, slotProps: {
-                                    input: Object.assign({}, params.InputProps)
-                                } }))) }), _jsx(Stack, Object.assign({ className: classes.dialogChipWrapper }, { children: invited.map((option, index) => (_jsx(Chip, { avatar: _jsx(Avatar, { alt: option.username, src: option.avatar }), label: option.username, onDelete: () => {
+    return (_jsxs(Fragment, { children: [_jsx(Root, Object.assign({ onClick: handleToggleDialogOpen, variant: variant, color: color, size: size, className: classNames(classes.root, classes.contrastColor, className) }, rest, { children: _jsx(FormattedMessage, { id: label, defaultMessage: label }) })), openDialog && (_jsx(DialogRoot, Object.assign({ DialogContentProps: { dividers: false }, open: true, onClose: handleToggleDialogOpen, title: _jsx(Typography, Object.assign({ variant: "h5" }, { children: _jsx(FormattedMessage, { id: "ui.addUserButton.dialog.title", defaultMessage: "ui.addUserButton.dialog.title" }) })), actions: _jsx(LoadingButton, Object.assign({ onClick: handleConfirm, size: "medium", variant: "contained", autoFocus: true, disabled: !invited.length }, { children: _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.addUserButton.dialog.confirm", defaultMessage: "ui.addUserButton.dialog.confirm" }) })) })), className: classes.dialogRoot }, { children: _jsxs(Stack, Object.assign({ className: classes.dialogAutocompleteWrapper }, { children: [_jsx(Autocomplete, { loading: loading, size: "small", multiple: true, options: suggested, onChange: handleChange, onInputChange: handleInputChange, inputValue: value, filterOptions: filterOptions, value: invited, getOptionLabel: (option) => (option === null || option === void 0 ? void 0 : option.username) || '...', isOptionEqualToValue: (option, value) => (option === null || option === void 0 ? void 0 : option.id) === value.id, loadingText: _jsx(FormattedMessage, { id: "ui.addUserButton.autocomplete.loading", defaultMessage: "ui.addUserButton.autocomplete.loading" }), noOptionsText: _jsx(FormattedMessage, { id: "ui.addUserButton.autocomplete.noResults", defaultMessage: "ui.addUserButton.autocomplete.noResults" }), renderTags: () => null, popupIcon: null, disableClearable: true, renderOption: (props, option) => (_jsxs(Stack, Object.assign({ component: "li", flexDirection: "row", gap: "5px" }, props, { children: [_jsx(Avatar, { alt: option.username, src: option.avatar }), _jsx(Typography, { children: option.username })] }))), renderInput: (params) => (_jsx(TextField, Object.assign({}, params, { variant: "outlined", placeholder: `${intl.formatMessage(messages.placeholder)}`, InputProps: Object.assign({}, params.InputProps) }))) }), _jsx(Stack, Object.assign({ className: classes.dialogChipWrapper }, { children: invited.map((option, index) => (_jsx(Chip, { avatar: _jsx(Avatar, { alt: option.username, src: option.avatar }), label: option.username, onDelete: () => {
                                     handleDelete(option);
                                 } }, index))) }))] })) })))] }));
 }

package/lib/esm/shared/ConfirmDialog/ConfirmDialog.js

@@ -1,5 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LoadingButton } from '@mui/lab';
 import { styled, Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Card } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
 const PREFIX = 'SCConfirmDialog';
@@ -35,5 +36,5 @@ export default function ConfirmDialog(props) {
     /**
      * Renders root object
      */
-    return (_jsx(Root, { children: _jsxs(Dialog, Object.assign({ open: open, onClose: handleClose }, rest, { children: [_jsx(DialogTitle, { children: title || _jsx(FormattedMessage, { id: "ui.confirmDialog.title", defaultMessage: "ui.confirmDialog.title" }) }), content && (_jsx(DialogContent, { children: _jsx(DialogContentText, Object.assign({ component: "div" }, { children: content })) })), _jsxs(DialogActions, { children: [_jsx(Button, Object.assign({ onClick: handleClose }, { children: btnCancel || _jsx(FormattedMessage, { id: "ui.confirmDialog.btnCancel", defaultMessage: "ui.confirmDialog.btnCancel" }) })), _jsx(Button, Object.assign({ onClick: handleConfirm, variant: "contained", autoFocus: true, loading: isUpdating }, { children: btnConfirm || _jsx(FormattedMessage, { id: "ui.confirmDialog.btnConfirm", defaultMessage: "ui.confirmDialog.btnConfirm" }) }))] })] })) }));
+    return (_jsx(Root, { children: _jsxs(Dialog, Object.assign({ open: open, onClose: handleClose }, rest, { children: [_jsx(DialogTitle, { children: title || _jsx(FormattedMessage, { id: "ui.confirmDialog.title", defaultMessage: "ui.confirmDialog.title" }) }), content && (_jsx(DialogContent, { children: _jsx(DialogContentText, Object.assign({ component: "div" }, { children: content })) })), _jsxs(DialogActions, { children: [_jsx(Button, Object.assign({ onClick: handleClose }, { children: btnCancel || _jsx(FormattedMessage, { id: "ui.confirmDialog.btnCancel", defaultMessage: "ui.confirmDialog.btnCancel" }) })), _jsx(LoadingButton, Object.assign({ onClick: handleConfirm, variant: "contained", autoFocus: true, loading: isUpdating }, { children: btnConfirm || _jsx(FormattedMessage, { id: "ui.confirmDialog.btnConfirm", defaultMessage: "ui.confirmDialog.btnConfirm" }) }))] })] })) }));
 }

package/lib/esm/shared/ContributionActionsMenu/index.js

@@ -726,7 +726,7 @@ export default function ContributionActionsMenu(props) {
      */
     function renderFlagContributionSection() {
         const open = openSection === FLAG_CONTRIBUTION_SECTION;
-        return (_jsx(Box, { children: !contributionObj.deleted && !contributionObj.collapsed && (_jsxs(Box, { children: [_jsxs(MenuItem, Object.assign({ className: classes.subItem, disabled: isFlagging, onClick: () => handleOpenSection(FLAG_CONTRIBUTION_SECTION) }, { children: [_jsx(ListItemIcon, { children: flagType !== undefined && flagType !== null ? (_jsx(Badge, Object.assign({ classes: { badge: classes.sectionBadge }, badgeContent: _jsx(Icon, Object.assign({ className: classes.sectionWithSelectionIcon }, { children: "check" })), color: "primary" }, { children: _jsx(Icon, { children: "outlined_flag" }) }))) : (_jsx(Icon, { children: "outlined_flag" })) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.contributionActionMenu.flagContributionWithMotivation", defaultMessage: "ui.contributionActionMenu.flagContributionWithMotivation" }) }), open ? _jsx(Icon, { children: "expand_less" }) : _jsx(Icon, { children: "expand_more" })] })), _jsxs(Collapse, Object.assign({ in: open, timeout: "auto", unmountOnExit: true }, { children: [renderReports(FLAG_CONTRIBUTION_SECTION), _jsx(Typography, Object.assign({ variant: "caption", component: "div", className: classes.footerSubItems }, { children: intl.formatMessage(messages.footer) }))] }))] })) }));
+        return (_jsx(Box, { children: !contributionObj.deleted && !contributionObj.collapsed && (_jsxs(Box, { children: [_jsxs(MenuItem, Object.assign({ className: classes.subItem, disabled: isFlagging, onClick: () => handleOpenSection(FLAG_CONTRIBUTION_SECTION) }, { children: [_jsx(ListItemIcon, { children: flagType !== undefined && flagType !== null ? (_jsx(Badge, Object.assign({ classes: { badge: classes.sectionBadge }, badgeContent: _jsx(Icon, Object.assign({ className: classes.sectionWithSelectionIcon }, { children: "check" })), color: "primary" }, { children: _jsx(Icon, { children: "outlined_flag" }) }))) : (_jsx(Icon, { children: "outlined_flag" })) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.contributionActionMenu.flagContributionWithMotivation", defaultMessage: "ui.contributionActionMenu.flagContributionWithMotivation" }) }), open ? _jsx(Icon, { children: "expand_less" }) : _jsx(Icon, { children: "expand_more" })] })), _jsxs(Collapse, Object.assign({ in: open, timeout: "auto", unmountOnExit: true }, { children: [renderReports(FLAG_CONTRIBUTION_SECTION), _jsx(Typography, Object.assign({ variant: 'caption', component: "div", className: classes.footerSubItems }, { children: intl.formatMessage(messages.footer) }))] }))] })) }));
     }
     /**
      * Renders section hide actions
@@ -806,9 +806,15 @@ export default function ContributionActionsMenu(props) {
     /**
      * Renders component
      */
-    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, { children: [_jsx(IconButton, Object.assign({ ref: (ref) => {
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, { children: [_jsx(IconButton
+            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+            // @ts-ignore
+            , Object.assign({ 
+                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                // @ts-ignore
+                ref: (ref) => {
                     popperRef.current = ref;
-                }, "aria-haspopup": "true", onClick: handleOpen, className: classes.button, size: "small" }, { children: contributionObj && (contributionObj.collapsed || contributionObj.deleted) ? (_jsxs("span", Object.assign({ className: classes.visibilityIcons }, { children: [contributionObj.collapsed ? _jsx(Icon, { children: "visibility_off" }) : _jsx(Icon, { children: "delete" }), _jsx(Icon, { children: "expand_more" })] }))) : (_jsx(Icon, { children: "more_vert" })) })), open && (_jsx(_Fragment, { children: isMobile ? (_jsx(SwipeableDrawer, Object.assign({ open: true, onClose: handleClose, onOpen: handleOpen, anchor: "bottom", disableSwipeToOpen: true }, { children: renderContent() }))) : (_jsx(PopperRoot, Object.assign({ open: true, anchorEl: popperRef.current, role: undefined, transition: true, className: classes.popperRoot }, PopperProps, { placement: "bottom-end" }, { children: ({ TransitionProps, placement }) => (_jsx(Grow, Object.assign({}, TransitionProps, { style: { transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom' } }, { children: _jsx(Paper, Object.assign({ variant: "outlined", className: classes.paper }, { children: _jsx(ClickAwayListener, Object.assign({ onClickAway: handleClose }, { children: renderContent() })) })) }))) }))) })), openConfirmDialog && (_jsx(ConfirmDialog, Object.assign({ open: openConfirmDialog }, (currentAction === DELETE_CONTRIBUTION
+                }, "aria-haspopup": "true", onClick: handleOpen, className: classes.button, size: "small" }, { children: contributionObj && (contributionObj.collapsed || contributionObj.deleted) ? (_jsxs("span", Object.assign({ className: classes.visibilityIcons }, { children: [contributionObj.collapsed ? _jsx(Icon, { children: "visibility_off" }) : _jsx(Icon, { children: "delete" }), _jsx(Icon, { children: "expand_more" })] }))) : (_jsx(Icon, { children: "more_vert" })) })), open && (_jsx(_Fragment, { children: isMobile ? (_jsx(SwipeableDrawer, Object.assign({ open: true, onClose: handleClose, onOpen: handleOpen, anchor: "bottom", disableSwipeToOpen: true }, { children: renderContent() }))) : (_jsx(PopperRoot, Object.assign({ open: true, anchorEl: popperRef.current, role: undefined, transition: true, className: classes.popperRoot }, PopperProps, { placement: "bottom-end" }, { children: ({ TransitionProps, placement }) => (_jsx(Grow, Object.assign({}, TransitionProps, { style: { transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom' } }, { children: _jsx(Paper, Object.assign({ variant: 'outlined', className: classes.paper }, { children: _jsx(ClickAwayListener, Object.assign({ onClickAway: handleClose }, { children: renderContent() })) })) }))) }))) })), openConfirmDialog && (_jsx(ConfirmDialog, Object.assign({ open: openConfirmDialog }, (currentAction === DELETE_CONTRIBUTION
                 ? {
                     content: (_jsx(FormattedMessage, { id: "ui.contributionActionMenu.deleteContributionInfo", defaultMessage: "ui.contributionActionMenu.deleteContributionInfo" }))
                 }

package/lib/esm/shared/CopyTextArea/index.js

@@ -13,7 +13,7 @@ const classes = {
 const Root = styled(TextField, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (_props, styles) => styles.root
+    overridesResolver: (props, styles) => styles.root
 })(({ theme }) => ({
     [`& .${classes.btnCopy}`]: {
         color: theme.palette.secondary.main
@@ -64,17 +64,10 @@ export default function CopyTextField(inProps) {
     };
     const button = (_jsx(IconButton, Object.assign({ "aria-label": "Copy text", edge: "end", onClick: () => handleCopy(value), className: classes.btnCopy }, { children: _jsx(Icon, { children: "insert_link" }) })));
     // RENDER
-    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className), label: label ? label : _jsx(FormattedMessage, { id: "ui.shared.copyTextField.textToCopy", defaultMessage: "ui.shared.copyTextField.textToCopy" }), margin: "normal", variant: "outlined", disabled: true, fullWidth: true, value: value, multiline: true, onChange: handleChange, slotProps: {
-            input: {
-                disableUnderline: true,
-                endAdornment: (_jsx(InputAdornment, Object.assign({ position: "end" }, { children: openConfirm ? (_jsx(Tooltip, Object.assign({ open: openConfirm, slotProps: {
-                            popper: {
-                                open: true
-                            }
-                        }, title: _jsx(FormattedMessage, { id: "ui.shared.copyTextField.textCopied", defaultMessage: "ui.shared.copyTextField.textCopied" }) }, { children: button }))) : (_jsx(Tooltip, Object.assign({ title: _jsx(FormattedMessage, { id: "ui.shared.copyTextField.textToCopy", defaultMessage: "ui.shared.copyTextField.textToCopy" }) }, { children: button }))) })))
-            },
-            inputLabel: {
-                shrink: true
-            }
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className), label: label ? label : _jsx(FormattedMessage, { id: "ui.shared.copyTextField.textToCopy", defaultMessage: "ui.shared.copyTextField.textToCopy" }), margin: "normal", variant: "outlined", disabled: true, fullWidth: true, value: value, multiline: true, onChange: handleChange, InputProps: {
+            disableUnderline: true,
+            endAdornment: (_jsx(InputAdornment, Object.assign({ position: "end" }, { children: openConfirm ? (_jsx(Tooltip, Object.assign({ open: openConfirm, PopperProps: { open: true }, title: _jsx(FormattedMessage, { id: "ui.shared.copyTextField.textCopied", defaultMessage: "ui.shared.copyTextField.textCopied" }) }, { children: button }))) : (_jsx(Tooltip, Object.assign({ title: _jsx(FormattedMessage, { id: "ui.shared.copyTextField.textToCopy", defaultMessage: "ui.shared.copyTextField.textToCopy" }) }, { children: button }))) })))
+        }, InputLabelProps: {
+            shrink: true
         } }, rest)));
 }

package/lib/esm/shared/CourseUsersTable/ChangeUsersStatus.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Button, MenuItem, Select, Typography } from '@mui/material';
+import { MenuItem, Select, Typography } from '@mui/material';
 import { memo, useCallback, useEffect, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
+import { LoadingButton } from '@mui/lab';
 import { SCCourseJoinStatusType } from '@selfcommunity/types';
 import { CourseService } from '@selfcommunity/api-services';
 import { Logger } from '@selfcommunity/utils';
@@ -45,7 +46,7 @@ function ChangeUserStatus(props) {
             });
         });
     }, [course, user, setLoading, setValue]);
-    return (_jsx(Select, Object.assign({ size: "small", value: value, onChange: handleChange }, { children: OPTIONS.map((option, i) => (_jsx(MenuItem, Object.assign({ value: option }, { children: _jsx(Button, Object.assign({ size: "small", color: "inherit", loading: loading, disabled: loading, sx: {
+    return (_jsx(Select, Object.assign({ size: "small", value: value, onChange: handleChange }, { children: OPTIONS.map((option, i) => (_jsx(MenuItem, Object.assign({ value: option }, { children: _jsx(LoadingButton, Object.assign({ size: "small", color: "inherit", loading: loading, disabled: loading, sx: {
                     padding: 0,
                     ':hover': {
                         backgroundColor: 'unset'

package/lib/esm/shared/CourseUsersTable/CourseUsersTable.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Avatar, Box, Button, Icon, IconButton, InputAdornment, LinearProgress, Stack, styled, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, Typography, useThemeProps } from '@mui/material';
+import { Avatar, Box, Icon, IconButton, InputAdornment, LinearProgress, Stack, styled, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, Typography, useThemeProps } from '@mui/material';
 import { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { FormattedDate, FormattedMessage, useIntl } from 'react-intl';
 import RowSkeleton from './RowSkeleton';
+import { LoadingButton } from '@mui/lab';
 import { SCCourseJoinStatusType } from '@selfcommunity/types';
 import { PREFIX } from './constants';
 import EmptyStatus from '../EmptyStatus';
@@ -135,11 +136,9 @@ function CourseUsersTable(inProps) {
     return (_jsxs(Root, Object.assign({ className: classes.root }, { children: [_jsx(TextField, { ref: inputRef, placeholder: intl.formatMessage({
                     id: 'ui.courseUsersTable.searchBar.placeholder',
                     defaultMessage: 'ui.courseUsersTable.searchBar.placeholder'
-                }), slotProps: {
-                    input: {
-                        startAdornment: (_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(Icon, { children: "search" }) }))),
-                        endAdornment: value.length > 0 ? (_jsxs(Stack, Object.assign({ className: classes.endAdornmentWrapper }, { children: [_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(IconButton, Object.assign({ color: "inherit", onClick: handleSearchClear }, { children: _jsx(Icon, { children: "close" }) })) })), _jsx(InputAdornment, Object.assign({ position: "end" }, { children: _jsx(Button, Object.assign({ color: "primary", variant: "contained", onClick: handleSearchStart, loading: loadingSearch, disabled: loadingSearch, className: classes.searchButton }, { children: _jsx(Icon, { children: "search" }) })) }))] }))) : undefined
-                    }
+                }), InputProps: {
+                    startAdornment: (_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(Icon, { children: "search" }) }))),
+                    endAdornment: value.length > 0 ? (_jsxs(Stack, Object.assign({ className: classes.endAdornmentWrapper }, { children: [_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(IconButton, Object.assign({ color: "inherit", onClick: handleSearchClear }, { children: _jsx(Icon, { children: "close" }) })) })), _jsx(InputAdornment, Object.assign({ position: "end" }, { children: _jsx(LoadingButton, Object.assign({ color: "primary", variant: "contained", onClick: handleSearchStart, loading: loadingSearch, disabled: loadingSearch, className: classes.searchButton }, { children: _jsx(Icon, { children: "search" }) })) }))] }))) : undefined
                 }, value: value, onChange: handleChange, disabled: users.length === 0 && value.length === 0, fullWidth: true, className: classes.search }), _jsx(TableContainer, { children: _jsxs(Table, { children: [_jsx(TableHead, { children: _jsx(TableRow, { children: headerCells.map((cell, i, array) => {
                                     if (i === array.length - 1) {
                                         return _jsx(TableCell, { width: "14%" }, i);
@@ -148,6 +147,6 @@ function CourseUsersTable(inProps) {
                                 }) }) }), _jsxs(TableBody, { children: [users.length > 0 &&
                                     users.map((user, i) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsxs(Stack, Object.assign({ className: classes.avatarWrapper }, { children: [_jsx(Avatar, { alt: user.username, src: user.avatar }), _jsx(Typography, Object.assign({ variant: "body2" }, { children: user.username }))] })) }), mode === SCCourseUsersTableModeType.DASHBOARD && (_jsx(TableCell, { children: _jsxs(Stack, Object.assign({ className: classes.progressWrapper }, { children: [_jsx(LinearProgress, { className: classes.progress, variant: "determinate", value: user.user_completion_rate }), _jsx(Typography, Object.assign({ variant: "body1" }, { children: `${Math.round(user.user_completion_rate)}%` }))] })) })), mode === SCCourseUsersTableModeType.EDIT && (_jsx(TableCell, { children: user.join_status !== SCCourseJoinStatusType.CREATOR && scUserContext.user.id !== user.id ? (_jsx(ChangeUserStatus, { course: course, user: user })) : (_jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: `ui.editCourse.tab.users.table.select.${user.join_status}`, defaultMessage: `ui.editCourse.tab.users.table.select.${user.join_status}` }) }))) })), _jsx(TableCell, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedDate, { value: mode === SCCourseUsersTableModeType.REQUESTS ? user.date_joined : user.joined_at || new Date() }) })) }), _jsx(TableCell, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedDate, { value: mode === SCCourseUsersTableModeType.REQUESTS ? user.date_joined : user.last_active_at || new Date() }) })) }), mode === SCCourseUsersTableModeType.EDIT &&
                                                 user.join_status !== SCCourseJoinStatusType.CREATOR &&
-                                                scUserContext.user.id !== user.id ? (_jsx(TableCell, { children: _jsx(RemoveButton, { ref: buttonRef, course: course, user: user, handleOpenDialog: handleOpenDialog }) })) : (mode === SCCourseUsersTableModeType.EDIT && _jsx(TableCell, {})), mode === SCCourseUsersTableModeType.DASHBOARD && (_jsx(TableCell, { children: _jsx(SeeProgressButton, { course: course, user: user }) })), mode === SCCourseUsersTableModeType.REQUESTS && (_jsx(TableCell, { children: _jsx(RequestButton, { ref: buttonRef, course: course, user: user, handleOpenDialog: handleOpenDialog }) }))] }, i))), state.isLoadingNext && _jsx(RowSkeleton, { editMode: mode !== SCCourseUsersTableModeType.DASHBOARD })] })] }) }), users.length > 0 && (_jsx(Button, Object.assign({ size: "small", variant: "outlined", color: "inherit", loading: state.isLoadingNext, disabled: value.length > 0 || !state.next, className: classes.loadingButton, onClick: handleNext }, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.courseUsersTable.btn.label", defaultMessage: "ui.courseUsersTable.btn.label" }) })) }))), users.length === 0 && (_jsx(EmptyStatus, { icon: "face", title: value.length > 0 ? 'ui.courseUsersTable.empty.search.title' : emptyStatusTitle, description: value.length > 0 ? 'ui.courseUsersTable.empty.search.description' : emptyStatusDescription })), dialog && _jsx(ConfirmDialog, { open: true, onClose: () => handleOpenDialog(null), onConfirm: handleConfirm })] })));
+                                                scUserContext.user.id !== user.id ? (_jsx(TableCell, { children: _jsx(RemoveButton, { ref: buttonRef, course: course, user: user, handleOpenDialog: handleOpenDialog }) })) : (mode === SCCourseUsersTableModeType.EDIT && _jsx(TableCell, {})), mode === SCCourseUsersTableModeType.DASHBOARD && (_jsx(TableCell, { children: _jsx(SeeProgressButton, { course: course, user: user }) })), mode === SCCourseUsersTableModeType.REQUESTS && (_jsx(TableCell, { children: _jsx(RequestButton, { ref: buttonRef, course: course, user: user, handleOpenDialog: handleOpenDialog }) }))] }, i))), state.isLoadingNext && _jsx(RowSkeleton, { editMode: mode !== SCCourseUsersTableModeType.DASHBOARD })] })] }) }), users.length > 0 && (_jsx(LoadingButton, Object.assign({ size: "small", variant: "outlined", color: "inherit", loading: state.isLoadingNext, disabled: value.length > 0 || !state.next, className: classes.loadingButton, onClick: handleNext }, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.courseUsersTable.btn.label", defaultMessage: "ui.courseUsersTable.btn.label" }) })) }))), users.length === 0 && (_jsx(EmptyStatus, { icon: "face", title: value.length > 0 ? 'ui.courseUsersTable.empty.search.title' : emptyStatusTitle, description: value.length > 0 ? 'ui.courseUsersTable.empty.search.description' : emptyStatusDescription })), dialog && _jsx(ConfirmDialog, { open: true, onClose: () => handleOpenDialog(null), onConfirm: handleConfirm })] })));
 }
 export default memo(CourseUsersTable);

package/lib/esm/shared/CourseUsersTable/RemoveButton.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Button, Icon } from '@mui/material';
+import { LoadingButton } from '@mui/lab';
+import { Icon } from '@mui/material';
 import { CourseService } from '@selfcommunity/api-services';
 import { forwardRef, memo, useCallback, useImperativeHandle, useState } from 'react';
 import { SCOPE_SC_UI } from '../../constants/Errors';
@@ -42,6 +43,6 @@ function RemoveButton(props, ref) {
     useImperativeHandle(ref, () => ({
         handleManageUser: (userToRemove) => handleSubmit(userToRemove)
     }), [handleSubmit]);
-    return (_jsx(Button, Object.assign({ size: "small", color: "inherit", variant: "outlined", onClick: () => handleOpenDialog({ tab: SCCourseEditTabType.USERS, user }), loading: loading, disabled: loading }, { children: _jsx(Icon, { children: "close" }) })));
+    return (_jsx(LoadingButton, Object.assign({ size: "small", color: "inherit", variant: "outlined", onClick: () => handleOpenDialog({ tab: SCCourseEditTabType.USERS, user }), loading: loading, disabled: loading }, { children: _jsx(Icon, { children: "close" }) })));
 }
 export default memo(forwardRef(RemoveButton));

package/lib/esm/shared/CourseUsersTable/RequestButton.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Icon, Stack } from '@mui/material';
+import { LoadingButton } from '@mui/lab';
+import { Icon, Stack } from '@mui/material';
 import { CourseService } from '@selfcommunity/api-services';
 import { forwardRef, memo, useCallback, useImperativeHandle, useState } from 'react';
 import { SCOPE_SC_UI } from '../../constants/Errors';
@@ -70,6 +71,6 @@ function RequestButton(props, ref) {
     useImperativeHandle(ref, () => ({
         handleManageUser: (userToReject) => handleReject(userToReject)
     }), [handleReject]);
-    return (_jsxs(Stack, Object.assign({ className: classes.requestButtonWrapper }, { children: [_jsx(Button, Object.assign({ size: "small", color: "primary", variant: "outlined", onClick: handleAccept, loading: acceptLoading, disabled: acceptLoading }, { children: _jsx(Icon, { children: "check" }) })), _jsx(Button, Object.assign({ size: "small", color: "inherit", variant: "outlined", onClick: () => handleOpenDialog({ tab: SCCourseEditTabType.REQUESTS, request: user }), loading: rejectLoading, disabled: rejectLoading }, { children: _jsx(Icon, { children: "close" }) }))] })));
+    return (_jsxs(Stack, Object.assign({ className: classes.requestButtonWrapper }, { children: [_jsx(LoadingButton, Object.assign({ size: "small", color: "primary", variant: "outlined", onClick: handleAccept, loading: acceptLoading, disabled: acceptLoading }, { children: _jsx(Icon, { children: "check" }) })), _jsx(LoadingButton, Object.assign({ size: "small", color: "inherit", variant: "outlined", onClick: () => handleOpenDialog({ tab: SCCourseEditTabType.REQUESTS, request: user }), loading: rejectLoading, disabled: rejectLoading }, { children: _jsx(Icon, { children: "close" }) }))] })));
 }
 export default memo(forwardRef(RequestButton));

package/lib/esm/shared/CustomSnackMessage/index.js

@@ -13,8 +13,8 @@ const classes = {
 const Root = styled(SnackbarContent, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (_props, styles) => styles.root
-})(() => ({}));
+    overridesResolver: (props, styles) => styles.root
+})(({ theme }) => ({}));
 /**
  * Custom Snackbar for notistack messages
  * Use this component:

package/lib/esm/shared/DateTimeAgo/index.js

@@ -11,7 +11,7 @@ const classes = {
 const Root = styled(Box, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (_props, styles) => [styles.root]
+    overridesResolver: (props, styles) => [styles.root]
 })(() => ({
     width: 'auto',
     display: 'inline-flex',
@@ -35,7 +35,7 @@ export default function DateTimeAgo(props) {
      */
     if (date) {
         const formattedDate = getRelativeTime(date);
-        return (_jsxs(Root, Object.assign({ as: "span", className: classNames(classes.root, className) }, rest, { children: [showStartIcon && _jsx(Icon, { children: "access_time" }), _jsx(Tooltip, Object.assign({ title: `${intl.formatDate(date, { year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric' })}`, enterTouchDelay: 0 }, { children: _jsx(Typography, Object.assign({ variant: "body2", component: "span" }, { children: _jsx(FormattedRelativeTime, { value: -formattedDate.value, unit: formattedDate.unit, numeric: "auto" }) })) }))] })));
+        return (_jsxs(Root, Object.assign({ component: "span", className: classNames(classes.root, className) }, rest, { children: [showStartIcon && _jsx(Icon, { children: "access_time" }), _jsx(Tooltip, Object.assign({ title: `${intl.formatDate(date, { year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric' })}`, enterTouchDelay: 0 }, { children: _jsx(Typography, Object.assign({ variant: 'body2', component: 'span' }, { children: _jsx(FormattedRelativeTime, { value: -formattedDate.value, unit: formattedDate.unit, numeric: "auto" }) })) }))] })));
     }
     return null;
 }

package/lib/esm/shared/EmojiPicker/EmojiPicker.d.ts

@@ -1,5 +1,6 @@
 import { PickerProps } from 'emoji-picker-react';
-export interface EmojiPickerProps extends PickerProps {
+interface EmojiPickerProps extends PickerProps {
     className?: string;
 }
 export default function EmojiPicker(inProps: EmojiPickerProps): JSX.Element;
+export {};

package/lib/esm/shared/EventActionsMenu/index.js

@@ -163,13 +163,5 @@ export default function EventActionsMenu(inProps) {
     if (!scEvent) {
         return null;
     }
-    return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { onClick: handleOpen }, { children: _jsx(Icon, { children: "more_vert" }) })), isMobile ? (_jsx(SwipeableDrawerRoot, Object.assign({ className: classes.drawerRoot, anchor: "bottom", open: Boolean(anchorEl), 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: Boolean(anchorEl), onClose: handleClose, slotProps: {
-                    paper: {
-                        className: classes.paper
-                    }
-                } }, { children: renderList() }))), openConfirmDialog && (_jsx(ConfirmDialog, { open: openConfirmDialog, title: _jsx(FormattedMessage, { id: "ui.shared.eventActionsMenu.dialog.msg", defaultMessage: "ui.shared.eventActionsMenu.dialog.msg" }), btnConfirm: _jsx(FormattedMessage, { id: "ui.shared.eventActionsMenu.dialog.confirm", defaultMessage: "ui.shared.eventActionsMenu.dialog.confirm" }), onConfirm: handleDeleteThread, onClose: handleCloseDialog })), openEdit && _jsx(EventForm, { onClose: handleEditClick, event: scEvent, onSuccess: handleEditSuccess })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { onClick: handleOpen }, { children: _jsx(Icon, { children: "more_vert" }) })), isMobile ? (_jsx(SwipeableDrawerRoot, Object.assign({ className: classes.drawerRoot, anchor: "bottom", open: Boolean(anchorEl), 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: Boolean(anchorEl), onClose: handleClose, PaperProps: { className: classes.paper } }, { children: renderList() }))), openConfirmDialog && (_jsx(ConfirmDialog, { open: openConfirmDialog, title: _jsx(FormattedMessage, { id: "ui.shared.eventActionsMenu.dialog.msg", defaultMessage: "ui.shared.eventActionsMenu.dialog.msg" }), btnConfirm: _jsx(FormattedMessage, { id: "ui.shared.eventActionsMenu.dialog.confirm", defaultMessage: "ui.shared.eventActionsMenu.dialog.confirm" }), onConfirm: handleDeleteThread, onClose: handleCloseDialog })), openEdit && _jsx(EventForm, { onClose: handleEditClick, event: scEvent, onSuccess: handleEditSuccess })] }));
 }

package/lib/esm/shared/HiddenPurchasableContent/HiddenPurchasableContent.js

@@ -1,6 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { styled, Typography } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { Typography } from '@mui/material';
 import Widget from '../../components/Widget';
 import { useThemeProps } from '@mui/system';
 import classNames from 'classnames';
@@ -13,8 +14,8 @@ const classes = {
 const Root = styled(Widget, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (_props, styles) => styles.root
-})(() => ({}));
+    overridesResolver: (props, styles) => styles.root
+})(({ theme }) => ({}));
 /**
  * > API documentation for the Community-JS HiddenPurchasableContent component. Learn about the available props and the CSS API.
 

package/lib/esm/shared/InfiniteScroll/stories/ScrolleableTop.js

@@ -19,5 +19,5 @@ export default function ScrolleableTop() {
     return (_jsxs("div", { children: [_jsx("h1", { children: "demo: Infinite Scroll on top" }), _jsx("hr", {}), _jsx("div", Object.assign({ id: "scrollableDiv", style: {
                     height: 300,
                     overflow: 'auto'
-                } }, { children: _jsx(InfiniteScroll, Object.assign({ dataLength: items.length, previous: fetchMoreData, hasMorePrevious: true, loaderPrevious: _jsx("h4", { children: "Loading prev..." }), scrollableTarget: "scrollableDiv", scrollThreshold: "0px" }, { children: items.map((_, index) => (_jsxs("div", Object.assign({ style: style }, { children: ["div - #", index] }), index))) })) }))] }));
+                } }, { children: _jsx(InfiniteScroll, Object.assign({ dataLength: items.length, previous: fetchMoreData, hasMorePrevious: true, loaderPrevious: _jsx("h4", { children: "Loading prev..." }), scrollableTarget: "scrollableDiv", scrollThreshold: '0px' }, { children: items.map((_, index) => (_jsxs("div", Object.assign({ style: style }, { children: ["div - #", index] }), index))) })) }))] }));
 }

package/lib/esm/shared/LessonCommentActionsMenu/index.js

@@ -179,7 +179,13 @@ export default function LessonCommentActionsMenu(props) {
     /**
      * Renders component
      */
-    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, { children: [_jsx(IconButton, Object.assign({ ref: (ref) => {
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, { children: [_jsx(IconButton
+            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+            // @ts-ignore
+            , Object.assign({ 
+                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                // @ts-ignore
+                ref: (ref) => {
                     popperRef.current = ref;
-                }, "aria-haspopup": "true", onClick: handleOpen, className: classes.button, size: "small" }, { children: _jsx(Icon, { children: "more_vert" }) })), open && (_jsx(_Fragment, { children: isMobile ? (_jsx(SwipeableDrawer, Object.assign({ open: true, onClose: handleClose, onOpen: handleOpen, anchor: "bottom", disableSwipeToOpen: true }, { children: renderContent() }))) : (_jsx(PopperRoot, Object.assign({ open: true, anchorEl: popperRef.current, role: undefined, transition: true, className: classes.popperRoot }, PopperProps, { placement: "bottom-end" }, { children: ({ TransitionProps, placement }) => (_jsx(Grow, Object.assign({}, TransitionProps, { style: { transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom' } }, { children: _jsx(Paper, Object.assign({ variant: "outlined", className: classes.paper }, { children: _jsx(ClickAwayListener, Object.assign({ onClickAway: handleClose }, { children: renderContent() })) })) }))) }))) })), openConfirmDialog && (_jsx(ConfirmDialog, { open: openConfirmDialog, onConfirm: handleConfirmedAction, isUpdating: Boolean(currentActionLoading), onClose: () => setOpenConfirmDialog(false) }))] })));
+                }, "aria-haspopup": "true", onClick: handleOpen, className: classes.button, size: "small" }, { children: _jsx(Icon, { children: "more_vert" }) })), open && (_jsx(_Fragment, { children: isMobile ? (_jsx(SwipeableDrawer, Object.assign({ open: true, onClose: handleClose, onOpen: handleOpen, anchor: "bottom", disableSwipeToOpen: true }, { children: renderContent() }))) : (_jsx(PopperRoot, Object.assign({ open: true, anchorEl: popperRef.current, role: undefined, transition: true, className: classes.popperRoot }, PopperProps, { placement: "bottom-end" }, { children: ({ TransitionProps, placement }) => (_jsx(Grow, Object.assign({}, TransitionProps, { style: { transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom' } }, { children: _jsx(Paper, Object.assign({ variant: 'outlined', className: classes.paper }, { children: _jsx(ClickAwayListener, Object.assign({ onClickAway: handleClose }, { children: renderContent() })) })) }))) }))) })), openConfirmDialog && (_jsx(ConfirmDialog, { open: openConfirmDialog, onConfirm: handleConfirmedAction, isUpdating: Boolean(currentActionLoading), onClose: () => setOpenConfirmDialog(false) }))] })));
 }

package/lib/esm/shared/Lightbox/BaseLightbox.js

@@ -23,7 +23,7 @@ const BaseLightbox = (props) => {
     /**
      * Renders root object
      */
-    return (_jsx(Root, Object.assign({}, rest, { className: classes.root, images: images, visible: visible && index !== -1, index: currentImageIndex, onIndexChange: handleIndexChange, onClose: onClose, afterClose: afterClose, loadingElement: _jsx(CircularProgress, { color: "primary" }), toolbarRender: toolbarRender
+    return (_jsx(Root, Object.assign({}, rest, { className: classes.root, images: images, visible: visible && index !== -1, index: currentImageIndex, onIndexChange: handleIndexChange, onClose: onClose, afterClose: afterClose, loadingElement: _jsx(CircularProgress, { color: 'primary' }), toolbarRender: toolbarRender
             ? toolbarRender
             : () => {
                 return toolbarButtons;