@selfcommunity/react-ui 1.2.0-alpha.2 → 1.2.0-alpha.4

package/lib/esm/components/EditCourse/Lessons/SectionRow.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
 import { forwardRef, Fragment, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { Collapse, Icon, IconButton, MenuItem, Stack, Table, TableBody, TableCell, TableRow, Typography } from '@mui/material';
+import { Collapse, Icon, IconButton, MenuItem, Stack, Table, TableBody, TableCell, TableRow, Typography, useTheme } from '@mui/material';
 import classNames from 'classnames';
 import { PREFIX } from '../constants';
 import LessonRow from './LessonRow';
@@ -25,8 +25,7 @@ const classes = {
     cellWidth: `${PREFIX}-cell-width`,
     cellAlignRight: `${PREFIX}-cell-align-right`,
     cellAlignCenter: `${PREFIX}-cell-align-center`,
-    cellPadding: `${PREFIX}-cell-padding`,
-    contrastColor: `${PREFIX}-contrast-color`
+    cellPadding: `${PREFIX}-cell-padding`
 };
 function SectionRow(props, ref) {
     // PROPS
@@ -41,6 +40,7 @@ function SectionRow(props, ref) {
     const { isDisabled } = useIsDisabled();
     const intl = useIntl();
     const { enqueueSnackbar } = useSnackbar();
+    const theme = useTheme();
     // EFFECTS
     useEffect(() => {
         if (section.lessons) {
@@ -151,6 +151,6 @@ function SectionRow(props, ref) {
                                     ? Endpoints.CreateCourseSection.url({ id: course.id })
                                     : Endpoints.PatchCourseSection.url({ id: course.id, section_id: section.id }),
                                 method: isNewRow ? Endpoints.CreateCourseSection.method : Endpoints.PatchCourseSection.method
-                            }, row: section, isNewRow: isNewRow, handleManageRow: handleManageSection, editMode: editMode, handleDisableEditMode: handleDisableEditMode }) }), course.type !== SCCourseTypologyType.SELF && (_jsx(TableCell, Object.assign({ className: classes.cellAlignCenter }, { children: _jsx(LessonReleaseMenu, { course: course, section: section }) }))), _jsx(TableCell, Object.assign({ className: classes.cellAlignRight }, { children: _jsxs(Stack, Object.assign({ className: classes.actionsWrapper }, { children: [_jsx(AddButton, { label: "ui.editCourse.tab.lessons.table.lesson", handleAddRow: handleAddTempLesson, color: "primary", variant: "contained", disabled: isDisabled }), _jsxs(MenuRow, Object.assign({ disabled: isDisabled }, { children: [_jsx(MenuItem, Object.assign({ onClick: handleAbleEditMode }, { children: _jsx(Typography, Object.assign({ variant: "body1", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: "ui.editCourse.tab.lessons.table.menu.rename", defaultMessage: "ui.editCourse.tab.lessons.table.menu.rename" }) })) })), _jsx(MenuItem, Object.assign({ onClick: () => handleOpenDialog({ row: RowType.SECTION, section }) }, { children: _jsx(Typography, Object.assign({ variant: "body1", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: "ui.editCourse.tab.lessons.table.menu.delete", defaultMessage: "ui.editCourse.tab.lessons.table.menu.delete" }) })) }))] }))] })) }))] })), _jsx(TableRow, { children: _jsx(TableCell, Object.assign({ className: classes.tableBodyCollapseWrapper, colSpan: 4 }, { children: _jsx(Collapse, Object.assign({ in: expand, timeout: "auto", unmountOnExit: true }, { children: _jsx(DragDropContext, Object.assign({ onDragEnd: handleDragEnd }, { children: _jsx(Table, { children: _jsx(Droppable, Object.assign({ droppableId: "droppable-2" }, { children: (outerProvider) => (_jsxs(TableBody, Object.assign({ ref: outerProvider.innerRef }, outerProvider.droppableProps, { children: [lessons.map((lesson, i, array) => (_jsx(Draggable, Object.assign({ draggableId: i.toString(), index: i, isDragDisabled: isDisabled }, { children: (innerProvider) => (_jsx(LessonRow, { provider: innerProvider, course: course, section: section, lesson: lesson, isNewRow: isNewLocalRow && i + 1 === array.length, handleManageLesson: handleManageLesson, handleOpenDialog: () => handleOpenDialog({ row: RowType.LESSON, section, lesson }), ref: innerRef }, i)) }), i))), outerProvider.placeholder] }))) })) }) })) })) })) })] }));
+                            }, row: section, isNewRow: isNewRow, handleManageRow: handleManageSection, editMode: editMode, handleDisableEditMode: handleDisableEditMode }) }), course.type !== SCCourseTypologyType.SELF && (_jsx(TableCell, Object.assign({ className: classes.cellAlignCenter }, { children: _jsx(LessonReleaseMenu, { course: course, section: section }) }))), _jsx(TableCell, Object.assign({ className: classes.cellAlignRight }, { children: _jsxs(Stack, Object.assign({ className: classes.actionsWrapper }, { children: [_jsx(AddButton, { label: "ui.editCourse.tab.lessons.table.lesson", handleAddRow: handleAddTempLesson, color: "primary", variant: "contained", disabled: isDisabled }), _jsxs(MenuRow, Object.assign({ disabled: isDisabled }, { children: [_jsx(MenuItem, Object.assign({ onClick: handleAbleEditMode }, { children: _jsx(Typography, Object.assign({ variant: "body1", sx: { color: theme.palette.getContrastText(theme.palette.background.paper) } }, { children: _jsx(FormattedMessage, { id: "ui.editCourse.tab.lessons.table.menu.rename", defaultMessage: "ui.editCourse.tab.lessons.table.menu.rename" }) })) })), _jsx(MenuItem, Object.assign({ onClick: () => handleOpenDialog({ row: RowType.SECTION, section }) }, { children: _jsx(Typography, Object.assign({ variant: "body1", sx: { color: theme.palette.getContrastText(theme.palette.background.paper) } }, { children: _jsx(FormattedMessage, { id: "ui.editCourse.tab.lessons.table.menu.delete", defaultMessage: "ui.editCourse.tab.lessons.table.menu.delete" }) })) }))] }))] })) }))] })), _jsx(TableRow, { children: _jsx(TableCell, Object.assign({ className: classes.tableBodyCollapseWrapper, colSpan: 4 }, { children: _jsx(Collapse, Object.assign({ in: expand, timeout: "auto", unmountOnExit: true }, { children: _jsx(DragDropContext, Object.assign({ onDragEnd: handleDragEnd }, { children: _jsx(Table, { children: _jsx(Droppable, Object.assign({ droppableId: "droppable-2" }, { children: (outerProvider) => (_jsxs(TableBody, Object.assign({ ref: outerProvider.innerRef }, outerProvider.droppableProps, { children: [lessons.map((lesson, i, array) => (_jsx(Draggable, Object.assign({ draggableId: i.toString(), index: i, isDragDisabled: isDisabled }, { children: (innerProvider) => (_jsx(LessonRow, { provider: innerProvider, course: course, section: section, lesson: lesson, isNewRow: isNewLocalRow && i + 1 === array.length, handleManageLesson: handleManageLesson, handleOpenDialog: () => handleOpenDialog({ row: RowType.LESSON, section, lesson }), ref: innerRef }, i)) }), i))), outerProvider.placeholder] }))) })) }) })) })) })) })] }));
 }
 export default memo(forwardRef(SectionRow));

package/lib/esm/components/EditCourse/Lessons.js

@@ -35,7 +35,8 @@ const classes = {
     cellAlignCenter: `${PREFIX}-cell-align-center`,
     lessonEmptyStatus: `${PREFIX}-lesson-empty-status`,
     emptyStatusButton: `${PREFIX}-empty-status-button`,
-    contrastColor: `${PREFIX}-contrast-color`
+    defaultContrastColor: `${PREFIX}-default-contrast-color`,
+    paperContrastColor: `${PREFIX}-paper-contrast-color`
 };
 function Lessons(props) {
     // PROPS
@@ -184,10 +185,10 @@ function Lessons(props) {
         }
         handleOpenDialog(null);
     }, [dialog, handleOpenDialog]);
-    return (_jsxs(Box, { children: [_jsx(Typography, Object.assign({ className: classNames(classes.lessonTitle, classes.contrastColor), variant: "h4" }, { children: _jsx(FormattedMessage, { id: "ui.editCourse.tab.lessons", defaultMessage: "ui.editCourse.tab.lessons" }) })), _jsxs(Stack, Object.assign({ className: classes.lessonInfoWrapper }, { children: [_jsx(CourseTypePopover, { course: course }), _jsx(Status, { course: course, handleTabChange: handleTabChange })] })), sections.length === 0 && (_jsx(EmptyStatus, { icon: "courses", title: "ui.editCourse.tab.lessons.table.empty.title", description: "ui.editCourse.tab.lessons.table.empty.description", actions: _jsx(AddButton, { className: classes.emptyStatusButton, label: "ui.editCourse.tab.lessons.table.section", handleAddRow: handleAddTempSection, color: "inherit", variant: "outlined" }), className: classes.lessonEmptyStatus })), sections.length > 0 && (_jsxs(Box, Object.assign({ className: classes.lessonsInnerWrapper }, { children: [_jsxs(Stack, Object.assign({ className: classes.lessonsSectionsWrapper }, { children: [_jsxs(Stack, Object.assign({ className: classes.lessonsSections }, { children: [_jsx(Typography, Object.assign({ variant: "h5", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: "ui.course.table.sections.title", defaultMessage: "ui.course.table.sections.title", values: {
+    return (_jsxs(Box, { children: [_jsx(Typography, Object.assign({ className: classNames(classes.lessonTitle, classes.defaultContrastColor), variant: "h4" }, { children: _jsx(FormattedMessage, { id: "ui.editCourse.tab.lessons", defaultMessage: "ui.editCourse.tab.lessons" }) })), _jsxs(Stack, Object.assign({ className: classes.lessonInfoWrapper }, { children: [_jsx(CourseTypePopover, { course: course }), _jsx(Status, { course: course, handleTabChange: handleTabChange })] })), sections.length === 0 && (_jsx(EmptyStatus, { icon: "courses", title: "ui.editCourse.tab.lessons.table.empty.title", description: "ui.editCourse.tab.lessons.table.empty.description", actions: _jsx(AddButton, { className: classes.emptyStatusButton, label: "ui.editCourse.tab.lessons.table.section", handleAddRow: handleAddTempSection, color: "inherit", variant: "outlined" }), className: classes.lessonEmptyStatus })), sections.length > 0 && (_jsxs(Box, Object.assign({ className: classes.lessonsInnerWrapper }, { children: [_jsxs(Stack, Object.assign({ className: classes.lessonsSectionsWrapper }, { children: [_jsxs(Stack, Object.assign({ className: classes.lessonsSections }, { children: [_jsx(Typography, Object.assign({ variant: "h5", className: classes.paperContrastColor }, { children: _jsx(FormattedMessage, { id: "ui.course.table.sections.title", defaultMessage: "ui.course.table.sections.title", values: {
                                                 sectionsNumber: course.num_sections
-                                            } }) })), _jsx(Box, { className: classes.circle }), _jsx(Typography, Object.assign({ variant: "h5", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: "ui.course.table.lessons.title", defaultMessage: "ui.course.table.lessons.title", values: {
+                                            } }) })), _jsx(Box, { className: classes.circle }), _jsx(Typography, Object.assign({ variant: "h5", className: classes.paperContrastColor }, { children: _jsx(FormattedMessage, { id: "ui.course.table.lessons.title", defaultMessage: "ui.course.table.lessons.title", values: {
                                                 lessonsNumber: course.num_lessons
-                                            } }) }))] })), _jsx(AddButton, { label: "ui.editCourse.tab.lessons.table.section", handleAddRow: handleAddTempSection, color: "primary", variant: "contained", disabled: isDisabled })] })), _jsx(DragDropContext, Object.assign({ onDragEnd: handleDragEnd }, { children: _jsx(TableContainer, Object.assign({ className: classes.tableContainer }, { children: _jsxs(Table, Object.assign({ className: classes.table }, { children: [_jsx(TableHead, Object.assign({ className: classes.tableHeader }, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.cellWidth }), headerCells.map((cell, i) => (_jsx(TableCell, Object.assign({ className: cell.className }, { children: _jsx(Typography, Object.assign({ className: classNames(classes.tableHeaderTypography, classes.contrastColor), variant: "overline" }, { children: _jsx(FormattedMessage, { id: cell.id, defaultMessage: cell.id }) })) }), i)))] }) })), _jsx(Droppable, Object.assign({ droppableId: "droppable-1" }, { children: (outerProvider) => (_jsxs(TableBody, Object.assign({ ref: outerProvider.innerRef }, outerProvider.droppableProps, { className: classes.tableBody }, { children: [sections.map((section, i, array) => (_jsx(Draggable, Object.assign({ draggableId: i.toString(), index: i, isDragDisabled: isDisabled }, { children: (innerProvider) => (_jsx(SectionRow, { course: course, provider: innerProvider, section: section, isNewRow: isNewRow && i + 1 === array.length, handleManageSection: handleManageSection, handleOpenDialog: handleOpenDialog, ref: ref }, i)) }), i))), outerProvider.placeholder] }))) }))] })) })) })), dialog && _jsx(ConfirmDialog, { open: true, onClose: () => handleOpenDialog(null), onConfirm: handleDeleteRow })] })))] }));
+                                            } }) }))] })), _jsx(AddButton, { label: "ui.editCourse.tab.lessons.table.section", handleAddRow: handleAddTempSection, color: "primary", variant: "contained", disabled: isDisabled })] })), _jsx(DragDropContext, Object.assign({ onDragEnd: handleDragEnd }, { children: _jsx(TableContainer, Object.assign({ className: classes.tableContainer }, { children: _jsxs(Table, Object.assign({ className: classes.table }, { children: [_jsx(TableHead, Object.assign({ className: classes.tableHeader }, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.cellWidth }), headerCells.map((cell, i) => (_jsx(TableCell, Object.assign({ className: cell.className }, { children: _jsx(Typography, Object.assign({ className: classNames(classes.tableHeaderTypography, classes.paperContrastColor), variant: "overline" }, { children: _jsx(FormattedMessage, { id: cell.id, defaultMessage: cell.id }) })) }), i)))] }) })), _jsx(Droppable, Object.assign({ droppableId: "droppable-1" }, { children: (outerProvider) => (_jsxs(TableBody, Object.assign({ ref: outerProvider.innerRef }, outerProvider.droppableProps, { className: classes.tableBody }, { children: [sections.map((section, i, array) => (_jsx(Draggable, Object.assign({ draggableId: i.toString(), index: i, isDragDisabled: isDisabled }, { children: (innerProvider) => (_jsx(SectionRow, { course: course, provider: innerProvider, section: section, isNewRow: isNewRow && i + 1 === array.length, handleManageSection: handleManageSection, handleOpenDialog: handleOpenDialog, ref: ref }, i)) }), i))), outerProvider.placeholder] }))) }))] })) })) })), dialog && _jsx(ConfirmDialog, { open: true, onClose: () => handleOpenDialog(null), onConfirm: handleDeleteRow })] })))] }));
 }
 export default memo(Lessons);

package/lib/esm/components/EditCourse/Options/SwitchForm.js

@@ -4,7 +4,7 @@ import { memo, useCallback, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { PREFIX } from '../constants';
 const classes = {
-    contrastColor: `${PREFIX}-contrast-color`
+    paperContrastColor: `${PREFIX}-paper-contrast-color`
 };
 function SwitchForm(props) {
     // PROPS
@@ -17,6 +17,6 @@ function SwitchForm(props) {
         setValue(_checked);
         handleChangeOptions(name, _checked);
     }, [setValue]);
-    return (_jsxs(FormControl, Object.assign({ component: "fieldset", variant: "standard" }, { children: [_jsx(FormLabel, Object.assign({ component: "legend" }, { children: _jsx(Typography, Object.assign({ variant: "h5" }, { children: _jsx(FormattedMessage, { id: title, defaultMessage: title }) })) })), _jsx(FormControlLabel, { control: _jsx(Switch, { color: "primary", checked: value, name: name, onChange: handleChange }), label: _jsx(Typography, Object.assign({ variant: "body1", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: description, defaultMessage: description }) })) })] })));
+    return (_jsxs(FormControl, Object.assign({ component: "fieldset", variant: "standard" }, { children: [_jsx(FormLabel, Object.assign({ component: "legend" }, { children: _jsx(Typography, Object.assign({ variant: "h5", className: classes.paperContrastColor }, { children: _jsx(FormattedMessage, { id: title, defaultMessage: title }) })) })), _jsx(FormControlLabel, { control: _jsx(Switch, { color: "primary", checked: value, name: name, onChange: handleChange }), label: _jsx(Typography, Object.assign({ variant: "body1", className: classes.paperContrastColor }, { children: _jsx(FormattedMessage, { id: description, defaultMessage: description }) })) })] })));
 }
 export default memo(SwitchForm);

package/lib/esm/components/EditCourse/Options.js

@@ -14,7 +14,7 @@ const classes = {
     optionsWrapper: `${PREFIX}-options-wrapper`,
     optionsDivider: `${PREFIX}-options-divider`,
     optionsButtonWrapper: `${PREFIX}-options-button-wrapper`,
-    contrastColor: `${PREFIX}-contrast-color`
+    paperContrastColor: `${PREFIX}-paper-contrast-color`
 };
 const OPTIONS = {
     enforce_lessons_order: {
@@ -88,6 +88,6 @@ function Options(props) {
             });
         });
     }, [course, tempOptions, setCanSave, setLoading]);
-    return (_jsxs(Box, Object.assign({ className: classes.optionsContainer }, { children: [_jsx(Stack, Object.assign({ className: classes.optionsWrapper }, { children: Object.entries(OPTIONS).map(([key, value], i) => (_jsx(SwitchForm, { name: key, title: value.title, description: value.description, checked: course[key], handleChangeOptions: handleChange }, i))) })), _jsx(Stack, Object.assign({ className: classes.optionsButtonWrapper }, { children: _jsx(Button, Object.assign({ size: "small", variant: "contained", disabled: !canSave, onClick: handleSubmit, loading: loading }, { children: _jsx(Typography, Object.assign({ variant: "body1", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: "ui.editCourse.tab.options.button.save", defaultMessage: "ui.editCourse.tab.options.button.save" }) })) })) }))] })));
+    return (_jsxs(Box, Object.assign({ className: classes.optionsContainer }, { children: [_jsx(Stack, Object.assign({ className: classes.optionsWrapper }, { children: Object.entries(OPTIONS).map(([key, value], i) => (_jsx(SwitchForm, { name: key, title: value.title, description: value.description, checked: course[key], handleChangeOptions: handleChange }, i))) })), _jsx(Stack, Object.assign({ className: classes.optionsButtonWrapper }, { children: _jsx(Button, Object.assign({ size: "small", variant: "contained", disabled: !canSave, onClick: handleSubmit, loading: loading }, { children: _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.editCourse.tab.options.button.save", defaultMessage: "ui.editCourse.tab.options.button.save" }) })) })) }))] })));
 }
 export default memo(Options);

package/lib/esm/components/EditCourse/Status.js

@@ -3,12 +3,11 @@ import { Button, Chip, Typography } from '@mui/material';
 import { useIntl } from 'react-intl';
 import { PREFIX } from './constants';
 import { SCCoursePrivacyType } from '@selfcommunity/types';
-import classNames from 'classnames';
 import { useCallback } from 'react';
 import { SCCourseEditTabType } from '../../types';
 const classes = {
     status: `${PREFIX}-status`,
-    contrastColor: `${PREFIX}-contrast-color`
+    defaultContrastColor: `${PREFIX}-default-contrast-color`
 };
 export default function Status(props) {
     // STATES
@@ -19,11 +18,11 @@ export default function Status(props) {
     const handleClick = useCallback(() => {
         handleTabChange(null, SCCourseEditTabType.CUSTOMIZE);
     }, [handleTabChange]);
-    return (_jsx(Chip, { label: _jsx(Button, Object.assign({ size: "small", variant: "text", color: "inherit", onClick: handleClick }, { children: _jsx(Typography, Object.assign({ variant: "body1" }, { children: intl.formatMessage({ id: 'ui.editCourse.tab.lessons.status', defaultMessage: 'ui.editCourse.tab.lessons.status' }, {
+    return (_jsx(Chip, { label: _jsx(Button, Object.assign({ size: "small", variant: "text", color: "inherit", onClick: handleClick }, { children: _jsx(Typography, Object.assign({ variant: "body1", className: classes.defaultContrastColor }, { children: intl.formatMessage({ id: 'ui.editCourse.tab.lessons.status', defaultMessage: 'ui.editCourse.tab.lessons.status' }, {
                     status: intl.formatMessage({
                         id: `ui.course.privacy.${course.privacy === SCCoursePrivacyType.DRAFT ? 'draft' : course.privacy}`,
                         defaultMessage: `ui.course.privacy.${course.privacy === SCCoursePrivacyType.DRAFT ? 'draft' : course.privacy}`
                     }),
                     b: (chunks) => (_jsx(Typography, Object.assign({ component: "b", fontWeight: "bold" }, { children: chunks }), "ui.editCourse.tab.lessons.status.b"))
-                }) })) })), className: classNames(classes.status, classes.contrastColor) }));
+                }) })) })), className: classes.status }));
 }

package/lib/esm/components/EditCourse/Users.js

@@ -19,7 +19,7 @@ import { SCCourseEventType, SCTopicType } from '../../constants/PubSub';
 import { SCCourseUsersTableModeType } from '../../types/course';
 const classes = {
     usersStatusWrapper: `${PREFIX}-users-status-wrapper`,
-    contrastColor: `${PREFIX}-contrast-color`
+    defaultContrastColor: `${PREFIX}-default-contrast-color`
 };
 const headerCells = [
     {
@@ -124,7 +124,7 @@ function Users(props) {
             });
         });
     }, [course, dispatch]);
-    return (_jsxs(Box, { children: [_jsx(Typography, Object.assign({ variant: "h6", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: "ui.editCourse.tab.users.title", defaultMessage: "ui.editCourse.tab.users.title", values: { usersNumber: state.count } }) })), _jsxs(Stack, Object.assign({ className: classes.usersStatusWrapper }, { children: [_jsx(Status, { course: course, handleTabChange: handleTabChange }), _jsx(AddUsersButton, { label: "ui.editCourse.tab.users.addUsersButton.label", endpoint: {
+    return (_jsxs(Box, { children: [_jsx(Typography, Object.assign({ variant: "h6", className: classes.defaultContrastColor }, { children: _jsx(FormattedMessage, { id: "ui.editCourse.tab.users.title", defaultMessage: "ui.editCourse.tab.users.title", values: { usersNumber: state.count } }) })), _jsxs(Stack, Object.assign({ className: classes.usersStatusWrapper }, { children: [_jsx(Status, { course: course, handleTabChange: handleTabChange }), _jsx(AddUsersButton, { label: "ui.editCourse.tab.users.addUsersButton.label", endpoint: {
                             url: () => Endpoints.GetCourseSuggestedUsers.url({ id: course.id }),
                             method: Endpoints.GetCourseSuggestedUsers.method
                         }, onConfirm: handleConfirm })] })), _jsx(CourseUsersTable, { state: state, dispatch: dispatch, course: course, endpointSearch: {

package/lib/esm/components/EventHeader/EventHeader.js

@@ -111,7 +111,7 @@ export default function EventHeader(inProps) {
     return (
     // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
     // @ts-ignore
-    _jsxs(Root, Object.assign({ id: id, className: classNames(classes.root, className), isEventAdmin: isEventAdmin, isEventFinished: isEventFinished }, rest, { children: [_jsx(Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: _jsx(Box, Object.assign({ className: classes.calendar }, { children: _jsx(Calendar, { day: new Date(scEvent.start_date).getDate() }) })) })), _jsxs(Box, Object.assign({ className: classes.info }, { children: [scEvent.running && (_jsx(Typography, Object.assign({ variant: "body1", className: classes.inProgress }, { children: _jsx(FormattedMessage, { id: "ui.eventHeader.inProgress", defaultMessage: "ui.eventHeader.inProgress" }) }))), isEventFinished && (_jsx(Chip, { icon: _jsx(Icon, Object.assign({ fontSize: "small", className: classes.chipIcon }, { children: "calendar_off" })), label: _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.eventHeader.finished", defaultMessage: "ui.eventHeader.finished" }) })), variant: "outlined", size: "medium", color: "secondary", className: classes.chip })), _jsx(Typography, Object.assign({ className: classes.time }, { children: scEvent.end_date && scEvent.end_date !== scEvent.start_date ? (new Date(scEvent.start_date).getDate() !== new Date(scEvent.end_date).getDate() ? (_jsx(FormattedMessage, { id: "ui.eventHeader.startEndTimeDiff", defaultMessage: "ui.eventHeader.startEndTimeDiff", values: {
+    _jsxs(Root, Object.assign({ id: id, className: classNames(classes.root, className), isEventAdmin: isEventAdmin, isEventFinished: isEventFinished }, rest, { children: [_jsx(Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: _jsx(Box, Object.assign({ className: classes.calendar }, { children: _jsx(Calendar, { day: new Date(scEvent.start_date).getDate() }) })) })), _jsxs(Box, Object.assign({ className: classes.info }, { children: [scEvent.running && (_jsx(Typography, Object.assign({ variant: "body1", className: classes.inProgress }, { children: _jsx(FormattedMessage, { id: "ui.eventHeader.inProgress", defaultMessage: "ui.eventHeader.inProgress" }) }))), isEventFinished && (_jsx(Chip, { icon: _jsx(Icon, Object.assign({ fontSize: "small", className: classes.chipIcon }, { children: "calendar_off" })), label: _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.eventHeader.finished", defaultMessage: "ui.eventHeader.finished" }) })), variant: "filled", size: "medium", color: "secondary", className: classes.chip })), _jsx(Typography, Object.assign({ className: classes.time }, { children: scEvent.end_date && scEvent.end_date !== scEvent.start_date ? (new Date(scEvent.start_date).getDate() !== new Date(scEvent.end_date).getDate() ? (_jsx(FormattedMessage, { id: "ui.eventHeader.startEndTimeDiff", defaultMessage: "ui.eventHeader.startEndTimeDiff", values: {
                                 startDate: intl.formatDate(scEvent.start_date, {
                                     weekday: 'long',
                                     day: 'numeric',

package/lib/esm/components/FeedObject/Contributors/Contributors.js

@@ -47,5 +47,5 @@ export default function ContributorsFeedObject(props) {
     if (!contributorsObject.feedObject) {
         return null;
     }
-    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsx(Box, { children: contributorsObject.isLoadingNext && !openContributorsDialog ? (_jsx(ContributorsSkeleton, Object.assign({}, ContributorsSkeletonProps))) : (_jsx(_Fragment, { children: contributorsObject.contributors.length > 0 ? (_jsxs(_Fragment, { children: [_jsxs(Button, Object.assign({ variant: "text", onClick: () => setOpenContributorsDialog(true), classes: { root: classes.btnParticipants }, color: "inherit" }, { children: [_jsx(FormattedMessage, { id: "ui.feedObject.contributors.participants", defaultMessage: "ui.feedObject.contributors.participants" }), ":", _jsxs(AvatarGroup, Object.assign({}, rest, { children: [contributorsObject.contributors.map((c, i) => (_jsx(Avatar, { alt: c.username, src: c.avatar }, i))), [...Array(Math.max(contributorsObject.total - contributorsObject.contributors.length, 0))].map((x, i) => (_jsx(Avatar, {}, i)))] }))] })), openContributorsDialog && (_jsx(BaseDialog, Object.assign({ title: _jsx(FormattedMessage, { defaultMessage: "ui.feedObject.contributors.title", id: "ui.feedObject.contributors.title", values: { total: contributorsObject.total } }), onClose: () => setOpenContributorsDialog(false), open: openContributorsDialog }, { children: contributorsObject.isLoadingNext ? (_jsx(CentralProgress, { size: 50 })) : (_jsx(InfiniteScroll, Object.assign({ dataLength: contributorsObject.contributors.length, next: contributorsObject.getNextPage(), hasMoreNext: Boolean(contributorsObject.next), loaderNext: _jsx(CentralProgress, { size: 30 }), height: 400, endMessage: _jsx(Typography, Object.assign({ variant: "body2", align: "center", fontWeight: "bold" }, { children: _jsx(FormattedMessage, { id: "ui.feedObject.contributors.noOtherContributors", defaultMessage: "ui.feedObject.contributors.noOtherContributors" }) })) }, { children: _jsx(List, { children: contributorsObject.contributors.map((c, i) => (_jsx(ListItem, { children: _jsx(User, { elevation: 0, user: c, sx: { m: 0 }, onClick: () => setOpenContributorsDialog(false) }, c.id) }, i))) }) }))) })))] })) : null })) }) })));
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsx(Box, { children: contributorsObject.isLoadingNext && !openContributorsDialog ? (_jsx(ContributorsSkeleton, Object.assign({}, ContributorsSkeletonProps))) : (_jsx(_Fragment, { children: contributorsObject.contributors.length > 0 ? (_jsxs(_Fragment, { children: [_jsxs(Button, Object.assign({ variant: "text", onClick: () => setOpenContributorsDialog(true), classes: { root: classes.btnParticipants }, color: "inherit" }, { children: [_jsxs(Typography, Object.assign({ component: "span", sx: { '&': { all: 'unset' } } }, { children: [_jsx(FormattedMessage, { id: "ui.feedObject.contributors.participants", defaultMessage: "ui.feedObject.contributors.participants" }), ":"] })), _jsxs(AvatarGroup, Object.assign({}, rest, { children: [contributorsObject.contributors.map((c, i) => (_jsx(Avatar, { alt: c.username, src: c.avatar }, i))), [...Array(Math.max(contributorsObject.total - contributorsObject.contributors.length, 0))].map((_x, i) => (_jsx(Avatar, {}, i)))] }))] })), openContributorsDialog && (_jsx(BaseDialog, Object.assign({ title: _jsx(FormattedMessage, { defaultMessage: "ui.feedObject.contributors.title", id: "ui.feedObject.contributors.title", values: { total: contributorsObject.total } }), onClose: () => setOpenContributorsDialog(false), open: openContributorsDialog }, { children: contributorsObject.isLoadingNext ? (_jsx(CentralProgress, { size: 50 })) : (_jsx(InfiniteScroll, Object.assign({ dataLength: contributorsObject.contributors.length, next: contributorsObject.getNextPage(), hasMoreNext: Boolean(contributorsObject.next), loaderNext: _jsx(CentralProgress, { size: 30 }), height: 400, endMessage: _jsx(Typography, Object.assign({ variant: "body2", align: "center", fontWeight: "bold" }, { children: _jsx(FormattedMessage, { id: "ui.feedObject.contributors.noOtherContributors", defaultMessage: "ui.feedObject.contributors.noOtherContributors" }) })) }, { children: _jsx(List, { children: contributorsObject.contributors.map((c, i) => (_jsx(ListItem, { children: _jsx(User, { elevation: 0, user: c, sx: { m: 0 }, onClick: () => setOpenContributorsDialog(false) }, c.id) }, i))) }) }))) })))] })) : null })) }) })));
 }

package/lib/esm/components/PaywallsConfigurator/PaywallsConfigurator.js

@@ -242,7 +242,7 @@ export default function PaywallsConfigurator(inProps) {
                                                         setPendingValue(newValue);
                                                     }, disableCloseOnSelect: true, slots: {
                                                         popper: PopperComponent
-                                                    }, renderTags: () => null, noOptionsText: _jsx(FormattedMessage, { id: "ui.paywallsConfigurator.noProducts", defaultMessage: "ui.paywallsConfigurator.noProducts" }), renderOption: renderOption, options: getOptions, isOptionEqualToValue: (option, value) => option.id === value.id, getOptionLabel: (option) => option.name.toString(), renderInput: (params) => (_jsx(FilterInputRoot, { disabled: loadingProducts || loading, ref: params.InputProps.ref, inputProps: params.inputProps, autoFocus: true, placeholder: intl.formatMessage({
+                                                    }, renderValue: () => null, noOptionsText: _jsx(FormattedMessage, { id: "ui.paywallsConfigurator.noProducts", defaultMessage: "ui.paywallsConfigurator.noProducts" }), renderOption: renderOption, options: getOptions, isOptionEqualToValue: (option, value) => option.id === value.id, getOptionLabel: (option) => option.name.toString(), renderInput: (params) => (_jsx(FilterInputRoot, { disabled: loadingProducts || loading, ref: params.InputProps.ref, inputProps: params.inputProps, autoFocus: true, placeholder: intl.formatMessage({
                                                             id: 'ui.paywallsConfigurator.filterByName',
                                                             defaultMessage: 'ui.paywallsConfigurator.filterByName'
                                                         }) })) }), _jsx(Box, Object.assign({ className: classes.paymentProductsPopperFooter }, { children: _jsx(Button, Object.assign({ variant: "contained", size: "small", disableRipple: true, onClick: handleClose, startIcon: _jsx(Icon, { children: "check" }) }, { children: _jsx(FormattedMessage, { id: "ui.paywallsConfigurator.popper.btnConfirm", defaultMessage: "ui.paywallsConfigurator.popper.btnConfirm" }) })) }))] }) })) })))] })] }))] }))) })));

package/lib/esm/components/PrivateMessageSnippetItem/PrivateMessageSnippetItem.js

@@ -16,7 +16,8 @@ const classes = {
     badgeLabel: `${PREFIX}-badge-label`,
     time: `${PREFIX}-time`,
     menuItem: `${PREFIX}-menu-item`,
-    unread: `${PREFIX}-unread`
+    unread: `${PREFIX}-unread`,
+    contrastColor: `${PREFIX}-contrast-color`
 };
 const Root = styled(ListItem, {
     name: PREFIX,
@@ -85,7 +86,7 @@ export default function PrivateMessageSnippetItem(inProps) {
     /**
      * Renders root object
      */
-    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { secondaryAction: secondaryAction, disablePadding: true }, { children: _jsxs(ListItemButton, Object.assign({ onClick: onItemClick, classes: { root: classNames({ [classes.unread]: message.thread_status === SCPrivateMessageStatusType.NEW }) } }, { children: [_jsx(ListItemAvatar, { children: _jsx(UserAvatar, Object.assign({ hide: !hasBadge() }, { children: message.group ? (_jsx(Avatar, { alt: message.group.name, src: message.group.image_big })) : (_jsx(Avatar, { alt: ((_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.username) === message.receiver.username ? message.sender.username : message.receiver.username, src: ((_b = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _b === void 0 ? void 0 : _b.username) === message.receiver.username ? message.sender.avatar : message.receiver.avatar })) })) }), _jsx(ListItemText, { primary: _jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ component: "span", className: classes.username }, { children: message.group
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { secondaryAction: secondaryAction, disablePadding: true }, { children: _jsxs(ListItemButton, Object.assign({ onClick: onItemClick, classes: { root: classNames({ [classes.unread]: message.thread_status === SCPrivateMessageStatusType.NEW }) } }, { children: [_jsx(ListItemAvatar, { children: _jsx(UserAvatar, Object.assign({ hide: !hasBadge() }, { children: message.group ? (_jsx(Avatar, { alt: message.group.name, src: message.group.image_big })) : (_jsx(Avatar, { alt: ((_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.username) === message.receiver.username ? message.sender.username : message.receiver.username, src: ((_b = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _b === void 0 ? void 0 : _b.username) === message.receiver.username ? message.sender.avatar : message.receiver.avatar })) })) }), _jsx(ListItemText, { primary: _jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ component: "span", className: classNames(classes.username, classes.contrastColor) }, { children: message.group
                                     ? message.group.name
                                     : ((_c = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _c === void 0 ? void 0 : _c.username) === message.receiver.username
                                         ? message.sender.username
@@ -93,5 +94,5 @@ export default function PrivateMessageSnippetItem(inProps) {
                                     day: '2-digit',
                                     month: '2-digit',
                                     year: '2-digit'
-                                })}` }))] }), secondary: _jsx(_Fragment, { children: _jsx(Typography, { component: "span", color: "text.secondary", dangerouslySetInnerHTML: { __html: (_d = message.headline) !== null && _d !== void 0 ? _d : message.message } }) }) })] })) })));
+                                })}` }))] }), secondary: _jsx(_Fragment, { children: _jsx(Typography, { component: "span", color: "text.secondary", dangerouslySetInnerHTML: { __html: (_d = message.headline) !== null && _d !== void 0 ? _d : message.message }, className: classes.contrastColor }) }) })] })) })));
 }

package/lib/esm/components/PrivateMessageSnippets/PrivateMessageSnippets.js

@@ -232,7 +232,7 @@ export default function PrivateMessageSnippets(inProps) {
     /**
      * Renders the component
      */
-    return (_jsx(Root, Object.assign({}, rest, { className: classNames(classes.root, className) }, { children: _jsxs(CardContent, { children: [_jsx(Button, Object.assign({ variant: "outlined", size: "medium", className: classes.newMessageButton, onClick: handleOpenNewMessage }, { children: _jsx(FormattedMessage, { id: "ui.privateMessage.snippets.button.newMessage", defaultMessage: "ui.privateMessage.snippets.button.newMessage" }) })), data.snippets.length !== 0 && (_jsxs(_Fragment, { children: [_jsx(TextField, { className: classes.searchBar, variant: "outlined", margin: "normal", fullWidth: true, id: `${PREFIX}-search`, placeholder: `${intl.formatMessage(messages.placeholder)}`, size: "small", onChange: handleChange, value: search, slotProps: {
+    return (_jsx(Root, Object.assign({}, rest, { className: classNames(classes.root, className) }, { children: _jsxs(CardContent, { children: [_jsx(Button, Object.assign({ variant: "contained", size: "medium", className: classes.newMessageButton, onClick: handleOpenNewMessage }, { children: _jsx(FormattedMessage, { id: "ui.privateMessage.snippets.button.newMessage", defaultMessage: "ui.privateMessage.snippets.button.newMessage" }) })), data.snippets.length !== 0 && (_jsxs(_Fragment, { children: [_jsx(TextField, { className: classes.searchBar, variant: "outlined", margin: "normal", fullWidth: true, id: `${PREFIX}-search`, placeholder: `${intl.formatMessage(messages.placeholder)}`, size: "small", onChange: handleChange, value: search, slotProps: {
                                 input: {
                                     className: classes.input,
                                     startAdornment: _jsx(Icon, Object.assign({ className: classes.icon }, { children: "search" })),

package/lib/esm/components/PrivateMessageThreadItem/PrivateMessageThreadItem.js

@@ -28,6 +28,7 @@ const classes = {
     messageTime: `${PREFIX}-message-time`,
     menuItem: `${PREFIX}-menu-item`,
     downloadButton: `${PREFIX}-download-button`,
+    paperContrastColor: `${PREFIX}-paper-contrast-color`,
     dialogRoot: `${PREFIX}-dialog-root`
 };
 const DialogRoot = styled(BaseDialog, {
@@ -156,7 +157,7 @@ export default function PrivateMessageThreadItem(inProps) {
      */
     return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, getMouseEvents(mouseEvents.onMouseEnter, mouseEvents.onMouseLeave), rest, { secondaryAction: (isHovering || isMobile) &&
             showMenuIcon &&
-            message.status !== SCPrivateMessageStatusType.HIDDEN && _jsx(PrivateMessageSettingsIconButton, { onMenuItemDeleteClick: handleMenuItemClick }) }, { children: [message.group && ((_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.username) !== message.sender.username && (_jsx(Typography, Object.assign({ color: "secondary", variant: "h4", className: classes.username }, { children: message.sender.username }))), _jsxs(_Fragment, { children: [hasFile && message.status !== SCPrivateMessageStatusType.HIDDEN ? (renderMessageFile(message)) : (_jsx(Box, Object.assign({ className: classes.text }, { children: _jsx(Typography, { component: "span", dangerouslySetInnerHTML: { __html: message.message } }) }))), _jsx(Typography, Object.assign({ className: classes.messageTime, color: "text.secondary" }, { children: `${intl.formatDate(message.created_at, {
+            message.status !== SCPrivateMessageStatusType.HIDDEN && _jsx(PrivateMessageSettingsIconButton, { onMenuItemDeleteClick: handleMenuItemClick }) }, { children: [message.group && ((_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.username) !== message.sender.username && (_jsx(Typography, Object.assign({ color: "secondary", variant: "h4", className: classes.username }, { children: message.sender.username }))), _jsxs(_Fragment, { children: [hasFile && message.status !== SCPrivateMessageStatusType.HIDDEN ? (renderMessageFile(message)) : (_jsx(Box, Object.assign({ className: classes.text }, { children: _jsx(Typography, { component: "span", dangerouslySetInnerHTML: { __html: message.message }, className: classes.paperContrastColor }) }))), _jsx(Typography, Object.assign({ className: classNames(classes.messageTime, classes.paperContrastColor), color: "text.secondary" }, { children: `${intl.formatDate(message.created_at, {
                             hour: 'numeric',
                             minute: 'numeric'
                         })}` }))] }), openDialog && (_jsx(_Fragment, { children: (message === null || message === void 0 ? void 0 : message.file.mimetype.startsWith(SCMessageFileType.VIDEO)) ? (_jsx(DialogRoot, Object.assign({ open: openDialog, onClose: () => setOpenDialog(false), className: classes.dialogRoot }, { children: _jsx(AutoPlayer, { url: message === null || message === void 0 ? void 0 : message.file.url, width: "100%" }) }))) : (_jsx(LightBox, { images: [{ src: message === null || message === void 0 ? void 0 : message.file.url, key: message.file.uuid }], onClose: () => setOpenDialog(false), toolbarButtons: _jsx(IconButton, Object.assign({ onClick: () => handleDownload(message === null || message === void 0 ? void 0 : message.file), className: classes.downloadButton }, { children: _jsx(Icon, { children: "download" }) }), "download") })) }))] })));

package/lib/esm/components/User/User.js

@@ -1,6 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Avatar, Badge, Button, Chip, styled } from '@mui/material';
+import { Avatar, Badge, Button, Chip, styled, Typography } from '@mui/material';
 import { useThemeProps } from '@mui/system';
 import { Link, SCPreferences, SCRoutes, useSCFetchUser, useSCPreferences, useSCRouting } from '@selfcommunity/react-core';
 import classNames from 'classnames';
@@ -22,13 +22,14 @@ const classes = {
     root: `${PREFIX}-root`,
     avatar: `${PREFIX}-avatar`,
     staffBadgeLabel: `${PREFIX}-staff-badge-label`,
-    groupAdminBadgeLabel: `${PREFIX}-group-admin-badge-label`
+    groupAdminBadgeLabel: `${PREFIX}-group-admin-badge-label`,
+    paperContrastColor: `${PREFIX}-paper-contrast-color`
 };
 const Root = styled(BaseItemButton, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    overridesResolver: (_props, styles) => styles.root
+})(() => ({}));
 const PREFERENCES = [SCPreferences.STAFF_STAFF_BADGE_LABEL, SCPreferences.STAFF_STAFF_BADGE_ICON];
 /**
  * > API documentation for the Community-JS User component. Learn about the available props and the CSS API.
@@ -99,5 +100,5 @@ export default function User(inProps) {
      */
     return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ elevation: elevation }, rest, { className: classNames(classes.root, className), ButtonBaseProps: buttonProps !== null && buttonProps !== void 0 ? buttonProps : (scUser.deleted
                     ? { onClick: () => setOpenAlert(true) }
-                    : { component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, scUser) }), image: badgeContent ? (_jsx(Badge, Object.assign({ overlap: "circular", anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, badgeContent: badgeContent }, { children: _jsx(Avatar, { alt: scUser.username, src: scUser.avatar, className: classes.avatar }) }))) : (_jsx(UserAvatar, Object.assign({ hide: !hasBadge }, { children: _jsx(Avatar, { alt: scUser.username, src: scUser.avatar, className: classes.avatar }) }))), primary: (hasBadge && preferences) || isGroupAdmin ? (_jsxs(_Fragment, { children: [scUser.username, _jsx(Chip, { component: "span", className: isGroupAdmin ? classes.groupAdminBadgeLabel : classes.staffBadgeLabel, size: "small", label: isGroupAdmin ? (_jsx(FormattedMessage, { defaultMessage: "ui.user.group.admin", id: "ui.user.group.admin" })) : (preferences[SCPreferences.STAFF_STAFF_BADGE_LABEL]) })] })) : (scUser.username), secondary: secondary || (showFollowers ? `${intl.formatMessage(messages.userFollowers, { total: scUser.followers_counter })}` : scUser.description), actions: actions !== null && actions !== void 0 ? actions : renderAuthenticatedActions() })), openAlert && _jsx(UserDeletedSnackBar, { open: openAlert, handleClose: () => setOpenAlert(false) })] }));
+                    : { component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, scUser) }), image: badgeContent ? (_jsx(Badge, Object.assign({ overlap: "circular", anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, badgeContent: badgeContent }, { children: _jsx(Avatar, { alt: scUser.username, src: scUser.avatar, className: classes.avatar }) }))) : (_jsx(UserAvatar, Object.assign({ hide: !hasBadge }, { children: _jsx(Avatar, { alt: scUser.username, src: scUser.avatar, className: classes.avatar }) }))), primary: (hasBadge && preferences) || isGroupAdmin ? (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ component: "span", className: classes.paperContrastColor }, { children: scUser.username })), _jsx(Chip, { component: "span", className: classNames(isGroupAdmin ? classes.groupAdminBadgeLabel : classes.staffBadgeLabel), size: "small", label: _jsx(Typography, Object.assign({ component: "span", sx: { '&': { all: 'unset' } }, className: classes.paperContrastColor }, { children: isGroupAdmin ? (_jsx(FormattedMessage, { defaultMessage: "ui.user.group.admin", id: "ui.user.group.admin" })) : (preferences[SCPreferences.STAFF_STAFF_BADGE_LABEL]) })) })] })) : (_jsx(Typography, Object.assign({ component: "span", className: classes.paperContrastColor }, { children: scUser.username }))), secondary: _jsx(Typography, Object.assign({ component: "span", className: classes.paperContrastColor }, { children: secondary || (showFollowers ? `${intl.formatMessage(messages.userFollowers, { total: scUser.followers_counter })}` : scUser.description) })), actions: actions !== null && actions !== void 0 ? actions : renderAuthenticatedActions() })), openAlert && _jsx(UserDeletedSnackBar, { open: openAlert, handleClose: () => setOpenAlert(false) })] }));
 }

package/lib/esm/shared/AccordionLessons/AccordionLessons.js

@@ -19,7 +19,7 @@ const classes = {
     details: `${PREFIX}-details`,
     circle: `${PREFIX}-circle`,
     link: `${PREFIX}-link`,
-    contrastColor: `${PREFIX}-contrast-color`
+    paperContrastColor: `${PREFIX}-paper-contrast-color`
 };
 const Root = styled(Box, {
     name: PREFIX,
@@ -50,13 +50,13 @@ export default function AccordionLessons(inProps) {
     if (!course) {
         return _jsx(AccordionLessonSkeleton, {});
     }
-    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, { children: ((_a = course.sections) === null || _a === void 0 ? void 0 : _a.length) > 0 ? (course.sections.map((section) => (_jsxs(Accordion, Object.assign({ className: classes.accordion, expanded: expanded === section.id, onChange: handleChange(section.id), disableGutters: true, elevation: 0, square: true }, { children: [_jsxs(AccordionSummary, Object.assign({ className: classes.summary, expandIcon: _jsx(Icon, { children: "expand_more" }) }, { children: [_jsxs(Stack, Object.assign({ className: classes.nameWrapper }, { children: [_jsx(Typography, Object.assign({ component: "span", variant: "body1", className: classes.contrastColor }, { children: section.name })), viewerJoinStatus !== SCCourseJoinStatusType.CREATOR && viewerJoinStatus !== SCCourseJoinStatusType.MANAGER && section.locked && (_jsxs(Fragment, { children: [_jsx(Bullet, {}), _jsx(Typography, Object.assign({ component: "span", variant: "body1", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: "ui.course.accordionLessons.date", defaultMessage: "ui.course.accordionLessons.date", values: {
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, { children: ((_a = course.sections) === null || _a === void 0 ? void 0 : _a.length) > 0 ? (course.sections.map((section) => (_jsxs(Accordion, Object.assign({ className: classes.accordion, expanded: expanded === section.id, onChange: handleChange(section.id), disableGutters: true, elevation: 0, square: true }, { children: [_jsxs(AccordionSummary, Object.assign({ className: classes.summary, expandIcon: _jsx(Icon, { children: "expand_more" }) }, { children: [_jsxs(Stack, Object.assign({ className: classes.nameWrapper }, { children: [_jsx(Typography, Object.assign({ component: "span", variant: "body1", className: classes.paperContrastColor }, { children: section.name })), viewerJoinStatus !== SCCourseJoinStatusType.CREATOR && viewerJoinStatus !== SCCourseJoinStatusType.MANAGER && section.locked && (_jsxs(Fragment, { children: [_jsx(Bullet, {}), _jsx(Typography, Object.assign({ component: "span", variant: "body1", className: classes.paperContrastColor }, { children: _jsx(FormattedMessage, { id: "ui.course.accordionLessons.date", defaultMessage: "ui.course.accordionLessons.date", values: {
                                                     date: intl.formatDate(section.available_date, { day: 'numeric', month: 'numeric', year: 'numeric' }),
                                                     hour: intl.formatDate(section.available_date, { hour: 'numeric', minute: 'numeric' })
-                                                } }) }))] }))] })), !isMobile && (_jsx(Typography, Object.assign({ component: "span", variant: "body1", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: "ui.course.table.lessons.title", defaultMessage: "ui.course.table.lessons.title", values: {
+                                                } }) }))] }))] })), !isMobile && (_jsx(Typography, Object.assign({ component: "span", variant: "body1", className: classes.paperContrastColor }, { children: _jsx(FormattedMessage, { id: "ui.course.table.lessons.title", defaultMessage: "ui.course.table.lessons.title", values: {
                                     lessonsNumber: section.lessons.length
                                 } }) })))] })), section.lessons.map((lesson) => (_jsxs(AccordionDetails, Object.assign({ className: classes.details }, { children: [lesson.completion_status === SCCourseLessonCompletionStatusType.COMPLETED ? (_jsx(Icon, Object.assign({ fontSize: "small", color: "primary" }, { children: "circle_checked" }))) : lesson.locked ? (_jsx(Icon, { children: "private" })) : (_jsx(Box, { className: classes.circle })), course.join_status === null ||
                             viewerJoinStatus === SCCourseJoinStatusType.CREATOR ||
                             viewerJoinStatus === SCCourseJoinStatusType.MANAGER ||
-                            lesson.locked ? (_jsx(Typography, Object.assign({ className: classes.contrastColor }, { children: lesson.name }))) : (_jsx(Button, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.COURSE_LESSON_ROUTE_NAME, getUrlLesson(course, lesson, section)), variant: "text", color: "inherit", className: classes.link }, { children: _jsx(Typography, Object.assign({ className: classes.contrastColor }, { children: lesson.name })) })))] }), lesson.id)))] }), section.id)))) : (_jsx(Typography, Object.assign({ variant: "body1", className: classNames(classes.empty, classes.contrastColor) }, { children: _jsx(FormattedMessage, { id: "ui.course.accordionLessons.empty", defaultMessage: "ui.course.accordionLessons.empty" }) }))) })));
+                            lesson.locked ? (_jsx(Typography, Object.assign({ className: classes.paperContrastColor }, { children: lesson.name }))) : (_jsx(Button, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.COURSE_LESSON_ROUTE_NAME, getUrlLesson(course, lesson, section)), variant: "text", color: "inherit", className: classes.link }, { children: _jsx(Typography, Object.assign({ className: classes.paperContrastColor }, { children: lesson.name })) })))] }), lesson.id)))] }), section.id)))) : (_jsx(Typography, Object.assign({ variant: "body1", className: classNames(classes.empty, classes.paperContrastColor) }, { children: _jsx(FormattedMessage, { id: "ui.course.accordionLessons.empty", defaultMessage: "ui.course.accordionLessons.empty" }) }))) })));
 }

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

@@ -1,6 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Autocomplete, Avatar, Button, Chip, Stack, styled, TextField, Typography, useThemeProps } from '@mui/material';
+import { Autocomplete, Avatar, Button, Chip, Stack, styled, TextField, Typography, useTheme, useThemeProps } from '@mui/material';
 import { Fragment, memo, useCallback, useEffect, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import BaseDialog from '../BaseDialog';
@@ -13,11 +13,12 @@ import classNames from 'classnames';
 const PREFIX = 'SCAddUsersButton';
 const classes = {
     root: `${PREFIX}-root`,
+    defaultContrastColor: `${PREFIX}-default-contrast-color`,
     dialogRoot: `${PREFIX}-dialog-root`,
     dialogAutocompleteWrapper: `${PREFIX}-dialog-autocomplete-wrapper`,
     dialogUserWrapper: `${PREFIX}-dialog-user-wrapper`,
     dialogChipWrapper: `${PREFIX}-dialog-chip-wrapper`,
-    contrastColor: `${PREFIX}-contrast-color`
+    dialogPaperContrastColor: `${PREFIX}-dialog-paper-contrast-color`
 };
 const messages = defineMessages({
     placeholder: {
@@ -41,16 +42,18 @@ function AddUsersButton(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { label, variant = 'outlined', color = 'inherit', size = 'small', endpoint = Endpoints.GetCourseSuggestedUsers, endpointQueryParams = { limit: DEFAULT_PAGINATION_LIMIT, offset: DEFAULT_PAGINATION_OFFSET, search: '' }, onConfirm, className } = props, rest = __rest(props, ["label", "variant", "color", "size", "endpoint", "endpointQueryParams", "onConfirm", "className"]);
+    const { label, variant = 'contained', color = 'inherit', size = 'small', endpoint = Endpoints.GetCourseSuggestedUsers, endpointQueryParams = { limit: DEFAULT_PAGINATION_LIMIT, offset: DEFAULT_PAGINATION_OFFSET, search: '' }, onConfirm, className } = props, rest = __rest(props, ["label", "variant", "color", "size", "endpoint", "endpointQueryParams", "onConfirm", "className"]);
     // STATES
     const [openDialog, setOpenDialog] = useState(false);
     const [invited, setInvited] = useState([]);
     const [suggested, setSuggested] = useState([]);
     const [value, setValue] = useState('');
     const [loading, setLoading] = useState(false);
+    // CONTEXTS
+    const { enqueueSnackbar } = useSnackbar();
     // HOOKS
     const intl = useIntl();
-    const { enqueueSnackbar } = useSnackbar();
+    const theme = useTheme();
     // CALLBACKS
     const fetchUsers = useCallback((newValue) => {
         setLoading(true);
@@ -126,9 +129,14 @@ 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.defaultContrastColor, 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", className: classes.dialogPaperContrastColor }, { 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(Typography, Object.assign({ component: "span", sx: { color: theme.palette.getContrastText(theme.palette.background.paper) } }, { children: _jsx(FormattedMessage, { id: "ui.addUserButton.autocomplete.loading", defaultMessage: "ui.addUserButton.autocomplete.loading" }) })), noOptionsText: _jsx(Typography, Object.assign({ component: "span", sx: { color: theme.palette.getContrastText(theme.palette.background.paper) } }, { children: _jsx(FormattedMessage, { id: "ui.addUserButton.autocomplete.noResults", defaultMessage: "ui.addUserButton.autocomplete.noResults" }) })), renderValue: () => 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, Object.assign({ sx: { color: theme.palette.getContrastText(theme.palette.background.paper) } }, { 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), { sx: {
+                                            '&::placeholder': {
+                                                color: theme.palette.getContrastText(theme.palette.background.paper)
+                                            },
+                                            color: theme.palette.getContrastText(theme.palette.background.paper)
+                                        } })
+                                } }))) }), _jsx(Stack, Object.assign({ className: classes.dialogChipWrapper }, { children: invited.map((option, index) => (_jsx(Chip, { avatar: _jsx(Avatar, { alt: option.username, src: option.avatar }), label: _jsx(Typography, Object.assign({ component: "span", sx: { color: theme.palette.getContrastText(theme.palette.background.paper) } }, { children: option.username })), onDelete: () => {
                                     handleDelete(option);
                                 } }, index))) }))] })) })))] }));
 }

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

@@ -1,10 +1,10 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { styled, Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Card, lighten, darken, getContrastRatio } from '@mui/material';
+import { styled, Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Card, getContrastRatio, lighten } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
 const PREFIX = 'SCConfirmDialog';
 const classes = {
-    contrastColor: `${PREFIX}-contrast-color`
+    paperContrastColor: `${PREFIX}-paper-contrast-color`
 };
 const Root = styled(Card, {
     name: PREFIX,
@@ -12,11 +12,15 @@ const Root = styled(Card, {
     overridesResolver: (_props, styles) => styles.root
 })(({ theme }) => ({
     maxWidth: 800,
-    marginBottom: theme.spacing(2),
-    [`& .${PREFIX}-contrast-color`]: {
-        color: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
-            ? lighten(theme.palette.common.white, 0.5)
-            : darken(theme.palette.common.white, 0.5)
+    marginBottom: theme.spacing(2)
+}));
+const DialogRoot = styled(Dialog, {
+    name: PREFIX,
+    slot: 'DialogRoot',
+    overridesResolver: (_props, styles) => styles.dialogRoot
+})(({ theme }) => ({
+    [`& .${classes.paperContrastColor}`]: {
+        color: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5 ? lighten(theme.palette.common.white, 0.5) : undefined
     }
 }));
 export default function ConfirmDialog(props) {
@@ -43,5 +47,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, Object.assign({ className: classes.contrastColor }, { children: title || _jsx(FormattedMessage, { id: "ui.confirmDialog.title", defaultMessage: "ui.confirmDialog.title" }) })), content && (_jsx(DialogContent, { children: _jsx(DialogContentText, Object.assign({ component: "div", className: classes.contrastColor }, { children: content })) })), _jsxs(DialogActions, { children: [_jsx(Button, Object.assign({ onClick: handleClose, className: classes.contrastColor }, { children: btnCancel || _jsx(FormattedMessage, { id: "ui.confirmDialog.btnCancel", defaultMessage: "ui.confirmDialog.btnCancel" }) })), _jsx(Button, Object.assign({ onClick: handleConfirm, variant: "contained", autoFocus: true, loading: isUpdating, className: classes.contrastColor }, { children: btnConfirm || _jsx(FormattedMessage, { id: "ui.confirmDialog.btnConfirm", defaultMessage: "ui.confirmDialog.btnConfirm" }) }))] })] })) }));
+    return (_jsx(Root, { children: _jsxs(DialogRoot, Object.assign({ open: open, onClose: handleClose }, rest, { children: [_jsx(DialogTitle, Object.assign({ className: classes.paperContrastColor }, { children: title || _jsx(FormattedMessage, { id: "ui.confirmDialog.title", defaultMessage: "ui.confirmDialog.title" }) })), content && (_jsx(DialogContent, { children: _jsx(DialogContentText, Object.assign({ component: "div", className: classes.paperContrastColor }, { 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" }) }))] })] })) }));
 }

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Button, MenuItem, Select, Typography } from '@mui/material';
+import { Button, MenuItem, Select, Typography, useTheme } from '@mui/material';
 import { memo, useCallback, useEffect, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { SCCourseJoinStatusType } from '@selfcommunity/types';
@@ -7,11 +7,7 @@ import { CourseService } from '@selfcommunity/api-services';
 import { Logger } from '@selfcommunity/utils';
 import { SCOPE_SC_UI } from '../../constants/Errors';
 import { useSnackbar } from 'notistack';
-import { PREFIX } from './constants';
 const OPTIONS = ['ui.editCourse.tab.users.table.select.joined', 'ui.editCourse.tab.users.table.select.manager'];
-const classes = {
-    contrastColor: `${PREFIX}-contrast-color`
-};
 function ChangeUserStatus(props) {
     // PROPS
     const { course, user } = props;
@@ -20,6 +16,8 @@ function ChangeUserStatus(props) {
     const [loading, setLoading] = useState(false);
     // CONTEXTS
     const { enqueueSnackbar } = useSnackbar();
+    // HOOKS
+    const theme = useTheme();
     // EFFECTS
     useEffect(() => {
         setValue(`ui.editCourse.tab.users.table.select.${user.join_status || 'joined'}`);
@@ -54,6 +52,6 @@ function ChangeUserStatus(props) {
                     ':hover': {
                         backgroundColor: 'unset'
                     }
-                } }, { children: _jsx(Typography, Object.assign({ variant: "body1", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: option, defaultMessage: option }) })) })) }), i))) })));
+                } }, { children: _jsx(Typography, Object.assign({ variant: "body1", sx: { color: theme.palette.getContrastText(theme.palette.background.paper) } }, { children: _jsx(FormattedMessage, { id: option, defaultMessage: option }) })) })) }), i))) })));
 }
 export default memo(ChangeUserStatus);

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

@@ -13,12 +13,13 @@ import { http } from '@selfcommunity/api-services';
 import { Logger } from '@selfcommunity/utils';
 import { SCOPE_SC_UI } from '../../constants/Errors';
 import ChangeUserStatus from './ChangeUsersStatus';
-import { useSCUser } from '@selfcommunity/react-core';
+import { Link, SCRoutes, useSCRouting, useSCUser } from '@selfcommunity/react-core';
 import RequestButton from './RequestButton';
 import { SCCourseUsersTableModeType } from '../../types/course';
 import RemoveButton from './RemoveButton';
 import ConfirmDialog from '../ConfirmDialog/ConfirmDialog';
 import { SCCourseEditTabType } from '../../types/course';
+import { getUrlEditDashboard } from '../../utils/course';
 const classes = {
     root: `${PREFIX}-root`,
     search: `${PREFIX}-search`,
@@ -28,7 +29,7 @@ const classes = {
     progressWrapper: `${PREFIX}-progress-wrapper`,
     progress: `${PREFIX}-progress`,
     loadingButton: `${PREFIX}-loading-button`,
-    contrastColor: `${PREFIX}-contrast-color`
+    paperContrastColor: `${PREFIX}-paper-contrast-color`
 };
 const Root = styled(Box, {
     name: PREFIX,
@@ -52,6 +53,7 @@ function CourseUsersTable(inProps) {
     const inputRef = useRef(null);
     // CONTEXTS
     const scUserContext = useSCUser();
+    const scRoutingContext = useSCRouting();
     // INTL
     const intl = useIntl();
     // HANDLERS
@@ -145,10 +147,10 @@ function CourseUsersTable(inProps) {
                                     if (i === array.length - 1) {
                                         return _jsx(TableCell, { width: "14%" }, i);
                                     }
-                                    return (_jsx(TableCell, Object.assign({ width: mode === SCCourseUsersTableModeType.DASHBOARD ? '20%' : '25%' }, { children: _jsx(Typography, Object.assign({ variant: "body2", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: cell.id, defaultMessage: cell.id }) })) }), i));
+                                    return (_jsx(TableCell, Object.assign({ width: mode === SCCourseUsersTableModeType.DASHBOARD ? '20%' : '25%' }, { children: _jsx(Typography, Object.assign({ variant: "body2", className: classes.paperContrastColor }, { children: _jsx(FormattedMessage, { id: cell.id, defaultMessage: cell.id }) })) }), i));
                                 }) }) }), _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", className: classes.contrastColor }, { 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", className: classes.contrastColor }, { 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", className: classes.contrastColor }, { 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", className: classes.contrastColor }, { children: _jsx(FormattedDate, { value: mode === SCCourseUsersTableModeType.REQUESTS ? user.date_joined : user.joined_at || new Date() }) })) }), _jsx(TableCell, { children: _jsx(Typography, Object.assign({ variant: "body2", className: classes.contrastColor }, { children: _jsx(FormattedDate, { value: mode === SCCourseUsersTableModeType.REQUESTS ? user.date_joined : user.last_active_at || new Date() }) })) }), mode === SCCourseUsersTableModeType.EDIT &&
+                                    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", className: classes.paperContrastColor }, { 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", className: classes.paperContrastColor }, { 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", className: classes.paperContrastColor }, { 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", className: classes.paperContrastColor }, { children: _jsx(FormattedDate, { value: mode === SCCourseUsersTableModeType.REQUESTS ? user.date_joined : user.joined_at || new Date() }) })) }), _jsx(TableCell, { children: _jsx(Typography, Object.assign({ variant: "body2", className: classes.paperContrastColor }, { 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: "contained", color: "inherit", loading: state.isLoadingNext, disabled: value.length > 0 || !state.next, className: classes.loadingButton, onClick: handleNext }, { children: _jsx(Typography, Object.assign({ variant: "body2", className: classes.contrastColor }, { 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 && state.next && (_jsx(Button, Object.assign({ size: "small", variant: "contained", color: "inherit", loading: state.isLoadingNext, disabled: value.length > 0, className: classes.loadingButton, onClick: handleNext }, { children: _jsx(Typography, Object.assign({ variant: "body2", className: classes.paperContrastColor }, { 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, actions: value.length === 0 && (_jsx(Button, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.COURSE_EDIT_ROUTE_NAME, getUrlEditDashboard(course, SCCourseEditTabType.USERS)), size: "small", variant: "contained", color: "primary" }, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.courseUsersTable.empty.btn.label", defaultMessage: "ui.courseUsersTable.empty.btn.label" }) })) }))) })), dialog && _jsx(ConfirmDialog, { open: true, onClose: () => handleOpenDialog(null), onConfirm: handleConfirm })] })));
 }
 export default memo(CourseUsersTable);