@selfcommunity/react-ui 1.2.0-alpha.3 → 1.2.0-alpha.5

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/Skeleton.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Divider, FormControl, FormControlLabel, FormLabel, Skeleton, Stack, Switch } from '@mui/material';
+import { Box, Divider, FormControl, FormControlLabel, FormLabel, Skeleton, Stack, Switch } from '@mui/material';
 import { PREFIX } from '../constants';
-import { Fragment } from 'react';
 const classes = {
+    optionsContainer: `${PREFIX}-options-container`,
     optionsWrapper: `${PREFIX}-options-wrapper`,
     optionsDivider: `${PREFIX}-options-divider`,
     optionsButtonWrapper: `${PREFIX}-options-button-wrapper`
 };
 export default function OptionsSkeleton() {
-    return (_jsxs(Fragment, { children: [_jsx(Stack, Object.assign({ className: classes.optionsWrapper }, { children: Array.from(Array(3)).map((_, i) => (_jsxs(FormControl, Object.assign({ component: "fieldset", variant: "standard" }, { children: [_jsx(FormLabel, Object.assign({ component: "legend" }, { children: _jsx(Skeleton, { animation: "wave", variant: "text", width: "52px", height: "21px" }) })), _jsx(FormControlLabel, { control: _jsx(Switch, {}), label: _jsx(Skeleton, { animation: "wave", variant: "text", width: "215px", height: "38px" }) })] }), i))) })), _jsx(Divider, { className: classes.optionsDivider }), _jsx(Stack, Object.assign({ className: classes.optionsButtonWrapper }, { children: _jsx(Skeleton, { animation: "wave", variant: "rounded", width: "133px", height: "33px" }) }))] }));
+    return (_jsxs(Box, Object.assign({ className: classes.optionsContainer }, { children: [_jsx(Stack, Object.assign({ className: classes.optionsWrapper }, { children: Array.from(Array(3)).map((_, i) => (_jsxs(FormControl, Object.assign({ component: "fieldset", variant: "standard" }, { children: [_jsx(FormLabel, Object.assign({ component: "legend" }, { children: _jsx(Skeleton, { animation: "wave", variant: "text", width: "52px", height: "21px" }) })), _jsx(FormControlLabel, { control: _jsx(Switch, {}), label: _jsx(Skeleton, { animation: "wave", variant: "text", width: "215px", height: "38px" }) })] }), i))) })), _jsx(Divider, { className: classes.optionsDivider }), _jsx(Stack, Object.assign({ className: classes.optionsButtonWrapper }, { children: _jsx(Skeleton, { animation: "wave", variant: "rounded", width: "133px", height: "33px" }) }))] })));
 }

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/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/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';
@@ -23,7 +23,7 @@ const classes = {
     avatar: `${PREFIX}-avatar`,
     staffBadgeLabel: `${PREFIX}-staff-badge-label`,
     groupAdminBadgeLabel: `${PREFIX}-group-admin-badge-label`,
-    contrastColor: `${PREFIX}-contrast-color`
+    paperContrastColor: `${PREFIX}-paper-contrast-color`
 };
 const Root = styled(BaseItemButton, {
     name: PREFIX,
@@ -100,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: classNames(classes.contrastColor, 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);

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

@@ -17,7 +17,8 @@ const classes = {
     infoInnerWrapper: `${PREFIX}-info-inner-wrapper`,
     avatarWrapper: `${PREFIX}-avatar-wrapper`,
     avatar: `${PREFIX}-avatar`,
-    contrastColor: `${PREFIX}-contrast-color`
+    paperContrastColor: `${PREFIX}-paper-contrast-color`,
+    dialogPaperContrastColor: `${PREFIX}-dialog-paper-contrast-color`
 };
 const DialogRoot = styled(BaseDialog, {
     name: PREFIX,
@@ -50,8 +51,8 @@ function SeeProgressButton(props) {
     const handleToggleOpen = useCallback(() => {
         setOpen((prev) => !prev);
     }, [setOpen]);
-    return (_jsxs(Fragment, { children: [isMobile ? (_jsx(IconButton, Object.assign({ size: "small", color: "inherit", onClick: handleToggleOpen }, { children: _jsx(Icon, { children: "chevron_right" }) }))) : (_jsx(Button, Object.assign({ variant: "contained", size: "small", color: "inherit", onClick: handleToggleOpen }, { children: _jsx(Typography, Object.assign({ variant: "body2", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: "ui.courseUsersTable.action.btn.label", defaultMessage: "ui.courseUsersTable.action.btn.label" }) })) }))), open && (_jsx(DialogRoot, Object.assign({ DialogContentProps: { dividers: isMobile }, open: true, scroll: "paper", onClose: handleToggleOpen, title: intl.formatMessage({ id: 'ui.courseUsersTable.dialog.title', defaultMessage: 'ui.courseUsersTable.dialog.title' }), className: classes.dialogRoot }, { children: _jsxs(Stack, Object.assign({ className: classes.contentWrapper }, { children: [_jsxs(Stack, Object.assign({ className: classes.infoOuterWrapper }, { children: [_jsxs(Stack, Object.assign({ className: classes.infoInnerWrapper }, { children: [_jsxs(Stack, Object.assign({ className: classes.avatarWrapper }, { children: [_jsx(Link, Object.assign({}, (!course.created_by.deleted && {
+    return (_jsxs(Fragment, { children: [isMobile ? (_jsx(IconButton, Object.assign({ size: "small", color: "inherit", onClick: handleToggleOpen }, { children: _jsx(Icon, { children: "chevron_right" }) }))) : (_jsx(Button, Object.assign({ variant: "contained", size: "small", color: "inherit", onClick: handleToggleOpen }, { children: _jsx(Typography, Object.assign({ variant: "body2", className: classes.paperContrastColor }, { children: _jsx(FormattedMessage, { id: "ui.courseUsersTable.action.btn.label", defaultMessage: "ui.courseUsersTable.action.btn.label" }) })) }))), open && (_jsx(DialogRoot, Object.assign({ DialogContentProps: { dividers: isMobile }, open: true, scroll: "paper", onClose: handleToggleOpen, title: intl.formatMessage({ id: 'ui.courseUsersTable.dialog.title', defaultMessage: 'ui.courseUsersTable.dialog.title' }), className: classes.dialogRoot }, { children: _jsxs(Stack, Object.assign({ className: classes.contentWrapper }, { children: [_jsxs(Stack, Object.assign({ className: classes.infoOuterWrapper }, { children: [_jsxs(Stack, Object.assign({ className: classes.infoInnerWrapper }, { children: [_jsxs(Stack, Object.assign({ className: classes.avatarWrapper }, { children: [_jsx(Link, Object.assign({}, (!course.created_by.deleted && {
                                                     to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, course.created_by)
-                                                }), { children: _jsx(UserAvatar, Object.assign({ hide: !course.created_by.community_badge, smaller: true }, { children: _jsx(Avatar, { className: classes.avatar, src: user.avatar, alt: user.username }) })) })), _jsx(Typography, Object.assign({ variant: "body1", className: classes.contrastColor }, { children: user.username }))] })), privateMessagingEnabled && (_jsx(Button, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, user), variant: "contained", size: "small", color: "inherit" }, { children: _jsx(Typography, Object.assign({ variant: "body2", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: "ui.courseUsersTable.dialog.btn.label", defaultMessage: "ui.courseUsersTable.dialog.btn.label" }) })) })))] })), student ? (_jsx(Typography, Object.assign({ variant: "body1", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: "ui.courseUsersTable.dialog.info.text1", defaultMessage: "ui.courseUsersTable.dialog.info.text1", values: { lessonsCompleted: student.num_lessons_completed } }) }))) : (_jsx(Skeleton, { animation: "wave", variant: "text", width: "100px", height: "21px" })), student ? (_jsx(Typography, Object.assign({ variant: "body1", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: "ui.courseUsersTable.dialog.info.text2", defaultMessage: "ui.courseUsersTable.dialog.info.text2", values: { courseCompleted: student.user_completion_rate } }) }))) : (_jsx(Skeleton, { animation: "wave", variant: "text", width: "100px", height: "21px" }))] })), _jsx(AccordionLessons, { course: student, viewerJoinStatus: course.join_status })] })) })))] }));
+                                                }), { children: _jsx(UserAvatar, Object.assign({ hide: !course.created_by.community_badge, smaller: true }, { children: _jsx(Avatar, { className: classes.avatar, src: user.avatar, alt: user.username }) })) })), _jsx(Typography, Object.assign({ variant: "body1", className: classes.dialogPaperContrastColor }, { children: user.username }))] })), privateMessagingEnabled && (_jsx(Button, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, user), variant: "contained", size: "small", color: "inherit" }, { children: _jsx(Typography, Object.assign({ variant: "body2", className: classes.dialogPaperContrastColor }, { children: _jsx(FormattedMessage, { id: "ui.courseUsersTable.dialog.btn.label", defaultMessage: "ui.courseUsersTable.dialog.btn.label" }) })) })))] })), student ? (_jsx(Typography, Object.assign({ variant: "body1", className: classes.dialogPaperContrastColor }, { children: _jsx(FormattedMessage, { id: "ui.courseUsersTable.dialog.info.text1", defaultMessage: "ui.courseUsersTable.dialog.info.text1", values: { lessonsCompleted: student.num_lessons_completed } }) }))) : (_jsx(Skeleton, { animation: "wave", variant: "text", width: "100px", height: "21px" })), student ? (_jsx(Typography, Object.assign({ variant: "body1", className: classes.dialogPaperContrastColor }, { children: _jsx(FormattedMessage, { id: "ui.courseUsersTable.dialog.info.text2", defaultMessage: "ui.courseUsersTable.dialog.info.text2", values: { courseCompleted: student.user_completion_rate } }) }))) : (_jsx(Skeleton, { animation: "wave", variant: "text", width: "100px", height: "21px" }))] })), _jsx(AccordionLessons, { course: student, viewerJoinStatus: course.join_status })] })) })))] }));
 }
 export default memo(SeeProgressButton);

package/lib/esm/types/course.d.ts

@@ -38,3 +38,8 @@ export interface SCCourseGetUrlLessonData {
     section_id: number;
     lesson_id: number;
 }
+export interface SCDataUrlEditDashboard {
+    id: number;
+    slug: string;
+    tab: SCCourseEditTabType;
+}

package/lib/esm/utils/course.d.ts

@@ -1,5 +1,5 @@
 import { SCCourseLessonType, SCCourseSectionType, SCCourseType } from '@selfcommunity/types';
-import { SCCourseGetUrlLessonData } from '../types/course';
+import { SCCourseEditTabType, SCCourseGetUrlLessonData, SCDataUrlEditDashboard } from '../types/course';
 export declare function isCourseNew(course: SCCourseType | null): boolean;
 export declare function isCourseCompleted(course: SCCourseType | null): boolean;
 declare enum unitType {
@@ -11,4 +11,5 @@ export declare function getDripDelayAndUnit(value: number): {
     _unit: unitType;
 };
 export declare function getUrlLesson(course: SCCourseType, lesson: Partial<SCCourseLessonType>, section?: SCCourseSectionType): SCCourseGetUrlLessonData;
+export declare function getUrlEditDashboard(course: SCCourseType, tab: SCCourseEditTabType): SCDataUrlEditDashboard;
 export {};

package/lib/esm/utils/course.js

@@ -30,3 +30,10 @@ export function getUrlLesson(course, lesson, section) {
         lesson_id: lesson.id
     };
 }
+export function getUrlEditDashboard(course, tab) {
+    return {
+        id: course.id,
+        slug: course.slug,
+        tab
+    };
+}